UWP NavigationView 通过 MVVM 导航答案

【问题标题】：UWP NavigationView navigation via MVVMUWP NavigationView 通过 MVVM 导航
【发布时间】：2018-12-27 11:43:48
【问题描述】：

我在我的应用 NavigationView 中用作主控件，并且在页面加载的地方有 Frame。

<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 相矛盾。

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

【问题讨论】：

FWIW，如果您在视图中处理选择更改事件，它仍然符合 MVVM，它只是将适当的信息转发到 ViewModel 上的方法。无需过度复杂化任何事情。
您已经在代码隐藏中引用了您的 ViewModel 以便使用 x:Bind，所以我想不出任何理由为什么您不能只使用代码隐藏事件处理程序.这并不违反 MVVM，甚至一点也不违反。也就是说，Xaml 行为可能可以做你想做的事。
你是赖特@SeanO'Neil，这种行为使我能够做我要做的事情。我使用来自thisnuget 包的EventToCommand 使用Command 制作了MVVM。

标签： c# mvvm uwp navigation

【解决方案1】：

实现这一点与您为 WPF 执行此操作的方式非常相似，您需要首先通过 NuGet 安装 Microsoft.Xaml.Behaviors.Uwp.Managed 包。然后向 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 所做的那样：

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);

【讨论】：

【解决方案2】：

尝试使用Windows Template Studio，它解决了我在将 NavigationView 与 MVVM 结合时遇到的问题

【讨论】：

他们如何在模板中解决这个场景？如果您包含更多信息会很有趣:)谢谢

【解决方案3】：

要了解如何正确使用 NavigationView 控件（包括数据绑定案例），请参阅 Microsoft 提供的名为 XAML 控件库 的配套应用程序。XAML 控件库。

最好的问候

【讨论】：