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 구현을 사용하는 경우)과 유사해야합니다.

public DelegateCommand<ItemClickEventArgs> NavigateCommand { get; } 

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

HamburgerMenuPrismItem은 내 자신의 유형입니다.이 유형은 HamburgerMenu에 바인딩 한 유형이어야합니다.

필자는 얼마 전에 비슷한 샘플 (MVVM 프레임 워크로 프리즘으로)을 만들었으므로 소스 GitHub에서 직접 확인할 수 있습니다.

보너스 : Microsoft.Xaml.Behaviors.Uwp.Managed를 추가 한 경우 버전을 지정하지 않는 한 직접 처리 할 필요가 없습니다. Microsoft.Toolkit.Uwp.UI.Animations를 가져 오는 HamburgerMenu에 Microsoft.Toolkit.Uwp.UI.Controls가 필요합니다.이 도구는 Microsoft.Xaml.Behaviors.Uwp.Managed를 제공합니다.