c# UWP TreeView 在 ItemDrag 上自动滚动

Question

我面临一个非常简单且众所周知的问题。我的 UWP 应用程序中有一个树视图，用户可以通过拖放重新排序项目，但有一些限制。 d&d 本身像预期的那样工作，但是现在，当我有一个很长的子项目列表要拖到树中非常高或非常低的地方时，我需要有一个自动滚动，就像每个用户从 windows 例如资源管理器，将光标向下移动到底部会激活滚动……但是……如何在 UWP 中实现它？有没有我遗漏的默认值属性？或者我怎样才能滚动到树中的特定节点？有大量关于 Winform 甚至 WPF 的信息，但我卡在 UWP 上，无法将 WPF 解决方案转换为我的应用程序。

有人对这个问题有任何提示吗？

编辑：这是我的 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>

Answer 1

c# UWP TreeView autoscroll on ItemDrag

TreeView 包含向下或向上拖动项目时的滚动行为。在检查您的 xaml 代码期间，ScrollViewer 覆盖了 TreeWiew，它会影响 TreeView 并阻止滚动行为。请尝试将其删除到其他区域。

c# UWP TreeView 在 ItemDrag 上自动滚动

c# UWP TreeView autoscroll on ItemDrag

c#

uwp

drag-and-drop

treeview

autoscroll