将项目拖动到它时向 Navigationviewitem 添加显示

Posted 2023-04-13

【中文标题】将项目拖动到它时向 Navigationviewitem 添加显示

【英文标题】：Add reveal to Navigationviewitem when dragging an item over to it

【发布时间】：2020-11-16 12:30:45

【问题描述】：

如何在NavigationViewItem 上拖动项目时添加显示效果并在我离开时恢复正常，类似于显示效果的指针：

示例代码：

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

【问题讨论】：

你能分享你写的代码吗？如何实现 NavigationViewItem 拖放？

我已经添加了示例代码。

你想丢弃什么物品？

navigationviewitems 是文件夹，我想将 storageitems 放入其中。

@Nico Zhu - MSFT 在默认情况下添加此行为之前，我已经找到了一个可行的解决方案。

【参考方案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 会很好，但我还没有找到任何方法。