Can't make Drag and drop example work

2 posts, 0 answers
  1. Sergio
    Sergio avatar
    1 posts
    Member since:
    Sep 2011

    Posted 07 Oct 2011 Link to this post

    Hi, I've tried to reproduce the "Getting Started" example of DragAndDrop but I can't make it work (drag event not fired).

    Here my XAML code:

    <UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="WpfApplication5.GettingStarted"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 mc:Ignorable="d"
                 d:DesignHeight="300" d:DesignWidth="300">
        <UserControl.Resources>
             
            <DataTemplate x:Key="ApplicationDragTemplate">
     
                <Image Source="{Binding IconPath}"
                   Stretch="None"
                   VerticalAlignment="Top" />
            </DataTemplate>
            <Style TargetType="ListBoxItem"
               x:Key="draggableItemStyle">
                <Setter Property="HorizontalContentAlignment"
                   Value="Stretch" />
                <Setter Property="telerik:RadDragAndDropManager.AllowDrag"
                   Value="True" />
     
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot"
           Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="150" />
                <ColumnDefinition Width="200" />
            </Grid.ColumnDefinitions>
            <ListBox x:Name="allApplicationsBox"
                   telerik:RadDragAndDropManager.AllowDrop="True"
                   ItemContainerStyle="{StaticResource draggableItemStyle}">
                 
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="150">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Image Grid.Row="0"
                               HorizontalAlignment="Center"
                               Source="{Binding IconPath}"
                               Width="32"
                               Height="32"
                               Margin="0 0 5 0" />
                            <TextBlock Grid.Row="1"
                                   Text="{Binding Name}"
                                   FontWeight="Bold"
                                   HorizontalAlignment="Center" />
                            <TextBlock Text="{Binding Author}"
                                   Grid.Row="2"
                                   HorizontalAlignment="Center" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <!--My Applications-->
            <ListBox x:Name="myApplicationsBox"
                   telerik:RadDragAndDropManager.AllowDrop="True"
                   ItemContainerStyle="{StaticResource draggableItemStyle}"
                   Grid.Column="2">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel VerticalAlignment="Stretch"
                               HorizontalAlignment="Stretch">
                            <Image Source="{Binding IconPath}"
                               Margin="0 0 3 0"
                               HorizontalAlignment="Center" />
                            <TextBlock Text="{Binding Name}"
                                   HorizontalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <telerik:RadUniformGrid Columns="3"
                                           HorizontalAlignment="Left"
                                           VerticalAlignment="Top" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </Grid>
    </UserControl>

    And here my C# code:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    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;
    using System.Collections.ObjectModel;
    using Telerik.Windows.Controls.DragDrop;
    using Telerik.Windows.Controls;
     
    namespace WpfApplication5
    {
     
        public class ApplicationInfo
        {
            public ApplicationInfo(string iconPath, string name, string author)
            {
                this.IconPath = iconPath;
                this.Name = name;
                this.Author = author;
            }
            public String IconPath
            {
                get;
                set;
            }
            public String Name
            {
                get;
                set;
            }
            public String Author
            {
                get;
                set;
            }
        }
     
        public partial class GettingStarted : UserControl
        {
            public static ObservableCollection<ApplicationInfo> GenerateApplicationInfos()
            {
                ObservableCollection<ApplicationInfo> data = new ObservableCollection<ApplicationInfo>();
                for (int i = 1; i <= 5; i++)
                {
                    data.Add(new ApplicationInfo("Images/nature" + i + ".jpg", "Nome" + i, "Autore" + 1));
                }
                return data;
            }
            private ObservableCollection<ApplicationInfo> allApplications = GenerateApplicationInfos();
            private ObservableCollection<ApplicationInfo> myApplications = new ObservableCollection<ApplicationInfo>();
            public GettingStarted()
            {
                InitializeComponent();
                allApplicationsBox.ItemsSource = allApplications;
                myApplicationsBox.ItemsSource = myApplications;
     
     
                RadDragAndDropManager.AddDragQueryHandler(this, OnDragQuery);
                RadDragAndDropManager.AddDragInfoHandler(this, OnDragInfo);
                RadDragAndDropManager.AddDropQueryHandler(this, OnDropQuery);
                RadDragAndDropManager.AddDropInfoHandler(this, OnDropInfo);
            }
            // OnDragQuery event handler
            private void OnDragQuery(object sender, DragDropQueryEventArgs e)
            {
                ListBoxItem listBoxItem = e.Options.Source as ListBoxItem;
                ListBox box = ItemsControl.ItemsControlFromItemContainer(listBoxItem) as ListBox;
                if (e.Options.Status == DragStatus.DragQuery && box != null)
                {
                    e.Options.Payload = box.SelectedItem;
                    ContentControl cue = new ContentControl();
                    cue.ContentTemplate = this.Resources["ApplicationDragTemplate"] as DataTemplate;
                    cue.Content = box.SelectedItem;
                    e.Options.DragCue = cue;
                    e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
                }
                e.QueryResult = true;
            }
            // OnDropQuery event handler
            private void OnDropQuery(object sender, DragDropQueryEventArgs e)
            {
                ItemsControl box = e.Options.Destination as ItemsControl;
                IList<ApplicationInfo> itemsSource = box.ItemsSource as IList<ApplicationInfo>;
                ApplicationInfo payload = e.Options.Payload as ApplicationInfo;
                e.QueryResult = payload != null && !itemsSource.Contains(payload);
            }
            // OnDropInfo event handler
            private void OnDropInfo(object sender, DragDropEventArgs e)
            {
                ItemsControl box = e.Options.Destination as ItemsControl;
                IList<ApplicationInfo> itemsSource = box.ItemsSource as IList<ApplicationInfo>;
                ApplicationInfo payload = e.Options.Payload as ApplicationInfo;
                if (e.Options.Status == DragStatus.DropComplete)
                    if (!itemsSource.Contains(payload))
                        itemsSource.Add(payload);
            }
            // OnDragInfo event handler
            private void OnDragInfo(object sender, DragDropEventArgs e)
            {
                ListBoxItem listBoxItem = e.Options.Source as ListBoxItem;
                ListBox box = ItemsControl.ItemsControlFromItemContainer(listBoxItem) as ListBox;
                IList<ApplicationInfo> itemsSource = box.ItemsSource as IList<ApplicationInfo>;
                ApplicationInfo payload = e.Options.Payload as ApplicationInfo;
                if (e.Options.Status == DragStatus.DragComplete)
                {
                    if (payload != null && itemsSource.Contains(payload))
                    {
                        itemsSource.Remove(payload);
                    }
                }
            }
        }
    }


     Can anyone help me?

    Thank You
    Sergio
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 07 Oct 2011 Link to this post

    Hi Sergio,

    Please refer to our demos for a reference (the link is for Silverlight, but you have exactly the same example in your local installation).
    Still, if you need any further reference, do not hesitate to get back to us. 

    All the best,
    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
Back to Top