XAML MenuFlyoutItem Command Binding in ListView

Question

I am using MVVM light in the project, and I have a ListView in the NoteListPage. In the ListView, I define 2 MenuFlyoutItem, I want to bind each one the command I have created in my View Model.

Here is some detail in my NoteListPage.xaml:

DataContext="{Binding NoteListPage, Source={StaticResource Locator}}">

In my View Model, I have:

    public ObservableCollection<Note> NoteList
    {
        get { return _noteList; }

        set { Set(() => NoteList, ref _noteList, value); }
    }

    public ICommand DeleteComamand { get; private set; }
    public ICommand EditCommand { get; private set; }

I bind the ItemSource to NoteList,

<ListView  x:Name="NoteListView" ItemsSource="{Binding NoteList}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border 
                    BorderBrush="White"
                    BorderThickness="2"
                    CornerRadius="5"
                    Width="360"
                    Margin="10,5" 
                    Tapped="Border_Tapped">

                    <FlyoutBase.AttachedFlyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="Delete"
                        />

                            <MenuFlyoutItem Text="Edit"
                         />
                        </MenuFlyout>
                    </FlyoutBase.AttachedFlyout>

                    <StackPanel >
                        <TextBlock
                               FontSize="30" Text="{Binding NoteTitle}"/>
                        <TextBlock
                               FontSize="25"
                               TextWrapping="Wrap" Text="{Binding NoteContent}"/>
                    </StackPanel>

                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

but then I can't bind the MenuFlyoutItem command, because the data context is of type Model.Note

How can I bind DeleteComamand and EditCommand to MenuFlyoutItem, but ListView ItemSource is still bound to NoteList in this case? Otherwise the list view page doesn't show any item title/content.

Answer 1

<Button 
      Name="BtnMessages"
      Style="{StaticResource HdIconButtonStyle}"
      Command="{Binding ButtonCommand}">                          

      <Button.Flyout>
          <Flyout>
              <ListView x:Name="myList"
                          ItemsSource="{Binding Notifications, Mode=TwoWay}"
                          Margin="10"
                          ItemContainerStyle="{StaticResource NotificationListViewStyle}">
                  <ItemsControl.ItemTemplate>
                      <DataTemplate>
                          <Grid Margin="12,9,0,8">
                              <Interactivity:Interaction.Behaviors>
                                  <Core:EventTriggerBehavior EventName="Tapped">
                                      <Core:InvokeCommandAction Command="{Binding DataContext.MyCommand, ElementName=myList}"/>
                                  </Core:EventTriggerBehavior>
                              </Interactivity:Interaction.Behaviors>
                              <Grid.RowDefinitions>
                                  <RowDefinition Height="Auto"></RowDefinition>
                                  <RowDefinition Height="30"></RowDefinition>
                              </Grid.RowDefinitions>
                              <Grid.ColumnDefinitions>
                                  <ColumnDefinition Width="255"></ColumnDefinition>
                              </Grid.ColumnDefinitions>
                              <TextBlock  Grid.Row="0"
                                              Grid.Column="0"
                                             Text="{Binding Message}" 
                                                  Style="{ThemeResource Style1}"
                                             TextWrapping="Wrap"/>
                              <TextBlock Grid.Row="1"
                                                 Grid.Column="0"
                                                 Margin="0,5,0,0"
                                                 Style="{StaticResource Style2}"
                                                 Text="29 minutes ago" 
                                                 TextWrapping="Wrap"/>
                          </Grid>
                      </DataTemplate>
                  </ItemsControl.ItemTemplate>
              </ListView>

          </Flyout>
      </Button.Flyout>
  </Button>

Answer 2

You can use ElementName to change to the parent DataContext:

<MenuFlyoutItem
    Text="Delete"
    Command="{Binding DataContext.DeleteComamand, ElementName=NoteListView}"/>