ListBox Customize DropVisual

[Tom Allard]

Hi,

I'm trying to create a grid that a user can use to reorder pictures.

To do that i've setup a RadListBox as follows:

<telerik:RadListBox
        Name="rlb"
           ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
           <telerik:RadListBox.DragVisualProvider>
               <telerik:ScreenshotDragVisualProvider />
           </telerik:RadListBox.DragVisualProvider>
           <telerik:RadListBox.DragDropBehavior>
               <telerik:ListBoxDragDropBehavior AllowReorder="True" />
           </telerik:RadListBox.DragDropBehavior>
           <telerik:RadListBox.ItemsPanel>
               <ItemsPanelTemplate>
                   <telerik:RadWrapPanel Orientation="Horizontal"/>
               </ItemsPanelTemplate>
           </telerik:RadListBox.ItemsPanel>
               <telerik:RadListBox.ItemTemplate>
               <DataTemplate>
                   <Border BorderThickness="2" BorderBrush="Red">
                       <Grid>
                           <Grid.RowDefinitions>
                               <RowDefinition Height="Auto"/>
                               <RowDefinition Height="Auto"/>
                           </Grid.RowDefinitions>
                           <TextBlock Text="{Binding Id}" Grid.Row="0"/>
                           <TextBlock Text="{Binding Value}" Grid.Row="1"/>
                       </Grid>
                   </Border>
               </DataTemplate>
           </telerik:RadListBox.ItemTemplate>
       </telerik:RadListBox>

With this i can reorder items in the listbox using drag n drop. However the dropvisual is not working as i would expect since it simply draws a horizontal line from left to right.

I tried creating a custom DropVisualProvider subclassing LinearDropVisualProvider and registering it with the listbox

    rlb.DropVisualProvider = new MyDropVisualProvider();

However none of the methods i override from LinearDropVisual are being called. I'm not sure what i am doing wrong at this point. What is the recommended way of specifying a custom IDropVisulaProvider?

[George]

Hello Tom,

I would suggest setting a custom DropVisualProvider for the RadListBox control and change the coordinates where the drop visual will be placed. For example, create a CustomLinearDropVisualProvider that inherits the LinearDropVisualProvider and override the GetLocation method:

public class CustomLinearDropVisualProvider : LinearDropVisualProvider
{
    public override Point GetLocation(Telerik.Windows.Controls.RadListBoxItem container, Panel panel)
    {
        return container.TransformToVisual(panel).Transform(new Point());
    }
}

All you have to do now is to set the CustomLinearDropVisualProvider for DropVisualProvider:

<telerik:RadListBox ....>
.....
<telerik:RadListBox.DropVisualProvider>
   <local:CustomLinearDropVisualProvider />
</telerik:RadListBox.DropVisualProvider>
...
</telerik:RadListBox>

and create a custom style for the LinearDropVisual. The default template is with stretch Vertical/Horizontal alignments and it doesn't look nice on wrap panel.

Please, refer to the attached project for more information and let me know if this helps.

Regards,
George
the Telerik team

[Tom Allard]

Thanks! That is exactly what i needed!

[Richard]

I have tried the approach you suggested of creating a custom LinearDropVisualProvider. The problem I am having is that this is not
providing a good drop visual for all cases of drop location. The problem is easier to see in the example project if you set the orientation
of the wrap panel to vertical and give both the wrap panel and the listbox a specific height, for example 300.

<telerik:RadListBox ItemsSource="{Binding DataList}" BorderBrush="Black" BorderThickness="1" Margin="10" 
                       SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                    Height="300">
...
    <telerik:RadListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:RadWrapPanel Orientation="Vertical" Height="300"/>
        </ItemsPanelTemplate>
    </telerik:RadListBox.ItemsPanel>
...
</telerik:RadListBox>

If the drop location is over a listbox item, the drop visual is drawn in an appropriate location. For the case where the
drop location is simply inside of the listbox but not over an item, the drop visual is placed at the appropriate location
in terms of the Y-coordinate, but gives it an X-coordinate of 0. This places the drop visual in an awkward location in
the first column of listbox items. And the CustomLinearDropVisualProvider.GetLocation() method does not get hit in 
this case.

After having looked through examples online (and through the code itself), I haven't seen seen a good way to solve this
problem. What do you suggest for handling this case?

[Vladi]

Hi Richard,

We are not sure we understand you correctly.

Do you mean that the custom cue is not displayed when you drag and item out of the scope of the other Items in the ListBox? By default when an Item is drag out of the scope of the other items the drop cue is not displayed and if the item is drop it is placed as a last item in the control.

It would be very helpful if you could share with us some screenshots or a short video showing the exact scenario and desired behavior.

All the best,
Vladi
the Telerik team

[Richard]

The custom cue (drop visual) may not be displayed by default, but in the example project previously given in this thread by George, a drop visual is displayed for all drop locations inside of the ListBox. And this is the desired behavior in our case -- to show a drop visual anytime the drop is going to be allowed.

As you can see in the attached screenshots,
1. CorrectDropVisual - shows the good behavior when inside the scope of another ListBoxItem.
2. IncorrectDropVisualForDropAtEndOfList - shows what happens in the example project (with the minor orientation and height changes described in my previous post) when you are inside of the ListBox but outside of an ListBoxItem's scope. The Y-coordinate calculated is OK, but the X-coordinate for the drop visual is simply set to 0.
3. DesiredDropVisualForDropAtEndOfList - shows the previous shot with the DropVisual in roughly the desired location at the end of the list.

[Vladi]

Hi Richard,

Thank you for posting the additional information. We were able to reproduce the issue on our side and it seems that this is a bug in the control.

We logged the issue in our Public Issue Tracker System where you can track its status.

I updated your Telerik points for bringing this to our attention.

Regards,
Vladi
the Telerik team

[Richard]

Thank you for your help.

I wanted to clarify that I added on to this thread because it was almost exactly the question I needed to ask, but I am using WPF, not Silverlight. Will the issue you logged serve to fix the bug for your WPF product as well?

[Vladi]

Hello Richard,

Yes the issue is logged for both Silverlight and WPF platforms.

It seems that the PITS issue was not updated correctly and we will update it to list both platforms.

Kind regards,
Vladi
the Telerik team

[Alexander]

Hello. What about the issue, described by Richard? In WPF it is still reproduced.

[Martin Ivanov]

Hello Alexander,

I've tested the reported scenario but I couldn't reproduce the issue. Can you please check the attached project and let me know if I am missing something?

Regards,
Martin Ivanov
Progress Telerik

[Alexander]

Hi, Martin.
You can see example here: "SDK Samples Browser" - "Custom Drop Cue With Wrap Panel". When cursor to end of the list of out of range of items, then position cursor move to the top of ListBox.
Like describe here

[Martin Ivanov]

Hi Alexander,

Thank you for the provided information. I was able to reproduce the reported behavior using the SDK example. It seems that the default LinearDropVisualProvider is not very suitable when the wrap panel is used. You can partially achieve the Richard's requirement by overriding the GetLocation() method of the LinearDropVisualProvider, but this will work only if you drag/drop on an item. When you drag outside of the area where the items are drawn some internal logic of the provider kicks-in and the GetLocation() method is never called. To make the drop visual working also in the case where the mouse is not under an item you can dig up the ContentPresenter that holds the visual and manually position it. I've updated the SDK example to show this approach. Can you please check it out and let me know how it goes?

Regards,
Martin Ivanov
Progress Telerik

[Alexander]

Thank you. This is what I need.