In this blog, we will be going to discuss how to drag and drop Listbox item within the parent boundary using the Telerik behavior in Windows presentation foundation (WPF) application. If you can move the list items in one to another position then at a time to use drag and drop behavior. This behavior is executed in a separate window.

WPF is a desktop application for the user interface framework. The graphics user interface and the behavior are built in the same language, for example, C # or VB.Net, which will require more effort from the developer to implement both the user interface and the behavior within it. In WPF, the user interface is designed in XAML. Therefore, it is very easy to separate the behavior of the code from the designer. XAML can be work in parallel designed. The distinction between a GUI and its behavior can allow us to easily change the appearance of the control using styles and templates.

Example:

Please follow the steps for drag and drop Listbox items within the parent boundary using Telerik behavior in the WPF application.

Step 1: First, Create a new project of the Windows presentation foundation (WPF) application. Select the platform of the window then select the project type of WPF application (.Net Framework).

Step 2: After selecting the project type you have to insert the project name for the WPF application. After that you have to add the location of the project then click ok.

Step 3: Now create a new xaml file for the User control interface and assign the name as UserControlPage.Xaml.

File Name: UserControl.xaml.

Code:

Code Explanation:

telerik:RadListBox.DragVisualProvider:

Create drag-and-drop images with container screenshots of items dragged during drag-and-drop operations. During the drag process, it allows you to display telerik default drag guide: ScreenshotDragVisualProvider.

telerik:ListBoxDragDropBehavior:

It provides drag-drop capabilities for standard ListBox controls. There are two operations in this behavior.

Step 4: Now you have to insert the code in xaml class and inherit the class of User Control.

File Name: UserControl.xaml.cs.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DemoOfDragAndDrop.Custom_Control
{
    ///  Interaction logic for UserControlPage.xaml
    public partial class UserControlPage : UserControl
    {
        public UserControlPage()
        {
            Telerik.Windows.DragDrop.DragDropManager.UseAdornerLayer = true;
            InitializeComponent();
        }
    }
}

Code Explanation:

Step 5: Now you have to create a one model class in the project and assign the name as State.cs.

File Name: State.cs

Code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Linq.Expressions;
using System.Text;
using System.Threading.Tasks;

namespace DemoOfDragAndDrop.Model
{
    //This Class is a Model class .
    public class State:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public string State_Name
        {
            get;
            set;
        }
        public string Country_Name
        {
            get;
            set;
        }
        protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, args);
            }
        }
        protected void OnPropertyChanged(string propertyName)
        {
            this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }
        protected void OnPropertyChanged(Expression> propertyExpression)
        {
            this.OnPropertyChanged(((MemberExpression)propertyExpression.Body).Member.Name);
        }
    }

Step 6: Now create a new class of StateViewModel.cs for binding the data to the model to ViewModel.

File name:StateViewModel.cs

Code:

using DemoOfDragAndDrop.Model;
using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DemoOfDragAndDrop.ViewModel
{
    public class StateViewModel: ViewModelBase
{
        //State is a Model
        private ObservableCollection countryView;
        public StateViewModel()
        {
            this.StateView = new ObservableCollection() {
            new State {
                State_Name = "Gujarat",
                    Country_Name = "Porbunder"
            },
           new State {
                State_Name = "Rajasthan",
                    Country_Name = "Jaisalmer"
            },
           new State {
                State_Name = "Jammu - Kasmir",
                    Country_Name = "Manali"
            },
           new State {
                State_Name = "Punjab",
                    Country_Name = "Punjab"
            },
            new State {
                State_Name = "Chennai",
                    Country_Name ="Chennai"
            }
        };
        }
        /// Gets or sets State and Country names 
        public ObservableCollection StateView
        {
            get
            {
                return this.StateView;
            }
            set
            {
                if (this.StateView != value)
                {
                    this.StateView = value;
                    this.OnPropertyChanged(() => this.StateView);
                }
            }
        }	
    }
}

Code Explanation:

You can add all the records in the Listbox using the model and you also have to bound the data in the user interface.

Step 7: Now you have to add the namespace in the mainPage.xaml

NameSpace:

Code:

FIle Name:MainPage.xaml

Code:

Step 8: It is used to show the data in the user side.

File Name:MainWIndow.xaml.cs

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DemoOfDragAndDrop
{
    /// Interaction logic for MainWindow.xaml
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}