模板 10：将 MasterDetail 控件与 Hamburger Menu 一起使用答案

【问题标题】：Template 10:Using MasterDetail control together with Hamburger Menu模板 10：将 MasterDetail 控件与 Hamburger Menu 一起使用
【发布时间】：2016-10-26 10:18:12
【问题描述】：

我将来自 Template10 Samples 项目的 MasterDetail 控件（2. 方法）包含到一个简单的 Template10 Hamburger 菜单应用程序中。它工作正常，但在 VisualStateNarrow MasterCommandBarContent 将显示在汉堡菜单按钮后面。详细视图中的后退按钮也不会“可见”，因为按钮也在汉堡菜单按钮后面。正是在这个时候，详细页面将显示在母版页旁边，标题内容将以正确的方式显示。当然，这种行为不会发生在具有“正常”PageHeader 控件的另一个页面上。我找不到这段 xaml 代码来解决这个问题。感谢您的一些提示

【问题讨论】：

标签： xaml uwp uwp-xaml template10

【解决方案1】：

解决方法就是这么简单，加个Padding就行了

详细信息命令栏

和

主命令栏

这是我的 custom.xaml 文件的一部分：

    <Style TargetType="localControls:MasterDetailsView">
      <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="localControls:MasterDetailsView">
                <Border
                    x:Name="ControlRoot"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="CommandBarRow" Height="Auto" />
                            <RowDefinition x:Name="ContentRow" Height="*" />
                            <RowDefinition x:Name="MobileCommandBarRow" Height="0" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="MasterPane" Width="{Binding MasterPaneWidth, RelativeSource={RelativeSource TemplatedParent}}" />
                            <ColumnDefinition x:Name="DetailsPane" Width="*" />
                        </Grid.ColumnDefinitions>
                        <CommandBar
                            x:Name="DetailsCommandBar"
                            Grid.Row="0"
                            Grid.Column="1"
                            Padding="48,0,0,0">
                          <CommandBar.Content>
                          </CommandBar.Content>
                        </CommandBar>
                        <CommandBar
                            x:Name="MasterCommandBar"
                            Grid.Row="0"
                            Grid.Column="0"
                            Padding="48,0,0,0">
                            <CommandBar.Content>
                            </CommandBar.Content>
                        </CommandBar>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

【讨论】：