Drop preview line in ListBox

[Mingxue]

Hi,

I need to implement DragDrop feature between listBoxes and also re-order within ListBox. I know there is one good sample from Demo, see attachment screenshot. But What I am missing here is the Drop preview line. I know in RadTreeView, there is the default DragDrop behavior comes with a good Drop preview line and API for me to enable/disable it. How can I do the same for ListBox?

I thought about using RadTreeView to take advantage of the default DragDrop behavior, but don't know how to make the UI layout to look like this one in ListBox. Please advise if there is any alternatives to get the layout like the one in the demo, and the drop preview line in RadTreeView.

Many thanks,

Mingxue

[Nasko]

Hello Mingxue,

You could use the built-in ListBoxDragVisualProvider in order to achieve the desired visualization and indication of the drag and drop operation. More detailed information you could find on the following link from our documentation:
http://docs.telerik.com/devtools/wpf/controls/radlistbox/drag-and-drop/features-dragdrop

Hope this helps.

Regards,
Nasko
Telerik by Progress

[Mingxue]

Below is how I am trying to follow the instructions from the docs:

        <Style x:Key="ListBoxDragDrop" TargetType="{x:Type telerik:RadListBoxItem}">
            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"></Setter>
        </Style>

Source RadListBox:

                        <telerik:RadListBox Name="RadParentTables" Grid.Row="1"
                                            ItemsSource="{Binding ParentTables}"
                                            ItemTemplate="{StaticResource TableTemplate}"
                                            ItemContainerStyle="{StaticResource ListBoxDragDrop}"
                                            AllowDrop="False">
                            <telerik:RadListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal"></WrapPanel>
                                </ItemsPanelTemplate>
                            </telerik:RadListBox.ItemsPanel>
                        </telerik:RadListBox>

Target RadListBox:

                <telerik:RadListBox Name="RadChildrenTables" Grid.Row="1"
                                    ItemsSource="{Binding ChildrenTables}"
                                    ItemTemplate="{StaticResource TableTemplate}"
                                    ItemContainerStyle="{StaticResource ListBoxDragDrop}"
                                    AllowDrop="True">
                    <telerik:RadListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal"></WrapPanel>
                        </ItemsPanelTemplate>
                    </telerik:RadListBox.ItemsPanel>
                    <telerik:RadListBox.DragDropBehavior>
                        <telerik:ListBoxDragDropBehavior />
                    </telerik:RadListBox.DragDropBehavior>
                    <telerik:RadListBox.DragVisualProvider>
                        <telerik:ScreenshotDragVisualProvider />
                    </telerik:RadListBox.DragVisualProvider>
                </telerik:RadListBox>

 

However, I ran into two issues.

1. On Drag over to target RadListBox, the drag visual icon is None. Is it expected or there is something that I am missing?

2. I am trying to get the drop location using follow code in .xaml.cs like TreeViewDragDropOptions

        private void EnableDragDrop(RadListBox container)
        {
            DragDropManager.AddDragOverHandler(container, OnDragOver, true);
            DragDropManager.AddDropHandler(container, OnDrop, true);
        }
        private void OnDrop(object sender, DragEventArgs eventArgs)
        {
        }
        private void OnDragOver(object sender, DragEventArgs eventArgs)
        {
            var _options = DragDropPayloadManager.GetDataFromObject(eventArgs.Data, TreeViewDragDropOptions.Key) as TreeViewDragDropOptions;
            if (_options == null)
            {
                eventArgs.Handled = true;
                return;
            }
        }

But since this is RadListBox, it always return null. Is there a way to know what's the drop position for ListBox?

[Nasko]

Hello Mingxue,

In order to achieve the desired drag and drop functionality between the two ListBoxes both should have set DragDropBehavior - by setting it to the first ListBox as well the observed drag visual icon should be visualize as expected.

As for your second question, one possible approach to achieve the desired is to create a custom ListBoxDragDropBehavior and override its Drop method. Inside it you could access the InsertIndex from the DragDropState. We have created a sample project that demonstrates that approach.

We have also noticed that you are using WrapPanel as an ItemsPanel for the ListBoxes. Because of that we suggest you also to check our SDK example that demonstrates how to create custom DropVisual for such ListBoxes with WrapPanel :
https://github.com/telerik/xaml-sdk/tree/master/ListBox/CustomDropCueWithWrapPanel

We hope this will help you.

Regards,
Nasko
Telerik by Progress

[Mingxue]

Many thanks, Nasko. All these information are very helpful.

A question regarding the sdk samples, is there a way to get a package or download these samples easier? By the link access, I don't see any way to download the whole project, and all I know for now is to copy paste code one by one, which makes it time consuming.

[Nasko]

Hello Mingxue,

You could use our SDK Sample Browser application to easily connect to GitHub and download our SDK repository. Please, check the following article that provides a detailed information about the Sample Browser application:
http://docs.telerik.com/devtools/wpf/sdk-samples-browser

Hope this will help you.

Regards,
Nasko
Telerik by Progress

[Mingxue]

That's awesome, thanks Nasko.

[Mingxue]

Sorry, Nasko, I have almost everything done except one issue now.

Learned from the sdk sample to customize drop visual inside wrap panel, the drop preview indicator works all way except to be added into the last spot. I have been able to run the sample sdk as well, (thanks by the way, I installed the sdk browser which made it so much easier), and it has same issue. And during debugging, the function of GetLocation() is not called when the item is dropped into the last spot, so I have no idea how the position is calculated or affect it. What should I do in this case?

[Mingxue]

Sorry, again, one more question...

I am overriding Drop() from ListBoxDragDropBehavior, but within DragDropState, I don't have access to the drop target control or source control, and so I don't have access to the DataContext either. In my project, I am using MVVM, and I need to deal with drop event so that target control's DataContext (View Model) will deal with the insert or re-order events. How can I accomplish this in MVVM structure?

[Nasko]

Hello Mingxue,

Currently, the logic for the calculation of the location of the last item of RadListBox is an internal one and could not be overridden - it is a specific logic that if it is changed could lead to unexpected behavior and because of that we don't provide it for overriding. Unfortunately, we could not suggest you any proper approach of achieving the desired behavior of RadListBox with that current implementation.

As for you second question about accessing the DataContext inside your custom DragDropBehavior you could create a public additional property inside the custom DragDropBehavior and set it with your DataContext - please, check the attached sample that demonstrates that approach.

I hope this will help you.

Regards,
Nasko
Telerik by Progress

[Mingxue]

Many thanks to your continuous help on this subject. I can see how you are assigning the ViewModel as dependency properties here. However, it seems to be assigned during xaml load time, not run-time. In most of projects, deep in the hierarchy tree, the ViewModel instance is only created run-time. Wondering if you could help with the run-time approach?

Best,

Mingxue

[Nasko]

Hi Mingxue,

In order to achieve the desired behavior in run-time you could create one additional class that derives from Freezable - Freezable objects can inherit the DataContext even when they’re not in the visual or logical tree. Inside it you could declare one additional dependency property that needs to be bound to the DataContext of the ListBox. By binding the property to of the ListBoxDragDropBehavior to the property of the Freezable object when the DataContext of the ListBox changes during run-time the property will be updated as expected. We have modified the sample project with the described above approach and you could run and evaluate it.

Hope this helps.

Regards,
Nasko
Telerik by Progress