如何在小屏设备中实现MasterDetailsView的项深度链接？

这个问题我之前在开发UWP应用时也碰到过，小屏设备上MasterDetailsView默认处于折叠状态（只显示主列表），就算你通过导航参数设置了SelectedItem，也不会自动切换到详情视图，导致深度链接没生效。下面是几个经过验证的解决办法：

1. 导航时强制切换到详情视图 #

这是最直接的方案，在OnNavigatedTo方法里设置完选中项后，检查当前的视图状态，如果是小屏对应的Compact或Closed状态，就手动切换到Details视图：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    if (e.Parameter is Thing selectedThing)
    {
        Selected = selectedThing;
        MasterDetailsViewControl.SelectedItem = selectedThing;
        
        // 针对小屏状态，强制打开详情视图
        if (MasterDetailsViewControl.ViewState == MasterDetailsViewState.Compact || 
            MasterDetailsViewControl.ViewState == MasterDetailsViewState.Closed)
        {
            MasterDetailsViewControl.ViewState = MasterDetailsViewState.Details;
        }
    }
}

注意：这么做后要确保页面有返回主列表的入口（比如顶部的返回按钮），用户点击返回时可以切换回主视图，而不是直接导航到上一页。你可以处理BackRequested事件，判断当前视图状态是Details时切换到Master，否则再执行默认的导航返回。

2. 用MVVM模式绑定ViewState #

如果你的项目遵循MVVM，更推荐把ViewState绑定到视图模型的属性上，这样导航时只需更新VM的属性，就能自动同步视图状态：

首先在视图模型中添加属性（假设你用了ObservableObject或类似的基类实现INotifyPropertyChanged）：

private MasterDetailsViewState _viewState;
public MasterDetailsViewState ViewState
{
    get => _viewState;
    set => SetProperty(ref _viewState, value);
}

private Thing _selected;
public Thing Selected
{
    get => _selected;
    set => SetProperty(ref _selected, value);
}

然后在XAML中绑定ViewState和SelectedItem：

<MasterDetailsView x:Name="MasterDetailsViewControl"
                  ViewState="{x:Bind ViewModel.ViewState, Mode=TwoWay}"
                  SelectedItem="{x:Bind ViewModel.Selected, Mode=TwoWay}"
                  ItemsSource="{x:Bind ViewModel.Things}">
    <!-- 主列表模板和详情模板 -->
</MasterDetailsView>

最后在页面的OnNavigatedTo中更新VM的属性：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    if (e.Parameter is Thing selectedThing)
    {
        ViewModel.Selected = selectedThing;
        ViewModel.ViewState = MasterDetailsViewState.Details;
    }
}

这种方式更解耦，也方便后续扩展视图状态的逻辑。

3. 订阅ViewStateChanged事件动态调整 #

如果担心强制设置视图状态会影响用户体验，可以订阅ViewStateChanged事件，在状态变化时自动调整：

在页面的构造函数或Loaded事件中添加订阅：

public YourPage()
{
    this.InitializeComponent();
    MasterDetailsViewControl.ViewStateChanged += MasterDetailsViewControl_ViewStateChanged;
}

然后实现事件处理逻辑：

private void MasterDetailsViewControl_ViewStateChanged(MasterDetailsView sender, MasterDetailsViewStateChangedEventArgs args)
{
    // 当有选中项且新状态是Compact/Closed时，自动切换到详情视图
    if (sender.SelectedItem != null && 
        (args.NewState == MasterDetailsViewState.Compact || args.NewState == MasterDetailsViewState.Closed))
    {
        // 加个判断避免无限循环
        if (sender.ViewState != MasterDetailsViewState.Details)
        {
            sender.ViewState = MasterDetailsViewState.Details;
        }
    }
}

这个方案更被动，适合需要根据用户操作动态调整视图状态的场景。

内容的提问来源于stack exchange，提问作者Curtis Parfitt-Ford