XAML - MenuFlyoutItem привязанных к ListView не работает в WP8.1

Question

Я разработать Универсальное приложение, который использует MVVM-LGHT инструментарий.

На странице я показываю список комментариев. Я хотел бы, чтобы пользователь мог добавить новый комментарий и отредактировать или удалить существующие комментарии.

Для добавления нового комментария, я использую AppBarButton на CommandBar и она отлично работает.

Для редактирования и удаления существующих комментариев, я хотел бы, чтобы отобразить MenuFlyout, который предлагает 2 пунктов: «редактировать» и «удалить». Я могу отобразить MenuFlyout, но ничего не происходит, когда я нажимаю на его пунктов ...

Вот мой обеспокоенный XAML код:

<ListView x:Name="myCommentaires" 
       ItemsSource="{Binding Comments}" 
       IsItemClickEnabled="True" 
       SelectionMode="Single" 
       SelectedItem="{Binding SelectedComment}" 
       ContinuumNavigationTransitionInfo.ExitElementContainer="True"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Margin="0,0,19,12" 
          HorizontalAlignment="Stretch"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 
         <!-- 1. Author --> 
         <TextBlock Grid.Column="0" 
            Text="{Binding name}" 
            HorizontalAlignment="Stretch" VerticalAlignment="Center" 
            TextAlignment="Left" 
            Margin="0" 
            Foreground="{StaticResource ThemeBrush}" 
            Style="{StaticResource ListViewItemSubheaderTextBlockStyle}" /> 
         <!-- 2. Date --> 
         <TextBlock Grid.Column="1" 
            Text="{Binding date, Converter={StaticResource DateToStringConverter}}" 
            HorizontalAlignment="Stretch" VerticalAlignment="Center" 
            TextAlignment="Right" 
            Margin="0" 
            Foreground="{StaticResource ThemeBrush}" 
            Style="{StaticResource ListViewItemSubheaderTextBlockStyle}" /> 
        </Grid> 
        <!-- 3. Content --> 
        <TextBlock Text="{Binding content}" 
           TextAlignment="Left" 
           TextWrapping="Wrap" 
           Margin="0" 
           Foreground="Black" 
           FontSize="20" 
           Style="{StaticResource GroupHeaderTextBlockStyle}" /> 
        <!-- MenuFlyout - with Commands --> 
        <FlyoutBase.AttachedFlyout> 
         <MenuFlyout> 
          <MenuFlyout.MenuFlyoutPresenterStyle> 
           <Style TargetType="MenuFlyoutPresenter"> 
            <Setter Property="Background" Value="{StaticResource ThemeBrush}"/> 
           </Style> 
          </MenuFlyout.MenuFlyoutPresenterStyle> 
          <MenuFlyoutItem Text="Edit" 
              Command="{Binding EditCommentCommand}"/> 
          <MenuFlyoutItem Text="Delete" 
              Command="{Binding DeleteCommentCommand}"/> 
         </MenuFlyout> 
        </FlyoutBase.AttachedFlyout> 
        <!-- Behavior --> 
        <i:Interaction.Behaviors> 
         <core:EventTriggerBehavior EventName="Tapped"> 
          <local:OpenFlyoutAction /> 
         </core:EventTriggerBehavior> 
        </i:Interaction.Behaviors> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
      </Style> 
     </ListView.ItemContainerStyle> 
    </ListView> 

И прилагаемую к нему код- за пределами:

public class OpenFlyoutAction : DependencyObject, IAction 
    { 
     public object Execute(object sender, object parameter) 
     { 
      FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender); 
      return null; 
     } 
    } 

И это мой ViewModel код:

// RelaydCommands declarations 
    ... 
    public RelayCommand AddCommentCommand { get; set; } 
    public RelayCommand EditCommentCommand { get; set; } 
    public RelayCommand DeleteCommentCommand { get; set; } 
    ... 

    // RelayCommands are affected in the constructor 
    ... 
    AddCommentaireCommand = new RelayCommand(AddCommentaire); 
    EditCommentaireCommand = new RelayCommand(EditCommentaire); 
    DeleteCommentaireCommand = new RelayCommand(DeleteCommentaire); 
    ... 

    // Methods related to the RelayCommands 
    private async void AddComment() 
    { 
     NavigationService.NavigateTo<EditCommentViewModel>(this, new object[] { _article, _titleStructure.Title }, true); 
    } 

    private async void EditComment() 
    { 
     NavigationService.NavigateTo<EditCommentViewModel>(this, new object[] { _article, _titleStructure.Title, SelectedComment }, true); 
    } 

    private async void DeleteComment() 
    { 
     var test = SelectedComment; 
    } 

Я не встретите никаких проблем с «AddComment» метод, который вызывается из AppBarButton, но я никогда не войти в методы «EditComment» и «DeleteComment», тогда как я место точек останова.

Я также попытался заменить Command из MenuFlyoutItem по CallMethodAction, но это ничего не меняет:

<!-- MenuFlyout - with CallMethodAction --> 
    <FlyoutBase.AttachedFlyout> 
     <MenuFlyout> 
      <MenuFlyout.MenuFlyoutPresenterStyle> 
       <Style TargetType="MenuFlyoutPresenter"> 
        <Setter Property="Background" Value="{StaticResource ThemeBrush}"/> 
       </Style> 
      </MenuFlyout.MenuFlyoutPresenterStyle> 
      <MenuFlyoutItem Text="Edit"> 
       <i:Interaction.Behaviors> 
        <core:EventTriggerBehavior EventName="Click"> 
         <core:CallMethodAction MethodName="EditComment" /> 
        </core:EventTriggerBehavior> 
       </i:Interaction.Behaviors> 
      </MenuFlyoutItem> 
      <MenuFlyoutItem Text="Delete"> 
       <i:Interaction.Behaviors> 
        <core:EventTriggerBehavior EventName="Click"> 
         <core:CallMethodAction MethodName="DeleteComment" /> 
        </core:EventTriggerBehavior> 
       </i:Interaction.Behaviors> 
      </MenuFlyoutItem> 
     </MenuFlyout> 
    </FlyoutBase.AttachedFlyout> 

=> Может кто-нибудь сказать мне, что случилось ?

Answer 1

Вы определяете ваш flyout внутри ListView, поэтому DataContext устанавливается в Comments собственности на вашем ViewModel. Значение 2 команды, которые вы используете, не найдено!

Чтобы исправить это, вам необходимо ссылаться на свой сайт datacontext и использовать его для поиска команд.

Дайте ваше <Page> имя как x:Name="PageRoot" и изменить связывание команд

{Binding ElementName=PageRoot, Path=DataContext.EditCommentCommand}