ContextFlyout和SwipeControl冲突

Question

我有一个ListView，其ItemTemplate有一个SwipeControl和一个ContextFlyout。

但是，当我长按（我不只是用鼠标指着鼠标）PlaylistControlItem时，会显示LeftItems的SwipeControl而不是ContextFlyout。

我应该如何显示ContextFlyout？

下面是我的ListView：

<ListView
    SelectionMode="None">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="data:Music">
            <SwipeControl Loaded="SwipeControl_Loaded">
                <SwipeControl.LeftItems>
                    <SwipeItems Mode="Reveal">
                        <SwipeItem Text="Favorite">
                        </SwipeItem>
                    </SwipeItems>
                </SwipeControl.LeftItems>
                <SwipeControl.RightItems>
                    <SwipeItems Mode="Execute">
                        <SwipeItem Text="Remove">
                        </SwipeItem>
                    </SwipeItems>
                </SwipeControl.RightItems>
                <local:PlaylistControlItem DataContext="{x:Bind}" ShowAlbumText="{Binding ElementName=PlaylistController, Path=ShowAlbumText}">
                    <local:PlaylistControlItem.ContextFlyout>
                        <MenuFlyout Opening="OpenMusicMenuFlyout" />
                    </local:PlaylistControlItem.ContextFlyout>
                </local:PlaylistControlItem>
            </SwipeControl>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

更多源代码here

Answer 1

为不同的操作模式提供优化是一个好主意，但还需要遵循一些设计原则。

但是应注意，ContextFlyout和SwipeControl都有自己的内部操作逻辑，例如SwipeControl是手指轻扫，ContextFlyout是右键单击或长按。您无法修改。

您可以尝试将ContextFlyout绑定到更高级别，这可能会有所帮助。像这样：

<DataTemplate>
    <UserControl>
        <UserControl.ContextFlyout>
            <MenuFlyout Opening="OpenMusicMenuFlyout" />
        </UserControl.ContextFlyout>
        <SwipeControl>
            <SwipeControl.LeftItems>
                <SwipeItems Mode="Reveal">
                    <SwipeItem Text="Favorite">
                    </SwipeItem>
                </SwipeItems>
            </SwipeControl.LeftItems>
            <SwipeControl.RightItems>
                <SwipeItems Mode="Execute">
                    <SwipeItem Text="Remove">
                    </SwipeItem>
                </SwipeItems>
            </SwipeControl.RightItems>
            <local:PlaylistControlItem DataContext="{x:Bind}" ShowAlbumText="{Binding ElementName=PlaylistController, Path=ShowAlbumText}">
            </local:PlaylistControlItem>
        </SwipeControl>
    </UserControl>
</DataTemplate>

但是从用户体验的角度来看，我不建议混合使用ContextFlyout和SwipeControl。它们都是隐式操作，这意味着UI上没有明显的提示可告诉用户这样做。

您正在做的是一个播放列表。我的建议是在MoreButton的末尾添加PlaylistControlItem。这是一个明显的提示。单击后，您可以显示Flyout并使用它代替隐式的ContextFlyout。

如果您仍然打算长按来呼叫ContextFlyout，请考虑在UI上做出明确提示，告诉用户“可以这样做”。

此外，某些相同的程序处理逻辑可用于优化不同设备的体验。 UWP具有专门为此目的而设计的设计模式。您可以参考Commanding in Universal Windows Platform (UWP) apps using StandardUICommand, XamlUICommand, and ICommand优化代码并在各种设备之间建立良好的体验

---

更新

我测试了您的代码并检查了问题原因。设置ListView.CanDragItems属性时，将忽略AllowReorder属性。

尝试一下：

public bool AllowReorder
{
    get => SongsListView.CanReorderItems;
    set
    {
        SongsListView.CanReorderItems = SongsListView.AllowDrop = SongsListView.CanDragItems = SongsListView.CanDrag = value;
    }
}

最诚挚的问候。