Vorlage 10: Verwenden der MasterDetail-Steuerung zusammen mit Hamburger Menü

Question

Ich habe die MasterDetail-Steuerung (2. Ansatz) von Template10 Samples Projekt in eine einfache Template10 Hamburger Menüanwendung integriert. Es funktioniert gut, aber in VisualStateNarrow MasterCommandBarContent wird hinter Hamburger Menü Schaltfläche angezeigt. Auch der Zurück-Button in der Detailansicht wird nicht "sichtbar" sein, da der Button auch hinter dem Hamburger-Menü-Button steht. Genau in dieser Zeit wird die detaillierte Seite neben der Master-Seite angezeigt, der Header-Inhalt wird auf die richtige Weise angezeigt. Natürlich wird dieses Verhalten nicht auf einer anderen Seite mit einem "normalen" PageHeader-Steuerelement passieren. Ich kann dieses Stück XAML-Code nicht finden, um dieses Problem zu beheben. Dank für einige Tipps

Answer 1

Lösung so einfach ist, fügen Sie einfach einen Padding zu

DetailsCommandBar

und

MasterCommandBar

Hier ist ein Teil von mein Schatz stom.xaml Datei:

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