如何将ContextFlyout与ListView一起使用

本文关键字：一起 ListView ContextFlyout | 更新日期: 2023-09-27 18:00:15

我正试图将MenuFlyout添加到我的UWP应用程序中，以支持控制器。问题是，我不知道如何确定哪个ListViewItem实际触发了该事件。

编码背后

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.DataContext = new List<String>{ "Item 1", "Item 2", "Item 3"};
    }
    private void ChoiceA_Click(object sender, RoutedEventArgs e)
    {
        // What was clicked?
    }
}

XAML

<ListView ItemsSource="{Binding}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="ContextFlyout">
                    <Setter.Value>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="Choice A" Click="ChoiceA_Click" />
                            <MenuFlyoutItem Text="Choice B" />
                        </MenuFlyout>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

如何将ContextFlyout与ListView一起使用

我刚刚用本地机器和移动模拟器测试了你的代码，你的MenuFlyout只能通过右键点击ListView在PC上显示，那么这里有一个解决方案，你可以在ListView的RightTapped事件中找到OriginalSource，然后得到这个OriginalSource的DataContext，例如：

private FrameworkElement originalSource;
private void ChoiceA_Click(object sender, RoutedEventArgs e)
{
    var itemdatacontext = originalSource.DataContext;
}
private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    originalSource = (FrameworkElement)e.OriginalSource;
}

绑定到MenuFlyout的Opening事件。在事件处理程序中，sender本身就是MenuFlyout。在那里，您将找到指向ListViewItem的Target属性。

根据您的示例，XAML可能如下所示：

<ListView ItemsSource="{Binding}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="ContextFlyout">
                    <Setter.Value>
                        <MenuFlyout Opening="ListView_Opening">
                            <MenuFlyoutItem Text="Choice A" Click="ChoiceA_Click" />
                            <MenuFlyoutItem Text="Choice B" />
                        </MenuFlyout>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

你的代码是这样的：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.DataContext = new List<String>{ "Item 1", "Item 2", "Item 3"};
    }
    private string ListViewItemString;
    private void ChoiceA_Click(object sender, RoutedEventArgs e)
    {
        // What was clicked?
        var clickedItem = ListViewItemString;
    }
    private void ListView_Opening(object sender, object e)
    {
        ListViewItemString = ((sender as MenuFlyout)?.Target as ListViewItem)?.Content as string;
    }
}

试试这个解决方案。首先，您需要修改XAML，因为类ListViewItem没有ContextFlyout属性。您需要在ItemTemplate中使用FlyoutBase.AttachedFlyout。

<ListView ItemsSource="{Binding}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Tapped="TextBlock_Tapped">
                <FlyoutBase.AttachedFlyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="{Binding}" IsHitTestVisible="False" FontWeight="Bold" FontSize="24" />
                        <MenuFlyoutItem Text="Choice A" Click="MenuFlyoutItem_Click" />
                        <MenuFlyoutItem Text="Choice B" />
                    </MenuFlyout>
                </FlyoutBase.AttachedFlyout>
            </TextBlock>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这里的代码背后：

public sealed分部类MainPage:Page{公共主页（）{这InitializeComponent（）；这DataContext=新列表｛"项1"、"项2"、"项3"｝；}

    private async void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
    {
        var fe = sender as FrameworkElement;
        var value = fe.DataContext.ToString();
        await new MessageDialog(value).ShowAsync();
    }
    private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
    {
        var fe = sender as FrameworkElement;
        var menu = Flyout.GetAttachedFlyout(fe);
        menu.ShowAt(fe);
    }
}

您需要检测ListView中每个项目的ItemTapped事件，以便显示菜单。

相关文章：