RadListBox drag to auto scroll horizontally isn't 100%

4 posts, 1 answers
  1. Stephen
    Stephen avatar
    2 posts
    Member since:
    May 2014

    Posted 13 Aug 2014 Link to this post

    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.
  2. Answer
    Polya
    Admin
    Polya avatar
    199 posts

    Posted 15 Aug 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Stephen
    Stephen avatar
    2 posts
    Member since:
    May 2014

    Posted 19 Aug 2014 in reply to Polya Link to this post

    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.
  5. Polya
    Admin
    Polya avatar
    199 posts

    Posted 20 Aug 2014 Link to this post

    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.
     
Back to Top