UWP NavigationView 通过 MVVM 导航 [英] UWP NavigationView navigation via MVVM

问题描述

我在我的应用 NavigationView 中用作主要控件，并在页面加载的位置使用 Frame.

I am using as main control in my app NavigationView and have Frame where page is loading.

<NavigationView x:Name="MyNavView" IsBackButtonVisible="Collapsed" SelectionChanged="{x:Bind ViewModel.OnSelectionChanged}" PaneDisplayMode="Top">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Contact" Content="Contact" Tag="MasterDetailPage"/>
        <NavigationViewItem Icon="Favorite" Content="Favorites" Tag="FavoritesPage"/>
    </NavigationView.MenuItems>
    <Frame x:Name="RootFrame"/>
</NavigationView>

有两个事件 SelectionChanged 和 ItemInvoked 可以实现导航到在 RootFrame(我的框架的名称)中加载的页面.但是我想用Command来制作MVVM.而且我还没有为 NavigationView 本身或 NavigationViewItem 找到 Command 道具.之后我在 ViewModel 中处理了 SelectionChanged 事件，但在我看来它与 MVVM 相矛盾.

There are two events SelectionChanged and ItemInvoked that make available to realise navigation to pages that loading in RootFrame (name of my frame). But I want to use Command to make MVVM. And I have not found Command prop even for NavigationView itself or for NavigationViewItem. After that I have handled SelectionChanged event in ViewModel but at my view it contradicts MVVM.

那么，如何使用 Command 制作 MVVM?如果没有这样的机会告诉如何实现MVVM本身不处理事件.

So,how can I make MVVM using Command? If there is no such opportunity tell how to realise MVVM itself not handling event.

推荐答案

实现这一点与您为 WPF 实现的方式非常相似，您需要从通过 NuGet 安装 Microsoft.Xaml.Behaviors.Uwp.Managed 包开始.然后你向你的 NavigationView 添加一个行为:

Implementing this is very similar to how you do it for WPF, you need to start by installing the Microsoft.Xaml.Behaviors.Uwp.Managed package via NuGet. Then you add a behavior to your NavigationView:

xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"

<NavigationView MenuItemsSource="{x:Bind ViewModel.MenuItems}">

    <i:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="ItemInvoked">
            <core:EventTriggerBehavior.Actions>
                <core:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
            </core:EventTriggerBehavior.Actions>
        </core:EventTriggerBehavior>
    </i:Interaction.Behaviors>

我在这里使用 x:Bind 进行编译时错误检查，但是常规的 Binding 当然也能正常工作.无论哪种方式，都在您的视图模型中使用命令处理程序进行跟进，就像您在 WPF 中所做的一样:

I'm using x:Bind here for compile-time error checking but a regular Binding will work just as well of course. Either way, follow this up with a command handler in your view model just as you would for WPF:

private ICommand _ItemInvokedCommand;
public ICommand ItemInvokedCommand => this._ItemInvokedCommand ?? (this._ItemInvokedCommand = new RelayCommand<NavigationViewItemInvokedEventArgs>(OnItemInvoked));


private void OnItemInvoked(NavigationViewItemInvokedEventArgs args)
{
    // could also use a converter on the command parameter if you don't like
    // the idea of passing in a NavigationViewItemInvokedEventArgs
    this.NavigationService.NavigateTo(args.InvokedItem);

这篇关于UWP NavigationView 通过 MVVM 导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！