XAMLナビゲーションサンプルでハンバーガーメニューの上部を隠す方法は？

Question

git hubのWindows UWP XAML Navigation sampleでは、セクションタイトルを覆い隠すハンバーガーメニューフライアウトの最上部を隠すことができますか？

現在、このようにレンダリングされているため、ページのセクションタイトルを隠すストリップがあります。私はそれがこのように見えるように取得できますか

？私がメニューを開くと、セクションのタイトルが不明瞭にならないようにします。

私は、ページヘッダのzインデックスで遊んでみましたが、それは効果がなかったです。ハンバーガーメニューは、常に他のものの上に表示されます。

Answer 1

ウィンドウズ10のMicrosoft天気予報アプリをチェックすると、「ハンバーガーボタン」、「戻るボタン」、「コマンドバー」、「コマンドバー」のように保持される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> 

コード：私は公式のXAMLに従わなかった

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

：

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クラスと2つのコンバータこのコードを作成するナビゲーションサンプル、ここで私のサンプルレンダリング：

@Henk Holtermanのコメントも意味があります。公式のサンプルでは、​​タイトルはページコンテンツの一部です。別のページでは、タイトルのサイズが異なる場合があります。しかし、天気アプリでは、タイトルはコンテンツから分離されているため、簡単に達成できます。