Binding command in UWP

Question

I have a MenuFlyout in my App.xaml:

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

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.

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);

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

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'. 

Answer 1

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.

Firstly, in App.xaml, set Binding for Command:

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

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

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");
        });
    }
}

And then attach the MenuFlyout like:

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

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.

---

For the following error:

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

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.