How to: Enable Drag-and-Drop in the CardView
- 5 minutes to read
This example demonstrates how to enable Drag-and-Drop functionality in the GridControl with a Card View. The DataViewBase.AllowDragDrop property is set to true.
Note
The GridControl ships with native drag-and-drop support starting from version 17.2. Use Drag-and-Drop Managers to enable drag-and-drop functionality in the previous versions.
The image below shows the result:
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-enable-drag-and-drop-feature-in-the-cardview-e4616.
- MainWindow.xaml.cs
- OrderHelper.cs
- MainWindow.xaml
- OrderHelper.vb
- MainWindow.xaml.vb
- Application.xaml.vb
- Application.xaml
using System.Windows;
namespace CardViewDragDrop {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
}
}
using DevExpress.Mvvm;
using System;
using System.Collections.ObjectModel;
namespace DXSample {
public class OrderHelper {
public ObservableCollection<Order> Orders { get; private set; }
public OrderHelper() {
Random rnd = new Random();
Orders = new ObservableCollection<Order>();
for (int i = 0; i < rnd.Next(100, 200); i++)
Orders.Add(new Order());
}
}
public class Order : ViewModelBase {
static Random rnd = new Random();
string _Name;
DateTime _OrderDate;
int _Amount;
int _Price;
bool _IsProcessed;
#region Properties
public string Name {
get { return _Name; }
set { SetProperty(ref _Name, value, () => Name); }
}
public DateTime OrderDate {
get { return _OrderDate; }
set { SetProperty(ref _OrderDate, value, () => OrderDate); }
}
public int Amount {
get { return _Amount; }
set { SetProperty(ref _Amount, value, () => Amount); }
}
public int Price {
get { return _Price; }
set { SetProperty(ref _Price, value, () => Price); }
}
public bool IsProcessed {
get { return _IsProcessed; }
set { SetProperty(ref _IsProcessed, value, () => IsProcessed); }
}
#endregion
public Order() {
Name = RandomStringHelper.GetRandomString();
OrderDate = new DateTime(rnd.Next(1998, 2012), rnd.Next(1, 12), rnd.Next(1, 28));
Amount = rnd.Next(-1000, 1000);
Price = rnd.Next(0, 10000);
IsProcessed = rnd.NextDouble() > 0.5;
}
}
public class RandomStringHelper {
static Random rnd = new Random();
static string letters = "abcdefghijklmnopqrstuvwxyz";
public static string GetRandomString() {
int length = rnd.Next(6, 20);
string retVal = ("" + letters[rnd.Next(25)]).ToUpper();
for (int i = 0; i < length - 1; i++)
retVal += letters[rnd.Next(25)];
return retVal;
}
}
}
<Window x:Class="CardViewDragDrop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:DXSample="clr-namespace:DXSample"
Title="MainWindow" Height="640" Width="950">
<Window.DataContext>
<DXSample:OrderHelper/>
</Window.DataContext>
<Grid>
<dxg:GridControl ItemsSource="{Binding Orders}" AutoPopulateColumns="True" >
<dxg:GridControl.View>
<dxg:CardView AllowDragDrop="True" />
</dxg:GridControl.View>
</dxg:GridControl>
</Grid>
</Window>
Imports DevExpress.Mvvm
Imports System
Imports System.Collections.ObjectModel
Namespace DXSample
Public Class OrderHelper
Private privateOrders As ObservableCollection(Of Order)
Public Property Orders() As ObservableCollection(Of Order)
Get
Return privateOrders
End Get
Private Set(ByVal value As ObservableCollection(Of Order))
privateOrders = value
End Set
End Property
Public Sub New()
Dim rnd As New Random()
Orders = New ObservableCollection(Of Order)()
Dim i As Integer = 0
Do While i < rnd.Next(100, 200)
Orders.Add(New Order())
i += 1
Loop
End Sub
End Class
Public Class Order
Inherits ViewModelBase
Private Shared rnd As New Random()
Private _Name As String
Private _OrderDate As Date
Private _Amount As Integer
Private _Price As Integer
Private _IsProcessed As Boolean
#Region "Properties"
Public Property Name() As String
Get
Return _Name
End Get
Set(ByVal value As String)
SetProperty(_Name, value, Function() Name)
End Set
End Property
Public Property OrderDate() As Date
Get
Return _OrderDate
End Get
Set(ByVal value As Date)
SetProperty(_OrderDate, value, Function() OrderDate)
End Set
End Property
Public Property Amount() As Integer
Get
Return _Amount
End Get
Set(ByVal value As Integer)
SetProperty(_Amount, value, Function() Amount)
End Set
End Property
Public Property Price() As Integer
Get
Return _Price
End Get
Set(ByVal value As Integer)
SetProperty(_Price, value, Function() Price)
End Set
End Property
Public Property IsProcessed() As Boolean
Get
Return _IsProcessed
End Get
Set(ByVal value As Boolean)
SetProperty(_IsProcessed, value, Function() IsProcessed)
End Set
End Property
#End Region
Public Sub New()
Name = RandomStringHelper.GetRandomString()
OrderDate = New Date(rnd.Next(1998, 2012), rnd.Next(1, 12), rnd.Next(1, 28))
Amount = rnd.Next(-1000, 1000)
Price = rnd.Next(0, 10000)
IsProcessed = rnd.NextDouble() > 0.5
End Sub
End Class
Public Class RandomStringHelper
Private Shared rnd As New Random()
Private Shared letters As String = "abcdefghijklmnopqrstuvwxyz"
Public Shared Function GetRandomString() As String
Dim length As Integer = rnd.Next(6, 20)
Dim retVal As String = ("" & letters.Chars(rnd.Next(25))).ToUpper()
Dim i As Integer = 0
Do While i < length - 1
retVal &= letters.Chars(rnd.Next(25))
i += 1
Loop
Return retVal
End Function
End Class
End Namespace
Imports System.Windows
Namespace CardViewDragDrop
''' <summary>
''' Interaction logic for MainWindow.xaml
''' </summary>
Partial Public Class MainWindow
Inherits Window
Public Sub New()
InitializeComponent()
End Sub
End Class
End Namespace
' Developer Express Code Central Example:
' How to implement the Drag&Drop functionality for the CardView
'
' We have created an example demonstrating how to implement the Drag&Drop
' functionality for the CardView.
' This functionality is encapsulated in the
' CardDragDropManager class. So, all you need to do is to attach this behavior to
' the GridControl.
'
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E4616
' Developer Express Code Central Example:
' How to implement the Drag&Drop functionality for the CardView
'
' We have created an example demonstrating how to implement the Drag&Drop
' functionality for the CardView.
' This functionality is encapsulated in the
' CardDragDropManager class. So, all you need to do is to attach this behavior to
' the GridControl.
'
' You can find sample updates and versions for different programming languages here:
' http://www.devexpress.com/example=E4616
Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Threading.Tasks
Imports System.Windows
Namespace CardViewDragDrop
''' <summary>
''' Interaction logic for App.xaml
''' </summary>
Partial Public Class App
Inherits Application
End Class
End Namespace
<Application x:Class="CardViewDragDrop.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
</Application.Resources>
</Application>