Search code examples
c#uwpdrag-and-droptreeviewautoscroll

c# UWP TreeView autoscroll on ItemDrag

I'm, facing a very simple and well known problem. I have a treeview in my UWP application, a User can reorder items by drag&drop with a few restrictions. The d&d itself works like expected, but now, when i have a very long list of sub-items to drag to a place very high or low in the tree, i need to have an autoscroll like every user knows from the windows explorer for example, moving the cursor down to bottom activates a scroll... but... how to implement that in UWP? Is there any default property I'm missing? Or how can i even scroll to a specific node in the tree? There are tons of info for Winform or even WPF, but i'm stuck on UWP and was unable to convert a WPF solution to my app.

Does anybody have any hint on that problem?

Edit: here is a shortened version of my XAML:

<Page
    x:Class="CookBook.Views.EditCategoryPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:templateSelectors="using:CookBook.TemplateSelectors"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:models="using:CookBook.Core.Models.Entities"
    xmlns:enums="using:CookBook.Core.Models"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    xmlns:behaviors="using:CookBook.Behaviors"
    xmlns:helpers="using:CookBook.Helpers"
    xmlns:interfaces="using:CookBook.Core.Models.Entities.Interfaces"
    xmlns:converters="using:CookBook.Helpers.Converter" xmlns:viewcontrols="using:CookBook.Views.ViewControls" xmlns:treeviewdata="using:CookBook.Models.TreeViewData"
    behaviors:NavigationViewHeaderBehavior.HeaderMode="Always"
    NavigationCacheMode="Disabled"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">


    <Grid>
        <Grid>
            <Grid x:Name="mainGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="treeViewColumn" Width="350"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState>
                            <VisualState.StateTriggers>
                                <!--641 is the default CompactModeThresholdWidth in NavigationView -->
                                <AdaptiveTrigger MinWindowWidth="641" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="header.Margin" Value="0,0,0,0" />
                                <Setter Target="treeViewColumn.Width" Value="350" />
                                <Setter Target="treeViewColumn.MaxWidth" Value="500" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid 
            Background="{ThemeResource SystemChromeMediumLowColor}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid
                Margin="80,0,0,0"
                x:Name="header">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock
                    x:Uid="TreeViewTitle"
                    Margin="{StaticResource SmallLeftMargin}"
                    Style="{StaticResource ListTitleStyle}"
                    VerticalAlignment="Center" />
                        <!--Fold all-->
                        <Button
                    Grid.Column="1"
                    x:Uid="TreeView_CollapseAllButton"
                    Content="&#xF165;"
                    FontSize="14"
                    Padding="{StaticResource SmallLeftRightMargin}"
                    VerticalAlignment="Stretch"
                    VerticalContentAlignment="Center"
                    FontFamily="Segoe MDL2 Assets"
                    Background="Transparent"
                    Click="OnCollapseAll" />
                        <!--expand all-->
                        <Button
                    Grid.Column="2"
                    x:Uid="TreeView_ExpandAllButton"
                    FontSize="14"
                    Padding="{StaticResource SmallLeftRightMargin}"
                    VerticalAlignment="Stretch"
                    VerticalContentAlignment="Center"
                    FontFamily="Segoe MDL2 Assets"
                    Background="Transparent"
                    Click="OnExpandAll" >
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEE47;"/>
                        </Button>
                        <!--Reorder Mode-->
                        <ToggleButton
                    Grid.Column="3"
                    Content="&#xE8FD;"
                    FontSize="14"
                    Padding="{StaticResource SmallLeftRightMargin}"
                    VerticalAlignment="Stretch"
                    VerticalContentAlignment="Center"
                    FontFamily="Segoe MDL2 Assets"
                    Background="Transparent"
                    IsThreeState="False"
                    RightTapped="ReorderModeRightClicked"
                    IsChecked="{x:Bind ReorderMode, Mode=TwoWay}" />
                        <!--Add-->
                        <Button
                    Grid.Column="4"
                    x:Name="foMenu"
                    x:Uid="Flyoutbutton"
                    Content="&#xE710;"
                    FontSize="14"
                    Padding="{StaticResource SmallLeftRightMargin}"
                    VerticalAlignment="Stretch"
                    VerticalContentAlignment="Center"
                    FontFamily="Segoe MDL2 Assets"
                    Background="Transparent">
                            <Button.Flyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem Text="Neue Kategorie" Click="AddCategory" ></MenuFlyoutItem>
                                    <MenuFlyoutItem x:Name="btnCatIn" Text="{x:Bind CategoryInText,Mode=OneWay}" Click="AddCategory" />
                                    <MenuFlyoutSeparator />
                                    <MenuFlyoutItem x:Name="btnReceipeIn" Text="{x:Bind ReceipeInText,Mode=OneWay}" Click="AddReceipe" />
                                    <MenuFlyoutSeparator />
                                    <MenuFlyoutItem x:Name="btnImportFromCK" Text="Import aus Chefkoch" Click="BtnAddReceipeFromCK" />
                                    <MenuFlyoutSeparator />
                                    <MenuFlyoutItem x:Name="btnCBCut" Text="Ausschneiden" Click="CBCut" />
                                    <!--<MenuFlyoutItem  Text="Aus der Zwischenablage einfügen" Click="MoveReceipe" />-->
                                    <MenuFlyoutSubItem x:Name="btnCBAdd" Text="Einträge einfügen">
                                        
                                    </MenuFlyoutSubItem>
                                </MenuFlyout>
                            </Button.Flyout>
                        </Button>
                    </Grid>

                    <winui:TreeView
                BorderBrush="Beige"
                BorderThickness="1"
                x:Name="treeView"
                Grid.Row="1"
                SelectionMode="Single"
                
                CanBeScrollAnchor="True"
                        
                ItemsSource="{x:Bind CategoryItems,Mode=TwoWay}"
                ItemInvoked="OnItemInvoked"
                ItemTemplateSelector="{StaticResource TreeViewTemplateSelector}"
                
                
                DragItemsStarting="TreeView_DragItemsStarting"
                DragItemsCompleted="TreeView_DragItemsCompleted"
                
                Width="auto">
                        <winui:TreeView.ItemContainerStyle>
                            <Style TargetType="winui:TreeViewItem">
                                <Setter Property="VerticalAlignment" Value="Stretch" />
                                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                            </Style>
                        </winui:TreeView.ItemContainerStyle>
                    </winui:TreeView>
                </Grid>

                <ScrollViewer
            Grid.Column="1" >
                    <ContentControl
                Content="{x:Bind SelectedItem, Mode=OneWay}"
                ContentTemplateSelector="{StaticResource ContentTemplateSelector}"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                HorizontalContentAlignment="Stretch" />
                </ScrollViewer>

                <controls:GridSplitter
            Grid.Column="1"
            GripperCursor="Default"
            HorizontalAlignment="Left"
            ResizeDirection="Auto"
            ResizeBehavior="BasedOnAlignment"
            CursorBehavior="ChangeOnSplitterHover"
            Width="16" />
            </Grid>

            <ScrollViewer x:Name="sViewerSingle" Visibility="Collapsed">
                <ContentControl
                Content="{x:Bind SelectedItem, Mode=TwoWay}"
                ContentTemplateSelector="{StaticResource ContentTemplateSelector}"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                HorizontalContentAlignment="Stretch" />
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>
Solution

  • c# UWP TreeView autoscroll on ItemDrag

    TreeView contains scrolling behavior when you drag item trending down or up. During checking your xaml code, The ScrollViewer overlays the TreeWiew, and it will effect TreeView and prevents the scroll behaviour. Please try to remove it to other area.