MVVMコマンドのUWPツールキットハンバーガーメニューへのバインド

Question

MVVMパターンを使用してItemClickとOptionItemClickイベントをバインドしようとしました。文書https://developer.microsoft.com/en-us/windows/uwp-community-toolkit/api/microsoft_toolkit_uwp_ui_controls_hamburgermenuによれば、私はバインドできるCommandはありません。だから私はhttps://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/パッケージを使用して、私のイベントトリガをコマンドにつけることを考えています。

私のXAMLコードは、すべてのコードの

<Page 
    x:Class="App1.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:i="using:Microsoft.Xaml.Interactivity" 
    xmlns:ic="using:Microsoft.Xaml.Interactions.Core" 
    xmlns:localModel="using:App1.Models" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" 
    mc:Ignorable="d"> 

    <Page.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 
       <localTemplate:TemplatesResourceDictionary/> 
      </ResourceDictionary.MergedDictionaries> 
      <DataTemplate x:Key="DefaultTemplate" x:DataType="localModel:MenuItem"> 
       <Grid Width="240" Height="48" Margin="0,0,0,0" HorizontalAlignment="Left"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="48" /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <SymbolIcon Grid.Column="0" Symbol="{x:Bind Icon, Mode=OneWay}" Foreground="White" /> 
        <TextBlock Grid.Column="1" Text="{x:Bind Name, Mode=OneWay}" FontSize="16" VerticalAlignment="Center" Foreground="White" /> 
       </Grid> 
      </DataTemplate> 
     </ResourceDictionary> 
    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <controls:HamburgerMenu x:Name="hamburgerMenuControl" 
           Grid.Row="0" 
           Grid.Column="0" 
           PaneBackground="Black" 
           Foreground="White" 
           DisplayMode="CompactOverlay" 
           ItemsSource="{Binding Path=MainMenuItems}" 
           ItemTemplate="{StaticResource DefaultTemplate}" 
           OptionsItemsSource="{Binding Path=OptionMenuItems}" 
           OptionsItemTemplate="{StaticResource DefaultTemplate}" 
           OptionsItemClick="OnMenuItemClick"> 
      <i:Interaction.Behaviors> 
       <ic:EventTriggerBehavior EventName="ItemClick"> 
        <ic:InvokeCommandAction Command="{Binding Path=NavigateCommand}" /> 
       </ic:EventTriggerBehavior> 
      </i:Interaction.Behaviors> 
      <Frame x:Name="contentFrame" /> 
     </controls:HamburgerMenu> 
    </Grid> 
</Page> 

まずVS2017でおかしいですが、それはコンパイルエラーを生成しません。

私は、コードを起動し、メニュー項目をクリックしたときに第二に、生成されたコードのApp.g.i.cs別のデバッガを起動するために私に尋ねるために、さらにメッセージと

し、また内部でスローされた例外があります。

デバッガはApp1.exeに接続されていますが、この 未処理の例外をデバッグするように構成されていません。この例外をデバッグするには、現在の デバッガを切り離します。

私のビューモデルにコマンドをバインドする適切な方法は何ですか？

Answer 1

XAMLでPageのDataContextがviewmodelに設定されていないことがありますので、これはコードの背後にあります。

Andreyが述べたように、eパラメータにカーソルを置いたり、ウォッチウィンドウでその値をチェックすると、実際の例外が表示されます。私の最初のアイデアは、あなたのXAMLが正しいと思われるので、あなたのviewmodelのあなたのコマンドが間違ったタイプであるということです。あなたのビューモデルに引き渡される引数は、HamburgerMenuにバインドされた実際のタイプではなく、ItemClickedEventArgsにバインドされています。

これはDelegateCommandのコードですが、RelayCommand（または使用するICommandの実装）は似ているはずです。 HamburgerMenuPrismItemは自分のタイプであることを

public DelegateCommand<ItemClickEventArgs> NavigateCommand { get; } 

private void OnMenuItemClicked(ItemClickEventArgs args) 
{ 
    HamburgerMenuPrismItem menuItem = (HamburgerMenuPrismItem)args.ClickedItem; 
    _navigationService.Navigate(menuItem.TargetPageToken, null); 
} 

注、これはあなたのHamburgerMenuに結合しているタイプのものでなければなりません。

しばらく前に、類似のサンプル（MVVMフレームワークと同じPrismを使用）を作成しました。したがって、自分でGitHubのソースを確認できます。

ボーナス：Microsoft.Xaml.Behaviors.Uwp.Managedを追加した場合、バージョンを指定しない限り、必要はありません。 HamburgerMenuにはMicrosoft.Toolkit.Uwp.UI.Controlsが必要です.HamburgerMenuは、Microsoft.Toolkit.Uwp.UI.Animationsを持ち込みます。これは、Microsoft.Xaml.Behaviors.Uwp.Managedを持ち込みます。