RadListBox drag to auto scroll horizontally isn't 100%

[Stephen]

With a default RadListBox, that displays all of its children vertically, then if you drag an item at the top or the bottom of the screen, the RadListBox will automatically scroll up or down.  

f you set the RadListBox to display horizontally, and drag to the right, then the RadListBox will auto scroll only if the right edge of the item is visible and can be dragged past.  If the element is too wide, then the scrolling to the right will stop.  If you drag to the left, then the auto scrolling will scroll all the way to the beginning of the items.

<Grid>
        <Grid.Resources>
            <Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">
                <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
            </Style>
        </Grid.Resources>
        <telerik:RadListBox ItemsSource="{Binding Documents}">
            <telerik:RadListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </telerik:RadListBox.ItemsPanel>
            <telerik:RadListBox.ItemTemplate>
                <DataTemplate>
                        <telerik:RadListBox ItemsSource="{Binding Pages}"  ItemContainerStyle="{StaticResource DraggableListBoxItem}">
                            <telerik:RadListBox.DragDropBehavior>
                                <telerik:ListBoxDragDropBehavior />
                            </telerik:RadListBox.DragDropBehavior>
                            <telerik:RadListBox.DragVisualProvider>
                                <telerik:ScreenshotDragVisualProvider />
                            </telerik:RadListBox.DragVisualProvider>
                            <telerik:RadListBox.ItemTemplate>
                                <DataTemplate>
                                    <Image Source="{Binding ImageData}"/>
                                </DataTemplate>
                            </telerik:RadListBox.ItemTemplate>
                        </telerik:RadListBox>
                </DataTemplate>
            </telerik:RadListBox.ItemTemplate>
        </telerik:RadListBox>
    </Grid>

Is there a way to get the scrolling to the right to work smoothly?

In the posted example, we want to allow the dragging of a Page from one Document into another Document, and the reordering of Pages within a document.

[Polya]

Hi Stephen,

StackPanel and VirtualizingStackPanel both implement IScrollInfo and natively support logical scrolling, but there are some differences in their concrete implementations. For instance StackPanel supports smooth scrolling in the direction opposite to its orientation while in the direction of its orientation it does not support it.
Case of VirtualizingStackPanel - when it hosted inside an ItemsControl( like the RadListBox ) it supports smooth scrolling irrespective of its orientation.
That said, if we use VirtualizingStackPanel in the ItemsPanel for our RadListBox the scrolling will be working and smooth as expected:

<telerik:RadListBox ItemsSource="{Binding Documents}">
    <telerik:RadListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </telerik:RadListBox.ItemsPanel>
    ...
</telerik:RadListBox>

Regarding the drag and drop of Pages between different Documents I suggest taking a look at our "Drag And Drop" example. You can find the examples here. There we demonstrate how to achieve drag and drop between different RadListBoxes.

Hopefully this helps and is suitable for your scenario.

Regards,
Polya
Telerik

 

 

[Stephen]

Thanks, that helped.

I noticed that if the last horizontal RadListBox being displayed is disabled (IsEnabled=False), then the smooth scrolling stops on that element as well.  It's not an issue in our case, but we found that interesting.

[Polya]

Hello Stephen,

I am glad to hear that the proposed solution is applicable for your scenario and resolved the issue.
Regarding the IsEnabled problem - my assumption is that when setting UIElement.IsEnabled = false ( in your case the RadlistBox ) this element stops participating in hit testing or focus. Therefore drag enter and over will seize to apply for this element which breaks the smooth scrolling.

Regards,
Polya
Telerik