UWP 中的绑定命令 [英] Binding command in UWP

问题描述

我的 App.xaml 中有一个 MenuFlyout:

I have a MenuFlyout in my App.xaml:

<Application.Resources>
    <MenuFlyout x:Key="LessonFlyout">
        <MenuFlyoutItem Text="Edit"/>
        <MenuFlyoutItem Text="Delete"/>
    </MenuFlyout>
</Application.Resources>

我想给 MenuFlyoutItem 点击事件，但编译器说我不能这样做.但是我需要一个点击事件，所以我搜索并发现我可以将命令绑定到 MenuFlyoutItem.

And I wanted to give MenuFlyoutItem click event but the compiler says I can't do this. But I need a click event so I searched and found out that I can bind command to MenuFlyoutItem.

我的 MenuFlyout 将附加到不同页面中的不同对象.例如:

My MenuFlyout will be attached to a different objects in different pages. For example:

    StackPanel thisSender = sender as StackPanel;
    FlyoutBase.SetAttachedFlyout(thisSender, Application.Current.Resources["LessonFlyout"] as MenuFlyout);
    FlyoutBase.ShowAttachedFlyout(thisSender);

所以我需要当我点击 MenuFlyoutItem 时它会调用我的函数.那么我该怎么做呢?

So I need when I click to MenuFlyoutItem it will call my function. So how do I do this?

还有一个简单的问题，在关于 MenuFlyout 的 Microsoft 官方页面中，据说 MenuFlyoutItem 有一个 Icon 属性，但在我的情况下，我没有它，VS 说有一个错误.

Also quick question, in the official Microsoft Page about MenuFlyout there's said that there is an Icon attribute to MenuFlyoutItem but in my case I don't have it and VS says that there's an error.

The member "Icon" is not recognized or is not accessible.   
The property 'Icon' was not found in type 'MenuFlyoutItem'. 

推荐答案

对于不同页面的不同对象，MenuFlyoutItem 和它的 Command 会有所不同，所以通常，我们不会将 MenuFlyout 放在 Application.Resources 中.但是如果你能确保不同Page中使用的MenuFlyoutItem是相同的，那么下面的方法可能是你的一个解决方案.

For different objects in different pages, the MenuFlyoutItem and its Command would be different, so usually, we won't put the MenuFlyout in Application.Resources. But if you can make sure the MenuFlyoutItems used in different Pages are the same, then the following might be a solution for you.

首先，在App.xaml中，为Command设置Binding:

<Application.Resources>
    <MenuFlyout x:Key="LessonFlyout">
        <MenuFlyoutItem Text="Edit" Command="{Binding EditCommand}" />
        <MenuFlyoutItem Text="Delete" Command="{Binding DeleteCommand}" />
    </MenuFlyout>
</Application.Resources>

然后实现I Command Interface 就像 RelayCommand.cs 在官方示例中.

Then implement I​Command Interface like the RelayCommand.cs in official sample.

在此之后，我们需要在视图模型中实现EditCommand 和DeleteCommand 以便绑定可以工作.例如:

After this, we need to implement EditCommand and DeleteCommand in view model so that the binding can work. For example:

public class ViewModel
{
    public ICommand EditCommand { get; set; }

    public ICommand DeleteCommand { get; set; }

    public ViewModel()
    {
        EditCommand = new RelayCommand(() =>
        {
            //TODO
            System.Diagnostics.Debug.WriteLine("EditCommand");
        });
        DeleteCommand = new RelayCommand(() =>
        {
            //TODO
            System.Diagnostics.Debug.WriteLine("DeleteCommand");
        });
    }
}

然后附加 MenuFlyout 像:

StackPanel thisSender = sender as StackPanel;
thisSender.DataContext = new ViewModel();
FlyoutBase.SetAttachedFlyout(thisSender, Application.Current.Resources["LessonFlyout"] as MenuFlyout);
FlyoutBase.ShowAttachedFlyout(thisSender);

这里使用的 ViewModel 只是举例，通常你的页面应该有一个视图模型，如果是这样，在附加 DataContext 时不需要设置 DataContext代码>MenuFlyout.在页面的视图模型中设置 EditCommand 和 DeleteCommand 应该足够了.

The ViewModel used here is just for example, usually you should have a view model for your page and if so there is no need to set DataContext when attaching the MenuFlyout. Setting EditCommand and DeleteCommand in your page's view model should be enough to work.

对于以下错误:

无法识别或无法访问成员图标".
在MenuFlyoutItem"类型中找不到属性Icon".

The member "Icon" is not recognized or is not accessible.
The property 'Icon' was not found in type 'MenuFlyoutItem'.

这是因为您的项目的目标版本早于 Build 15063.在 Icon 属性中，我们可以找到其他功能和要求，表明此属性是在 Windows 10 创意者更新 (v10.0.15063.0) 中引入的.因此，要使用此属性，请确保您的目标是 Build 15063 或更高版本.

This is because your project is targeting a version earlier than Build 15063. In Icon property, we can find Additional features and requirements that indicates this property is introduced in Windows 10 Creators Update (v10.0.15063.0). So to use this property, please make sure you are targeting Build 15063 or later.

这篇关于UWP 中的绑定命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！