This is a migrated thread and some comments may be shown as answers.

RadListBox drag to auto scroll horizontally isn't 100%

3 Answers 129 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 13 Aug 2014, 07:31 PM
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.

3 Answers, 1 is accepted

Sort by
0
Accepted
Polya
Telerik team
answered on 15 Aug 2014, 04:03 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Stephen
Top achievements
Rank 1
answered on 19 Aug 2014, 02:49 PM
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.
0
Polya
Telerik team
answered on 20 Aug 2014, 01:22 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
ListBox
Asked by
Stephen
Top achievements
Rank 1
Answers by
Polya
Telerik team
Stephen
Top achievements
Rank 1
Share this question
or