UWP主详情场景中从DataTemplate引用父级上下文的问题

嘿，这个问题我之前做UWP项目时也碰到过——DataTemplate里的控件默认绑定的是列表项的ViewModel，要跨层引用页面ViewModel的命令确实有点绕。不过有几种实用的方案能搞定，我给你详细说说：

方法1：通过RelativeSource绑定页面ViewModel #

这是最直接的XAML层面解决方案，利用RelativeSource向上查找页面的DataContext（也就是你的页面ViewModel），直接绑定它的RemoveCommand：

<Button Content="移除"
        Command="{Binding DataContext.RemoveCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Page}}"
        CommandParameter="{Binding}" />

这里CommandParameter="{Binding}"会把当前的ListItemViewModel实例传递给命令，这样你的页面ViewModel就能明确知道要移除哪一项。

方法2：用ElementName定位页面DataContext #

如果你给页面设置了x:Name（比如x:Name="MainDetailPage"），也可以直接通过ElementName来引用页面的ViewModel：

<Button Content="移除"
        Command="{Binding DataContext.RemoveCommand, ElementName=MainDetailPage}"
        CommandParameter="{Binding}" />

这个方法和RelativeSource原理一致，只是换了一种定位上级DataContext的方式，适合页面命名清晰的场景。

方法3：将命令注入到ListItemViewModel中 #

如果更倾向于ViewModel层面的解耦，可以在创建列表项ViewModel的时候，把页面ViewModel的RemoveCommand传递进去。比如在页面ViewModel的初始化逻辑里：

// 假设你的列表项集合是ObservableCollection<ListItemViewModel> ItemCollection
foreach (var dataModel in YourDataSource)
{
    var listItemVm = new ListItemViewModel(dataModel);
    listItemVm.RemoveCommand = this.RemoveCommand; // 注入页面VM的移除命令
    ItemCollection.Add(listItemVm);
}

这样在DataTemplate里就能直接绑定列表项ViewModel的命令了：

<Button Content="移除"
        Command="{Binding RemoveCommand}"
        CommandParameter="{Binding}" />

这种方式更符合MVVM的组件化设计，不过需要给ListItemViewModel新增一个RemoveCommand属性。

方法4：借助Blend行为绑定命令 #

如果你项目里用到了Microsoft.Xaml.Behaviors.Uwp.Managed NuGet包，还可以用InvokeCommandAction来实现绑定：

<Button Content="移除">
    <Interactivity:Interaction.Behaviors>
        <Core:InvokeCommandAction Command="{Binding DataContext.RemoveCommand, RelativeSource={RelativeSource AncestorType=Page}}"
                                  CommandParameter="{Binding}" />
    </Interactivity:Interaction.Behaviors>
</Button>

这种方式适合需要给按钮添加额外交互逻辑的场景，不过需要先安装对应的行为包。

你可以根据项目的架构风格和实际需求选择最合适的方案，前两种是快速解决的XAML技巧，后两种更偏向ViewModel层的架构优化。

内容的提问来源于stack exchange，提问作者Chris Pickford