模板 10:Using MasterDetail 控件和 Hamburger 菜单

Question

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

Answer 1

解决方法很简单，加个Padding即可

DetailsCommandBar

和

MasterCommandBar

这是我的 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>

模板 10:Using MasterDetail 控件和 Hamburger 菜单

Template 10:Using MasterDetail control together with Hamburger Menu

xaml

uwp

template10

uwp-xaml