DragDrop between listboxes example

[Eric]

Hi there, we're currently evaluating some controls in the RadControls library.

We can't get the "Drag and Drop Between ListBoxes - Basic" example http://www.telerik.com/help/wpf/raddraganddrop-between-listboxes.html working.  We've precisely followed the example, yet there is no effect when attempting to drag items from one listbox to the other.

Here's the C#

using System;
using System.Collections;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using Telerik.Windows.Controls.DragDrop;

namespace RadDragDrop2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<CheckableItemsViewModel> List1 { get; set; }
        public ObservableCollection<CheckableItemsViewModel> List2 { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            List1 = new ObservableCollection<CheckableItemsViewModel>();
            List2 = new ObservableCollection<CheckableItemsViewModel>();

            LayoutRoot.DataContext = this;

            listBox1.AddHandler(RadDragAndDropManager.DropQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDropQuery));
            listBox1.AddHandler(RadDragAndDropManager.DragQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDragQuery));
            listBox1.AddHandler(RadDragAndDropManager.DropInfoEvent, new EventHandler<DragDropEventArgs>(OnDropInfo));
            listBox1.AddHandler(RadDragAndDropManager.DragInfoEvent, new EventHandler<DragDropEventArgs>(OnDragInfo));
            listBox2.AddHandler(RadDragAndDropManager.DropQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDropQuery));
            listBox2.AddHandler(RadDragAndDropManager.DragQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDragQuery));
            listBox2.AddHandler(RadDragAndDropManager.DropInfoEvent, new EventHandler<DragDropEventArgs>(OnDropInfo));
            listBox2.AddHandler(RadDragAndDropManager.DragInfoEvent, new EventHandler<DragDropEventArgs>(OnDragInfo));

            List1.Add(new CheckableItemsViewModel() { Name = "one", IsChecked = true });
            List1.Add(new CheckableItemsViewModel() { Name = "two", IsChecked = false });
            List1.Add(new CheckableItemsViewModel() { Name = "three", IsChecked = true });

            List2.Add(new CheckableItemsViewModel() { Name = "four", IsChecked = false });
            List2.Add(new CheckableItemsViewModel() { Name = "five", IsChecked = true });
            List2.Add(new CheckableItemsViewModel() { Name = "six", IsChecked = false });
        }

        private void OnDragQuery(object sender, DragDropQueryEventArgs e)
        {
            if (e.Options.Status == DragStatus.DragQuery)
            {
                var draggedItem = e.Options.Source;
                e.QueryResult = true;
                e.Handled = true;
                // Create Drag and Arrow Cue
                ContentControl dragCue = new ContentControl();
                dragCue.Content = draggedItem.DataContext;
                dragCue.ContentTemplate = this.Resources["DragCueTemplate"] as DataTemplate;
                e.Options.DragCue = dragCue;
                e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
                // Set the payload (this is the item that is currently dragged)
                e.Options.Payload = draggedItem.DataContext;
            }
            if (e.Options.Status == DragStatus.DropSourceQuery)
            {
                e.QueryResult = true;
                e.Handled = true;
            }
        }

        private void OnDragInfo(object sender, DragDropEventArgs e)
        {
            // if we are dropping on the appropriate listbox, then remove the item from the first listbox.
            if (e.Options.Status == DragStatus.DragComplete)
            {
                var itemsControl = e.Options.Source.FindItemsConrolParent() as ItemsControl;
                var itemsSource = itemsControl.ItemsSource as IList;
                itemsSource.Remove(e.Options.Payload);
            }
        }

        private void OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            var destination = e.Options.Destination as ListBox;
            if (e.Options.Status == DragStatus.DropDestinationQuery &&
                destination != null)
            {
                e.QueryResult = true;
                e.Handled = true;
            }
        }

        private void OnDropInfo(object sender, DragDropEventArgs e)
        {
            // if we are dropping on the appropriate listbox, then add the dragged item to it.
            var destination = e.Options.Destination as ItemsControl;
            if (e.Options.Status == DragStatus.DropComplete &&
                 destination != null)
            {
                (destination.ItemsSource as IList).Add(e.Options.Payload);
            }
        }
    }

    public class CheckableItemsViewModel
    {
        public bool IsChecked { get; set; }
        public string Name { get; set; }
    }

    public static class ControlExtensions
    {
        public static ItemsControl FindItemsConrolParent(this FrameworkElement target)
        {
            ItemsControl result = null;
            result = target.Parent as ItemsControl;
            if (result != null)
            {
                return result;
            }
            result = ItemsControl.ItemsControlFromItemContainer(target);
            if (result != null)
            {
                return result;
            }
            return FindVisualParent<ItemsControl>(target);
        }
        public static T FindVisualParent<T>(FrameworkElement target) where T : FrameworkElement
        {
            if (target == null)
            {
                return null;
            }
            var visParent = VisualTreeHelper.GetParent(target);
            var result = visParent as T;
            if (result != null)
            {
                return result;
            }
            return FindVisualParent<T>(visParent as FrameworkElement);
        }
    }
}

Here's the XAML:

<Window x:Class="RadDragDrop2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerikDragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
        Title="MainWindow" Width="320" Height="240">

    <Window.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Content="{Binding Name}" />
        </DataTemplate>

        <Style TargetType="Control" x:Key="DraggableItem">
            <Setter Property="telerikDragDrop:RadDragAndDropManager.AllowDrag" Value="True" />
            <Setter Property="telerikDragDrop:RadDragAndDropManager.AllowDrop" Value="True" />
        </Style>
        <Style TargetType="ListBox" x:Key="DraggableListBox">
            <Setter Property="telerikDragDrop:RadDragAndDropManager.AllowDrop" Value="True" />
            <Setter Property="ItemContainerStyle" Value="{StaticResource DraggableItem}" />
        </Style>

        <DataTemplate x:Key="DragCueTemplate">
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <ListBox x:Name="listBox1" Grid.Column="0" ItemsSource="{Binding Path=List1}" ItemTemplate="{StaticResource ItemTemplate}" Style="{StaticResource DraggableListBox}"/>
        <ListBox x:Name="listBox2" Grid.Column="1" ItemsSource="{Binding Path=List2}" ItemTemplate="{StaticResource ItemTemplate}" Style="{StaticResource DraggableListBox}"/>
    </Grid>
</Window>

[Maya]

Hello Eric,

Generally, my recommendation would be to work with DragDropManager instead. Please take a look at our documentation for further reference and let me know in case you need any further assistance.

Greetings,
Maya
the Telerik team

[Martin]

Excuse my interference, but

1. This is not the answer to the question, and ridiculous imho.
2. Please answer the question.
3. What's the exact difference between DnD-Manager / RadDnD


Thx Martin

[Martin]

Hint: Setting this on DraggableItem Stye in XAML works

<Setter Property="telerik:DragDropManager.AllowCapturedDrag"
        Value="True" />

Martin

[Eric]

@Maya

Why doesn't the example posted at http://www.telerik.com/help/wpf/raddraganddrop-between-listboxes.html work?  I'll look into DragDropManager but you haven't answered my question at all.

@Martin

I'm following your hint...

<Style TargetType="Control" x:Key="DraggableItem">
    <Setter Property="telerikDragDrop:RadDragAndDropManager.AllowDrag" Value="True" />
    <Setter Property="telerikDragDrop:RadDragAndDropManager.AllowDrop" Value="True" />
    <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
</Style>

(where xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" and xmlns:telerikDragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls")

but VS is telling me "Cannot resolve the Style Property 'AllowCapturedDrag'. Verify that the owning type is the Style's TargetType, or use Class.Property syntax to specify the Property".  It doesn't look like the telerik namespace contains telerik:DragDropManager.

[Martin]

Please go with:

<Style TargetType="Control"
       x:Key="DraggableItem">
    <Setter Property="telerik:RadDragAndDropManager.AllowDrag"
            Value="True" />
    <Setter Property="telerik:RadDragAndDropManager.AllowDrop"
            Value="True" />
    <Setter Property="telerik:DragDropManager.AllowCapturedDrag"
            Value="True" />
</Style>
<Style TargetType="ListBox"
       x:Key="DraggableListBox">
    <Setter Property="telerik:RadDragAndDropManager.AllowDrop"
            Value="True" />
    <Setter Property="ItemContainerStyle"
            Value="{StaticResource DraggableItem}" />
</Style>

where telerik is         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Good luck, Martin