This is a migrated thread and some comments may be shown as answers.

DragDrop between listboxes example

5 Answers 117 Views
DragAndDrop
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 12 Jan 2012, 04:52 PM
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: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>

5 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 13 Jan 2012, 06:46 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Martin
Top achievements
Rank 1
answered on 13 Jan 2012, 01:31 PM
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
0
Martin
Top achievements
Rank 1
answered on 13 Jan 2012, 01:46 PM
Hint: Setting this on DraggableItem Stye in XAML works

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


Martin
0
Eric
Top achievements
Rank 1
answered on 13 Jan 2012, 05:09 PM
@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.
0
Martin
Top achievements
Rank 1
answered on 16 Jan 2012, 09:11 AM
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
Tags
DragAndDrop
Asked by
Eric
Top achievements
Rank 1
Answers by
Maya
Telerik team
Martin
Top achievements
Rank 1
Eric
Top achievements
Rank 1
Share this question
or