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>

更多源代码在这里

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 上没有明显的提示告诉用户这样做。

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

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

此外，一些相同的程序处理逻辑可用于优化不同设备的体验。 UWP 具有专门为此目的构建的设计模式。 您可以参考使用 StandardUICommand、XamlUICommand 和 ICommand 的通用 Windows 平台 (UWP) 应用程序中的命令来优化您的代码并构建跨设备的出色体验

---

更新

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

尝试这个：

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

此致。