Post
Ask Question

Drag / Drop ListBoxItem Within The Parent Boundary Using Telerik Behavior

Introduction

 
How to drag and drop ListBox Items in Windows Presentation Foundation(WPF) within the parent bounds has been a question that's appeared on many websites. So I have decided to tackle the problem here. To demonstrate drag and drop Listbox items within the parent bounds, I've added Telerik Assembly which contains drag-drop-behavior (<telerik: ListBoxDragDropBehavior/>). For dragging and dropping Listbox items and for restricting the dragged items within the parent bounds an adorner layer can be used. You can select multiple Listbox items by holding the Ctrl or Shift key and then dragging one of the selected items.
 
Generally, the drag-drop operations are executed in a separate window. The Adorner layer can also be used, which will force the drag visual to remain within the boundaries of the current window. Indeed, the <telerik: ListBoxDragDropBehavior/> Telerik behavior also exposes methods for further customization, and the target framework version is Dot-Net Framework - 4.7.2. Assembly Versions used in the sample is 2020.3.1012.40Telerik.Windows.Control and Telerik.Windows.Control.Navigation.
 

Getting Started

 
In this walkthrough, you will create a custom WPF UserControl that represents ListBox Items. You will implement functionality on the control to enable data transfer through telerik-drag-and-drop behavior. For example, if you drag one ListBoxItem to another, the data is copied from the source to the target. 
  • Creating a WPF Project. Open Visual Studio 2017 or higher version.
  • Go to File => New => Project.
  • Select Window in installed templates.
  • Select WPF Application.
  • Enter the Name and choose the location.
  • Click OK.
  • Create a UserControl and add the Following Xaml Code and XAML.cs code-behind.
  • Add telerik reference in xaml,

    xmlns:telerik=http://schemas.telerik.com/2008/xaml/presentation
DragDropCustomControl.xaml
  1. <UserControl  
  2. x:Class="DragDropWithinParentBoundaries.CustomControl.DragDropCustomControl"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:behavior="clr-namespace:DragDropWithinParentBoundaries.DragDropBehavior"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:local="clr-namespace:DragDropWithinParentBoundaries.Models"  
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  9.     xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  
  10. d:DesignHeight="150"  
  11. d:DesignWidth="400"  
  12. mc:Ignorable="d">  
  13.     <UserControl.Resources>  
  14.         <local:CountryViewModel x:Key="CountryViewMode" />  
  15.         <Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">  
  16.             <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />  
  17.         </Style>  
  18.     </UserControl.Resources>  
  19.     <Grid DataContext="{StaticResource CountryViewMode}">  
  20.         <telerik:RadListBox  
  21. x:Name="radListObj"  
  22. HorizontalAlignment="Stretch"  
  23. VerticalAlignment="Stretch"  
  24. AllowDrop="True"  
  25. ItemContainerStyle="{StaticResource DraggableListBoxItem}"  
  26. ItemsSource="{Binding CountryView}"  
  27. SelectionMode="Extended">  
  28.             <telerik:RadListBox.ItemTemplate>  
  29.                 <DataTemplate>  
  30.                     <Grid Margin="0,2">  
  31.                         <Grid.ColumnDefinitions>  
  32.                             <ColumnDefinition Width="*" />  
  33.                             <ColumnDefinition Width="100" />  
  34.                         </Grid.ColumnDefinitions>  
  35.                         <TextBlock FontWeight="Bold" Text="{Binding Name}" />  
  36.                         <TextBlock Grid.Column="1" Text="{Binding Capital}" />  
  37.                     </Grid>  
  38.                 </DataTemplate>  
  39.             </telerik:RadListBox.ItemTemplate>  
  40.             <telerik:RadListBox.DragVisualProvider>  
  41.                 <telerik:ScreenshotDragVisualProvider />  
  42.             </telerik:RadListBox.DragVisualProvider>  
  43.             <telerik:RadListBox.DragDropBehavior>  
  44.                 <telerik:ListBoxDragDropBehavior/>  
  45.                 <!--defualt telerik behaviour -->  
  46.             </telerik:RadListBox.DragDropBehavior>  
  47.         </telerik:RadListBox>  
  48.     </Grid>  
  49. </UserControl>  
Code Explanation
  • telerik:ScreenshotDragVisualProvider  creates drag visuals containing screenshots of the dragged item containers during drag/drop operations. It enables you to display the default drag cue of telerik:ScreenshotDragVisualProvider during drag operation.

  • telerik:ListBoxDragDropBehavior provides drag-drop capabilities for standard ListBox controls. This behavior involves in two operations: a drag source from which the dragged object originates and a drop target which receives the dropped object.
DragDropCustomControl.xaml.cs
  1. public partial class DragDropCustomControl: UserControl {  
  2.     public DragDropCustomControl() {  
  3.         Telerik.Windows.DragDrop.DragDropManager.UseAdornerLayer = true;  
  4.         InitializeComponent();  
  5.     }  
  6. }  
Code Explanation
  • UseAdornerLayer property is set to true to restrict the drag visual within the parent bounds.
  • By default, the DragDropManager shows the drag visual in a separate window. Since the 2018 build version, you have the option to set the UseAdornerLayer property of the DragDropManager. After this property is set to True, the drag visual will be shown in the AdornerLayer of the MainWindow.(For Restricting the Visual Within the parent Bounds).
Attaching DefaultBehavior in Xaml
  • Add this in Xaml,
    1. <telerik:RadListBox.DragDropBehavior>  
    2.    <telerik:ListBoxDragDropBehavior/>  
    3. </telerik:RadListBox.DragDropBehavior>  
Models-AutoImplemented Properties
 
Country.cs
  1. using System;  
  2. using System.ComponentModel;  
  3. using System.Linq.Expressions;  
  4. public class Country: INotifyPropertyChanged {  
  5.     public event PropertyChangedEventHandler PropertyChanged;  
  6.     public string Name {  
  7.         get;  
  8.         set;  
  9.     }  
  10.     public string Capital {  
  11.         get;  
  12.         set;  
  13.     }  
  14.     protected virtual void OnPropertyChanged(PropertyChangedEventArgs args) {  
  15.         if (this.PropertyChanged != null) {  
  16.             this.PropertyChanged(this, args);  
  17.         }  
  18.     }  
  19.     protected void OnPropertyChanged(string propertyName) {  
  20.         this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));  
  21.     }  
  22.     protected void OnPropertyChanged < T > (Expression < Func < T >> propertyExpression) {  
  23.         this.OnPropertyChanged(((MemberExpression) propertyExpression.Body).Member.Name);  
  24.     }  
  25. }  
CountryViewModel.cs
  1. using System.Collections.ObjectModel;  
  2. using Telerik.Windows.Controls;  
  3. publicclass CountryViewModel: ViewModelBase {  
  4.     private ObservableCollection < Country > countryView;  
  5.     public CountryViewModel() {  
  6.         this.CountryView = new ObservableCollection < Country > () {  
  7.             new Country {  
  8.                 Name = "India",  
  9.                     Capital = "New Delhi"  
  10.             },  
  11.             new Country {  
  12.                 Name = "United States Amercia",  
  13.                     Capital = "Washington D.C"  
  14.             },  
  15.             new Country {  
  16.                 Name = "United Kingdom",  
  17.                     Capital = "London"  
  18.             },  
  19.             new Country {  
  20.                 Name = "United Arab Emirates",  
  21.                     Capital = "Abu Dhabi"  
  22.             },  
  23.             new Country {  
  24.                 Name = "Australia",  
  25.                     Capital = "Canberra"  
  26.             }  
  27.         };  
  28.     }  
  29.     /// <Summary>Gets or sets Country and notifies for changes</Summary>  
  30.     public ObservableCollection < Country > CountryView {  
  31.         get {  
  32.             returnthis.countryView;  
  33.         }  
  34.         set {  
  35.             if (this.countryView != value) {  
  36.                 this.countryView = value;  
  37.                 this.OnPropertyChanged(() => this.CountryView);  
  38.             }  
  39.         }  
  40.     }  
  41. }  
Code Explanation
 
A ObservbleCollection instance is created and the values are assigned to generate the content of the ListBoxItems(ListBox.ItemSources).
 
Call the UserControl From MainWindow
 
Finally!!! Call the UserControl from the MainWindow so that the MainWindow acts as parent and ListBox Control as Child.
  1. <Window  
  2. x:Class="DragDropWithinParentBoundaries.MainWindow"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  6.     xmlns:local="clr-namespace:DragDropWithinParentBoundaries.CustomControl"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.    Title="MainWindow"  
  9.    Width="400"  
  10.    Height="250"  
  11.    mc:Ignorable="d">  
  12.     <Grid>  
  13.         <!--Call the UserControl From MainWindow-->  
  14.         <local:DragDropCustomControl  
  15.             Width="300"  
  16.             Height="150"  
  17.             Margin="20" />  
  18.     </Grid>  
  19. </Window>  
Run the Application
 
We must call the UserControl from the MainWindow so that the MainWindow acts as parent and ListBox Control as Child.

 

Conclusion

 
In this article, we discussed how to restrict the drag visual within the parent bounds using Telerik behavior and illustrated this through an example. I hope that this article reveals some of the mystery behind drag and drop.


Similar Articles