Template 10:Using MasterDetail control together with Hamburger Menu

Question

I included MasterDetail control (2. approach) from Template10 Samples project into a simple Template10 Hamburger menu application. It is working fine, but in VisualStateNarrow MasterCommandBarContent will be displayed behind Hamburger menu button. Also the back button in detailed view will not be "visible" because button is behind Hamburger menu button, too. Exactly in this time, detailed page will shown beside master page, header content will be displayed the right way. Of course this behavior will not happen at another page with a "normal" PageHeader control. I cannot find this piece of xaml code to fix this issue. Thanks for some hints

Answer 1

Solution is so simple, just add a Padding to

DetailsCommandBar

and

MasterCommandBar

Here a part of my custom.xaml file:

    <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>