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参数上或在Watch窗口中检查它的值时，您可以看到实际的异常。我的第一个想法是你的viewmodel中的Command是错误的类型，因为你的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的类型。

我不久前创建了一个类似的示例（使用Prism作为MVVM框架），因此您可以在GitHub上自行检查源代码。

奖励：如果您自己添加了Microsoft.Xaml.Behaviors.Uwp.Managed，则不需要它（除非您要指定版本）。您的HamburgerMenu需要Microsoft.Toolkit.Uwp.UI.Controls，它引入了Microsoft.Toolkit.Uwp.UI.Animations，它本身带来了Microsoft.Xaml.Behaviors.Uwp.Managed。

MVVM命令绑定到UWP工具包汉堡菜单

1 个答案: