如何将UWP MasterDetailsView中的CommandBar调整至顶部

我来帮你搞定这个问题！要把MasterDetailsView的主/详情命令栏移到各自面板的顶部，核心是修改它的ControlTemplate——默认模板里命令栏被固定在滚动视图下方，直接在外部调整位置根本没用，得深入模板内部重构布局顺序。

步骤1：获取默认的MasterDetailsView模板 #

你有两种方式拿到模板代码：

• 用Blend打开项目，右键MasterDetailsView控件，选择编辑模板 > 编辑副本，Blend会自动生成完整的默认模板并添加到你的资源字典里。
• 或者直接使用对应版本Windows Community Toolkit的官方默认模板代码。

步骤2：调整主面板命令栏位置 #

在生成的模板中找到名为MasterPane的Grid容器，原来的结构大概是这样：

<Grid x:Name="MasterPane">
    <ScrollViewer x:Name="MasterScrollViewer">
        <!-- 主面板列表内容 -->
    </ScrollViewer>
    <CommandBar x:Name="MasterCommandBar" />
</Grid>

你需要把MasterCommandBar移到ScrollViewer的上方，同时给ScrollViewer加个顶部Margin（和命令栏高度一致，比如48），避免内容被命令栏遮挡：

<Grid x:Name="MasterPane">
    <CommandBar x:Name="MasterCommandBar" />
    <ScrollViewer x:Name="MasterScrollViewer" Margin="0,48,0,0">
        <!-- 主面板列表内容 -->
    </ScrollViewer>
</Grid>

步骤3：调整详情面板命令栏位置 #

同样，在模板里找到DetailsPane容器，原结构类似：

<Grid x:Name="DetailsPane">
    <ScrollViewer x:Name="DetailsScrollViewer">
        <!-- 详情面板内容 -->
    </ScrollViewer>
    <CommandBar x:Name="DetailsCommandBar" />
</Grid>

把DetailsCommandBar移到ScrollViewer上方，同样给ScrollViewer加顶部Margin：

<Grid x:Name="DetailsPane">
    <CommandBar x:Name="DetailsCommandBar" />
    <ScrollViewer x:Name="DetailsScrollViewer" Margin="0,48,0,0">
        <!-- 详情面板内容 -->
    </ScrollViewer>
</Grid>

步骤4：确认命令栏绑定正常 #

如果你的命令是通过绑定MasterDetailsView的MasterCommandBarCommands和DetailsCommandBarCommands属性实现的，要确保模板里的命令栏绑定没被破坏，默认绑定应该是这样的：

<CommandBar x:Name="MasterCommandBar"
            PrimaryCommands="{TemplateBinding MasterCommandBarCommands}" />

做完这些调整后，主命令栏和详情命令栏就会乖乖出现在各自面板的顶部了。

内容的提问来源于stack exchange，提问作者Henrik Olsson