Как скрыть верхнюю часть меню гамбургера в примере навигации XAML?

Question

В Windows UWP XAML Navigation sample из git-хаба, как вы можете скрыть самую верхнюю часть выпадающего меню гамбургера, которая скрывает заголовок раздела?

В настоящее время это делает так, что есть полоса, которая скрывает заголовок раздела страницы.

Как я могу заставить его выглядеть? Поэтому заголовок раздела не скрывается, когда я открываю меню.

Я пытался играть с г-индекса заголовка страницы, но это не имело никакого эффекта. Меню гамбургера всегда делает сверху все остальное.

Answer 1

Просто проверьте приложение погоды Microsoft для окон 10, я думаю, что это больше похоже на область из элемента управления SplitView, которая должна удерживаться как «кнопка гамбургера», «кнопка« назад »,« командная строка »и« кнопка «гамбургер», AutoSuggestBox».

Здесь я написал образец:

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

код позади:

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

NavigationItem класс и два преобразователя:

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(); 
    } 
} 

я не следовал на официальном языке XAML Навигационный пример, чтобы написать этот код, здесь мой пример выглядит следующим образом:

@ Замечание Хенка Холтермана также имеет смысл. В официальной выборке заголовок является частью содержимого страницы. Для другой страницы название может иметь разный размер. Но в приложении «Погода» заголовок отделен от содержимого, поэтому его будет легко достичь.