UWP MVVM模式下实现NavigationView点击切换ContentFrame导航

我来帮你搞定这个NavigationView结合ContentFrame的MVVM导航问题！常规导航服务默认操作Window的RootFrame，但咱们要适配页面内的ContentFrame，只需要对导航服务做些小改造，再配合ViewModel的命令绑定就能实现完全解耦的导航逻辑，具体步骤如下：

1. 改造导航服务，适配ContentFrame #

首先调整INavigationService接口和实现类，让它能接收并操作指定的ContentFrame，而不是固定的RootFrame：

public interface INavigationService
{
    // 设置要操作的目标Frame
    void SetTargetFrame(Frame targetFrame);
    // 导航到指定页面类型
    void NavigateTo(Type viewType);
    // 带参数导航（可选扩展）
    void NavigateTo(Type viewType, object parameter);
    // 返回上一页
    void GoBack();
    // 判断是否可返回
    bool CanGoBack { get; }
}

public class NavigationService : INavigationService
{
    private Frame _targetFrame;

    public void SetTargetFrame(Frame targetFrame)
    {
        _targetFrame = targetFrame;
        // 监听Frame的导航事件，更新CanGoBack状态（如果ViewModel需要绑定的话）
        if (_targetFrame != null)
        {
            _targetFrame.Navigated += (s, e) => OnPropertyChanged(nameof(CanGoBack));
            _targetFrame.Navigated += (s, e) => OnPropertyChanged(nameof(CanGoBack));
        }
    }

    public void NavigateTo(Type viewType)
    {
        if (_targetFrame == null) return;
        // 避免重复导航到当前页面
        if (_targetFrame.Content?.GetType() != viewType)
        {
            _targetFrame.Navigate(viewType);
        }
    }

    public void NavigateTo(Type viewType, object parameter)
    {
        if (_targetFrame == null) return;
        if (_targetFrame.Content?.GetType() != viewType)
        {
            _targetFrame.Navigate(viewType, parameter);
        }
    }

    public void GoBack()
    {
        if (_targetFrame != null && _targetFrame.CanGoBack)
        {
            _targetFrame.GoBack();
        }
    }

    public bool CanGoBack => _targetFrame?.CanGoBack ?? false;

    // 实现INotifyPropertyChanged，让CanGoBack能绑定到UI
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 在主页面初始化导航服务 #

打开你的主页面（比如MainPage.xaml.cs），在页面加载时把ContentFrame的引用传递给导航服务，同时把导航服务注入到ViewModel中：

public sealed partial class MainPage : Page
{
    public MainViewModel ViewModel { get; }

    public MainPage()
    {
        this.InitializeComponent();
        // 实例化导航服务
        var navigationService = new NavigationService();
        // 绑定页面内的ContentFrame
        navigationService.SetTargetFrame(ContentFrame);
        // 初始化ViewModel并传入导航服务
        ViewModel = new MainViewModel(navigationService);
        DataContext = ViewModel;
    }
}

3. ViewModel中实现导航命令 #

在MainViewModel中创建导航命令，处理NavigationView的项点击和返回逻辑：

public class MainViewModel : INotifyPropertyChanged
{
    private readonly INavigationService _navigationService;

    // 导航命令，接收页面类型作为参数
    public ICommand NavigateCommand { get; }
    // 返回命令
    public ICommand GoBackCommand { get; }

    public bool CanGoBack => _navigationService.CanGoBack;

    public MainViewModel(INavigationService navigationService)
    {
        _navigationService = navigationService;
        // 使用RelayCommand（需要实现ICommand，或者用Microsoft.Toolkit.Mvvm里的RelayCommand）
        NavigateCommand = new RelayCommand<Type>(ExecuteNavigate);
        GoBackCommand = new RelayCommand(ExecuteGoBack, () => CanGoBack);

        // 监听导航服务的CanGoBack变化，更新命令状态
        _navigationService.PropertyChanged += (s, e) =>
        {
            if (e.PropertyName == nameof(CanGoBack))
            {
                ((RelayCommand)GoBackCommand).NotifyCanExecuteChanged();
                OnPropertyChanged(nameof(CanGoBack));
            }
        };
    }

    private void ExecuteNavigate(Type viewType)
    {
        if (viewType != null)
        {
            _navigationService.NavigateTo(viewType);
        }
    }

    private void ExecuteGoBack()
    {
        _navigationService.GoBack();
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

4. XAML中绑定NavigationView事件 #

最后在主页面的XAML里，把NavigationView的ItemInvoked和BackRequested事件绑定到ViewModel的命令，同时给导航项的Tag设置对应的页面类型：

<Page
    x:Class="YourApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:views="using:YourApp.Views">

    <Grid>
        <NavigationView x:Name="MainNavView"
                        IsBackEnabled="{Binding CanGoBack}">
            <!-- 绑定导航项点击事件到ViewModel的NavigateCommand -->
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="ItemInvoked">
                    <core:InvokeCommandAction Command="{Binding NavigateCommand}"
                                              CommandParameter="{Binding InvokedItem.Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                </core:EventTriggerBehavior>
                <!-- 绑定返回按钮事件 -->
                <core:EventTriggerBehavior EventName="BackRequested">
                    <core:InvokeCommandAction Command="{Binding GoBackCommand}"/>
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>

            <!-- 导航菜单 -->
            <NavigationView.MenuItems>
                <NavigationViewItem Content="首页" Tag="{x:Type views:HomePage}"/>
                <NavigationViewItem Content="设置" Tag="{x:Type views:SettingsPage}"/>
                <NavigationViewItem Content="我的" Tag="{x:Type views:ProfilePage}"/>
            </NavigationView.MenuItems>

            <!-- 内容区域Frame -->
            <Frame x:Name="ContentFrame"/>
        </NavigationView>
    </Grid>
</Page>

额外提示 #

• 如果使用Microsoft.Toolkit.Mvvm包，可以直接用里面的RelayCommand，省去自己实现ICommand的麻烦。
• 若需要传递导航参数，直接调用NavigateTo(Type viewType, object parameter)即可，页面通过NavigationContext.GetParameter()获取参数。
• 如果用依赖注入框架（比如Autofac、Unity），可以把INavigationService注册为单例，让多个ViewModel共享同一个导航服务实例。

内容的提问来源于stack exchange，提问作者stef morren