将项目拖到 Navigationviewitem 上时添加显示

Question

如何在 NavigationViewItem 上添加显示效果，当我将项目拖动到它上面时，如何在我离开时恢复正常，类似于指针悬停在显示效果上：

示例代码：

<muxc:NavigationViewItem
   BorderThickness="0.8"
   Content="Folder"
   Tag="FolderPath"
   AllowDrop="True"
   DragOver="NavigationViewItem_DragOver"
   Drop="NavigationViewItem_Drop"/>

Answer 1

到目前为止，这是我想出的：

修改default template available in WInUI repository，在VisualStateManager中添加如下VisualStateGroup：

<VisualStateGroup x:Name="DragStates">
    <VisualState x:Name="DragEnter">
        <VisualState.Setters>
            <contract4Present:Setter Target="NVIRootGrid.(media:RevealBrush.State)" Value="PointerOver" />
            <Setter Target="NVIRootGrid.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
            <Setter Target="NVIRootGrid.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}" />
            <Setter Target="NavigationViewItemPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="DragLeave" />
    <VisualState x:Name="Drop" />
</VisualStateGroup>

修改NavigationViewItem以处理DragEnter和DragLeave事件：

<muxc:NavigationViewItem
   BorderThickness="0.8"
   Content="Folder"
   Tag="FolderPath"
   AllowDrop="True"
   DragEnter="NavigationViewItem_DragEnter"
   DragLeave="NavigationViewItem_DragLeave"
   DragOver="NavigationViewItem_DragOver"
   Drop="NavigationViewItem_Drop"/>

修改后面代码中的VisualState：

    private void NavigationViewItem_DragEnter(object sender, DragEventArgs e)
    {
        VisualStateManager.GoToState(sender as Microsoft.UI.Xaml.Controls.NavigationViewItem, "DragEnter", false);
    }

    private void NavigationViewItem_DragLeave(object sender, DragEventArgs e)
    {
        VisualStateManager.GoToState(sender as Microsoft.UI.Xaml.Controls.NavigationViewItem, "DragLeave", false);
    }

    private async void NavigationViewItem_Drop(object sender, DragEventArgs e)
    {
        VisualStateManager.GoToState(sender as Microsoft.UI.Xaml.Controls.NavigationViewItem, "Drop", false);

        // Handle drop
    }

从 xaml 本身更改 VisualState 会很好，但我还没有找到任何方法。

将项目拖到 Navigationviewitem 上时添加显示

Add reveal to Navigationviewitem when dragging an item over to it

c#

windows

xaml

uwp

windows-10-universal

示例代码：