Wie kann ich den oberen Teil des Hamburgermenüs im XAML-Navigationsbeispiel ausblenden?

Question

In der Windows UWP XAML Navigation sample von Git-Hub, wie können Sie den oberen Teil des Hamburger-Menü Flyout ausblenden, die den Abschnitt Titel verdeckt?

Derzeit rendert es so, dass es einen Streifen gibt, der den Abschnittstitel der Seite verbirgt.

Wie kann ich es so aussehen? Daher wird der Titel der Section nicht verdeckt, wenn ich das Menü öffne.

habe ich versucht, mit dem z-Index des Seitenkopfes zu spielen, aber es hatte keine Wirkung. Das Hamburgermenü macht immer alles andere aus.

Answer 1

Überprüfen Sie einfach die Microsoft Wetter App für Windows 10, ich denke, es ist eher wie es eine Region aus dem SplitView Steuerelement, die wie "Hamburger-Taste", "Zurück-Taste", "Befehlsleiste" und " AutoSuggestBox ".

Hier habe ich ein Beispiel:

<Page.Resources> 
    <local:BoolToVisiableConverter x:Key="visiblecvt" /> 
    <local:BackgroundConverter x:Key="backgroundcvt" /> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="15*" /> 
    </Grid.RowDefinitions> 
    <Grid Grid.Row="0" Background="{Binding ElementName=listmenu, Path=SelectedItem.MenuText, Converter={StaticResource backgroundcvt}}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="50" /> 
      <ColumnDefinition Width="50" /> 
      <ColumnDefinition Width="100" /> 
      <ColumnDefinition Width="3*" /> 
      <ColumnDefinition Width="2*" /> 
     </Grid.ColumnDefinitions> 
     <Button BorderThickness="0" Background="LightBlue" Click="Button_Click_Pane" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> 
      <Button.Content> 
       <TextBlock Text="&#xE700;" FontFamily="Segoe MDL2 Assets" FontSize="24" /> 
      </Button.Content> 
     </Button> 
     <Button BorderThickness="0" Background="Transparent" Click="Button_Click_Back" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> 
      <Button.Content> 
       <TextBlock Text="&#xE72B;" FontFamily="Segoe MDL2 Assets" FontSize="24" /> 
      </Button.Content> 
     </Button> 
     <TextBlock FontSize="24" Grid.Column="2" x:Name="title" VerticalAlignment="Center" Text="{Binding ElementName=listmenu, Path=SelectedItem.MenuText}" /> 
     <CommandBar Grid.Column="3" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="{Binding ElementName=title, Path=Text, Converter={StaticResource visiblecvt}}"> 
      <CommandBar.Content> 
       <Grid /> 
      </CommandBar.Content> 
      <AppBarButton Icon="Accept" FontSize="24" Label="Accept" /> 
      <AppBarButton Icon="Cancel" FontSize="24" Label="Cancel" /> 
     </CommandBar> 
     <AutoSuggestBox Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Stretch" IsSuggestionListOpen="True" /> 
    </Grid> 
    <SplitView Grid.Row="1" x:Name="RootSpiltView" OpenPaneLength="300" CompactPaneLength="50" DisplayMode="CompactOverlay"> 
     <SplitView.Pane> 
      <ListView x:Name="listmenu" ItemsSource="{x:Bind menu}" SelectionChanged="ListView_SelectionChanged"> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <StackPanel Orientation="Horizontal"> 
          <TextBlock Text="{Binding MenuIcon}" FontFamily="Segoe MDL2 Assets" FontSize="24" VerticalAlignment="Center" /> 
          <TextBlock Text="{Binding MenuText}" Margin="15" VerticalAlignment="Center" /> 
         </StackPanel> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView> 
     </SplitView.Pane> 
     <SplitView.Content> 
      <Frame x:Name="splitviewContent" Navigated="splitviewContent_Navigated" /> 
     </SplitView.Content> 
    </SplitView> 
</Grid> 

Code hinter:

private ObservableCollection<NavigationItem> menu = new ObservableCollection<NavigationItem>(); 

public MainPage() 

{ 
    this.InitializeComponent(); 
    this.Loaded += MainPage_Loaded; 
} 

protected override void OnNavigatedTo(NavigationEventArgs e) 
{ 
    menu.Clear(); 
    menu.Add(new NavigationItem { PageLink = typeof(Page1), MenuText = typeof(Page1).Name, MenuIcon = "\xE715" }); 
    menu.Add(new NavigationItem { PageLink = typeof(Page2), MenuText = typeof(Page2).Name, MenuIcon = "\xE716" }); 
    menu.Add(new NavigationItem { PageLink = typeof(Page3), MenuText = typeof(Page3).Name, MenuIcon = "\xE722" }); 
    menu.Add(new NavigationItem { PageLink = typeof(Page4), MenuText = typeof(Page4).Name, MenuIcon = "\xE72D" }); 
} 

private void MainPage_Loaded(object sender, RoutedEventArgs e) 
{ 
    listmenu.SelectedIndex = 0; 
} 

private void Button_Click_Pane(object sender, RoutedEventArgs e) 
{ 
    this.RootSpiltView.IsPaneOpen = !this.RootSpiltView.IsPaneOpen; 
} 

private void Button_Click_Back(object sender, RoutedEventArgs e) 
{ 
    if (splitviewContent.CanGoBack) 
    { 
     splitviewContent.GoBack(); 
    } 
} 

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    var naviitem = listmenu.SelectedItem as NavigationItem; 
    splitviewContent.Navigate(naviitem.PageLink); 
} 

private void splitviewContent_Navigated(object sender, NavigationEventArgs e) 
{ 
    var page = splitviewContent.CurrentSourcePageType.Name; 
    switch (page) 
    { 
     case "Page1": 
      listmenu.SelectedIndex = 0; 
      break; 

     case "Page2": 
      listmenu.SelectedIndex = 1; 
      break; 

     case "Page3": 
      listmenu.SelectedIndex = 2; 
      break; 

     case "Page4": 
      listmenu.SelectedIndex = 3; 
      break; 
    } 
} 

Die NavigationItem Klasse und zwei Konverter:

public class NavigationItem 
{ 
    public string MenuIcon { get; set; } 
    public string MenuText { get; set; } 
    public Type PageLink { get; set; } 
} 


public class BoolToVisiableConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     var text = (string)value; 
     if (text == "Page1") 
     { 
      return Visibility.Visible; 
     } 
     return Visibility.Collapsed; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
} 


public class BackgroundConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     var text = (string)value; 
     if (text == "Page1") 
     { 
      return "#FFFFC0CB"; 
     } 
     return "#00000000"; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
} 

ich nicht auf der offiziellen XAML folgte Navigation Beispiel, um diesen Code zu schreiben, hier mein Beispiel rendert so:

@Henk Holtermans Kommentar macht auch Sinn. Im offiziellen Beispiel ist der Titel Teil des Seiteninhalts. Für eine andere Seite kann der Titel eine andere Größe haben. Aber in der Wetter App ist der Titel vom Inhalt getrennt, so dass es leicht zu erreichen ist.