DragDrop between listboxes example

6 posts, 0 answers
  1. Eric
    Eric avatar
    2 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    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>
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 13 Jan 2012 Link to this post

    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 >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Martin
    Martin avatar
    8 posts
    Member since:
    Nov 2011

    Posted 13 Jan 2012 Link to this post

    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
  5. Martin
    Martin avatar
    8 posts
    Member since:
    Nov 2011

    Posted 13 Jan 2012 Link to this post

    Hint: Setting this on DraggableItem Stye in XAML works

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


    Martin
  6. Eric
    Eric avatar
    2 posts
    Member since:
    Jan 2012

    Posted 13 Jan 2012 Link to this post

    @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.
  7. Martin
    Martin avatar
    8 posts
    Member since:
    Nov 2011

    Posted 16 Jan 2012 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready