c# - UWP:将 ListView ItemTemplate MenuFlyOut 事件绑定(bind)到 ViewModel

Question

我有一个现有的 UWP 应用程序来管理网站和帐户的密码，但是当我大约 3 年前编写它时，我不太了解 MVVM，因此所有事件处理程序都在 View 的代码中，现在我正在尝试解决这个问题并通过将此代码移动到 ViewModel 使其更符合 MVVM。

我拥有的现有功能之一是每个 ListView 项目上的弹出菜单，因此用户可以编辑/删除条目(并执行其他几个功能)，但是因为我正在为 ListView ItemTemplate 数据模板定义 DataType，所以现在不会在我的 Viewmodel 中识别到 Click 事件处理程序的绑定(bind)。

正如您所期望的，我在命名空间和页面数据上下文中都定义了我的 ViewModel，如下所示:

    <Page ....
      xmlns:vm="using:PassPort.ViewModels"
      ...>

    <Page.DataContext>
        <vm:MainViewModel/>
    </Page.DataContext>

这是我的 ListView，它是 ItemTemplate 和 DataTemplate。在 FlyOut 中的每个 MenuFlyoutItem 中，我试图告诉它在我的 ViewModel 中使用处理程序，但它无法解析 'vm' - 它显示波浪线并显示“在类型 'Account' 中找不到属性 'vm'” .

    </ListView Name="lvwAccounts"  
               ItemsSource="{x:Bind vm.AccountsView}" 
               .....>
       <ListView.ItemTemplate>
        <DataTemplate x:DataType="model:Account">
            <Grid MinHeight="36" HorizontalAlignment="Left" RightTapped="AccountsList_RightTapped">

                <FlyoutBase.AttachedFlyout>
                    <MenuFlyout Placement="Bottom">
                        <MenuFlyoutItem x:Name="OpenWebsiteButton" Text="Open Website" Click="{x:Bind vm.FlyoutOpenWebsiteButton_Click}"/>
                        <MenuFlyoutItem x:Name="EditButton" Text="Edit Account" Click="{x:Bind vm.FlyoutEditButton_Click}"/>
                        <MenuFlyoutItem x:Name="AddButton" Text="Add Account" Click="{x:Bind vm. FlyoutAddButton_Click}"/>
                        <MenuFlyoutItem x:Name="DeleteButton" Text="Delete Account" Click="{x:Bind vm.FlyoutDeleteButton_Click}"/>
                    </MenuFlyout>
                </FlyoutBase.AttachedFlyout>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Bind AccountName}"  Foreground="{StaticResource Light}"
                           VerticalAlignment="Center" HorizontalAlignment="Stretch"/>

                <TextBlock Grid.Row="0" Grid.Column="1" Text="{x:Bind Category}"  Foreground="{StaticResource Light}"
                           VerticalAlignment="Center" HorizontalAlignment="Stretch" TextWrapping="Wrap" />

                <TextBlock Grid.Row="0" Grid.Column="2" Text="{x:Bind UserID}" Foreground="{StaticResource Light}"
                           VerticalAlignment="Center" HorizontalAlignment="Left"/>

                <TextBlock Grid.Row="0" Grid.Column="3" Text="{x:Bind Password}" Foreground="{StaticResource Light}"
                           VerticalAlignment="Center" HorizontalAlignment="Left" />

                <TextBlock Grid.Row="0" Grid.Column="4" Text="{x:Bind PasswordHint}" Foreground="{StaticResource Light}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

代码“vm”中的其他任何地方都可以毫无问题地解决，因此似乎由于 DataType 它无法/不会解析我的 ViewModel 引用。

我也尝试过使用 'Click="{Binding vm.[event handler]"} 但它没有区别 - 所以有人知道我该如何解决这个问题吗？

Answer 1

在 DataTemplate and x:Bind微软说:

Inside a DataTemplate (whether used as an item template, a content template, or a header template), the value of Path is not interpreted in the context of the page, but in the context of the data object being templated. So that its bindings can be validated (and efficient code generated for them) at compile-time, a DataTemplate needs to declare the type of its data object using x:DataType.

要在 DataTemplate 中绑定(bind) ViewModel，您需要使用 binding而不是 x:bind喜欢这段代码。

<ListView Name="lvwAccounts"  
          ItemsSource="{x:Bind vm.AccountsView}" >
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="model:Account">
                <FlyoutBase.AttachedFlyout>
                    <MenuFlyout Placement="Bottom">
                        <MenuFlyoutItem x:Name="OpenWebsiteButton" Text="Open Website" Command="{Binding ElementName=lvwAccounts,Path=DataContext.FlyoutOpenWebsite}"/>

                    </MenuFlyout>
                </FlyoutBase.AttachedFlyout>
        </DataTemplate>
    </ListView.ItemTemplate>      
</ListView>

但是 binding在 UWP 中无法绑定(bind)方法和 binding只能绑定(bind)Command。您应该将方法更改为命令。

我在 MenuFlyoutItem 中找不到 Command 属性，我们可以使用 Behavior 将 UI 事件绑定(bind)到 ViewModel 中的命令，请参阅: WPF Binding UI events to commands in ViewModel

见: https://stackoverflow.com/a/40774956/6116637

Why can't I use {x:Bind {RelativeSource Self}} in a data template?