How to Drag & Drop Listbox Item within the parent boundary using Telerik behavior in WPF application?


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

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.

If you can execute drag and drop behavior then you can also use the Telerik user interface in your application. We will explain the drag and drop the Listbox item using the Telerik behavior below.

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: UserControlPage. 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.

  1. A drag source from which the dragged object originates
  2. A drop target that receives the dropped object.

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:

  1. The UseAdornerLayer property is set to true to limit visual drift within the boundaries of the parent element.
  2. By default, DragDropManager displays the drag image in a separate window. Starting with build 2018, you have the option to set the UseAdornerLayer property of the DragDropManager. When this property is set to be True, the drag image will display in MainWindows AdornerLayer.

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.


Wants to Talk with Our Highly Skilled WPF Developer ?

Your Search ends here.


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();
        }
    }
}

Conclusion

In this blog, we have explained that how to Drag and Drop Listbox Items within the parent boundary using Telerik behavior in the WPF application. We explained how to constrain the floating image within the upper bounds using the Telerik behavior and illustrated it with an example too.

How to Drag & Drop Listbox Item within the parent boundary using Telerik behavior in WPF application?

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.

If you can execute drag and drop behavior then you can also use the Telerik user interface in your application. We will explain the drag and drop the Listbox item using the Telerik behavior below.

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: UserControlPage. 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.

  1. A drag source from which the dragged object originates
  2. A drop target that receives the dropped object.

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:

  1. The UseAdornerLayer property is set to true to limit visual drift within the boundaries of the parent element.
  2. By default, DragDropManager displays the drag image in a separate window. Starting with build 2018, you have the option to set the UseAdornerLayer property of the DragDropManager. When this property is set to be True, the drag image will display in MainWindows AdornerLayer.

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.


Wants to Talk with Our Highly Skilled WPF Developer ?

Your Search ends here.


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();
        }
    }
}

Conclusion

In this blog, we have explained that how to Drag and Drop Listbox Items within the parent boundary using Telerik behavior in the WPF application. We explained how to constrain the floating image within the upper bounds using the Telerik behavior and illustrated it with an example too.

  • Pin It
TOP