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在ItemDrag 上自动滚动

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