Drag & Drop doesn't work with DataTemplate

2 posts, 0 answers
  1. Josef
    Josef avatar
    25 posts
    Member since:
    Nov 2010

    Posted 21 Mar 2012 Link to this post


    Hello Team,

    I've got a Listbox and a GridLayout. The GridLayout is hosted by an ItemsControl and styled by a DataTemplate. This works fine.
    Now the user should be able to drag an item from the listbox into the GridLayout. This works too, but only if the payload is being dropped on the TextBlock. Otherwise the DragStatus is always DropImpossible. It should be possible to drop the payload anywhere into the grid cell.

    I have studied the examples but I can't get it to work.
    Could please have a look at my code?


    <Page.Resources>
        <DataTemplate DataType="{x:Type local:ViewModelRasterElement}">
            <Border BorderBrush="#EFEFEF" BorderThickness="1"
                    telerikDragDrop:RadDragAndDropManager.AllowDrop="True"
                    telerikDragDrop:RadDragAndDropManager.AllowDrag="True">
                 
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
                               Text="{Binding Bezeichnung}"/>
            </Border>
        </DataTemplate>
     
        <DataTemplate x:Key="ApplicationDragTemplateTextbox">
            <TextBox Width="200" Height="20"/>
        </DataTemplate>
        <DataTemplate x:Key="ApplicationDragTemplateLabel">
            <Label Background="Yellow" Content="Ziehen Sie den in eine bliebige Zelle"/>
        </DataTemplate>
    </Page.Resources>


    <ItemsControl ItemsSource="{Binding RasterElemente}">
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Grid.Row" Value="{Binding GridRow}" />
                <Setter Property="Grid.Column" Value="{Binding GridColumn}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid ShowGridLines="false"
                      telerikDragDrop:RadDragAndDropManager.AllowDrop="True"
                      telerikDragDrop:RadDragAndDropManager.AllowDrag="True">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="130"/>
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

    And here the code behind:

    public ViewTest()
    {
        InitializeComponent();
     
        RadDragAndDropManager.AddDragQueryHandler(this, OnDragQuery);
        RadDragAndDropManager.AddDropQueryHandler(this, OnDropQuery);
        RadDragAndDropManager.AddDropInfoHandler(this, OnDropInfo);
    }
     
    private void OnDropInfo(object sender, DragDropEventArgs e)
    {
        Console.WriteLine(e.Options.Status);
        if (e.Options.Status == DragStatus.DropComplete)
        {
            string typ = e.Options.Source.GetType().ToString();
            switch (typ)
            {
                case "System.Windows.Controls.ListBox":
                    {
                        if (e.Options.Payload != null)
                        {
                            ViewModelRasterElement element = (ViewModelRasterElement)e.Options.Destination.DataContext;
                            element.Bezeichnung = e.Options.Payload.ToString();
                        }
                    }
                    break;
                default:
                    break;
            }
        }
        e.Handled = true;
    }
     
    void OnDropQuery(object sender, DragDropQueryEventArgs e)
    {
        Console.WriteLine(e.Options.Status);
        Console.WriteLine(e.Options.Destination.DataContext.GetType().ToString());
         
        if (e.Options.Destination.DataContext is ViewModelRasterElement &&
            e.Options.Status == DragStatus.DropDestinationQuery)
        {
            e.QueryResult = true;
        }
        e.Handled = true;
        Console.WriteLine(e.QueryResult);
    }
     
    protected virtual void OnDragQuery(object sender, DragDropQueryEventArgs e)
    {
        string typ = e.Options.Source.GetType().ToString();
        switch (typ)
        {
            case "System.Windows.Controls.ListBox":
                {
                    ListBox listbox = (ListBox)e.Options.Source;
                    if (listbox.SelectedItem != null)
                    {
                        if (e.Options.Status == DragStatus.DragQuery)
                        {
                            e.Options.Payload = listbox.SelectedItem;
                            ContentControl cue = new ContentControl();
                            cue.ContentTemplate = this.Resources["ApplicationDragTemplateLabel"] as DataTemplate;
                            cue.Content = listbox.SelectedItem;
                            e.Options.DragCue = cue;
                            e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
                        }
                    }
                }
     
                break;
            default:
                break;
        }
     
        e.Handled = true;
        e.QueryResult = true;
    }


    Thank you for your assistance.

    Best regards

    Josef
  2. Arthur
    Arthur avatar
    2 posts
    Member since:
    Jan 2012

    Posted 07 Jan 2013 Link to this post

    Hi,
    I struggle with similar issue myself.
    Have you make it to work? 
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top