我正在为我正在进行的 UWP 项目试验 NavigationView。我已经自定义了 NavigationView MenuItem 窗格，因此它只有图标，没有菜单（汉堡包）和后退按钮。为此，我设置了 NavigationView 的以下属性
IsBackButtonVisible="Collapsed"
PaneDisplayMode="LeftCompact"
IsPaneToggleButtonVisible="False"
我还通过自定义 HeaderTemplate 自定义了 NavigationView 标头。这完全符合我的要求。
但我找不到任何帮助将 NavigationView 标题重叠到 MenuItem 窗格。
下面的 sn-p 将有助于理解我的要求
我希望我的标题（黑色背景）位于 MenuItem 窗格的顶部（灰色背景）。
任何帮助将不胜感激。谢谢
【问题讨论】：
标签： uwp navigationview
如果要将标题放在 MenuItem 窗格的顶部，则需要在 NavigationView 的样式中重新布局。在其样式中，有一个名为HeaderContent的ContentControl，代表NavigationView的Header，放在RootGrid中而不是ContentGrid中。例如：
.xaml:
<Page.Resources>
<Style x:Key="NavigationViewStyle1" TargetType="NavigationView">
<Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="NavigationView">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DisplayModeGroup">
<VisualState x:Name="Compact"/>
<VisualState x:Name="Expanded">
<VisualState.Setters>
<Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Minimal">
<VisualState.Setters>
<Setter Target="HeaderContent.Margin" Value="48,5,0,0"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="TopNavigationMinimal"/>
<VisualState x:Name="MinimalWithBackButton">
<VisualState.Setters>
<Setter Target="HeaderContent.Margin" Value="104,5,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="TogglePaneGroup">
<VisualState x:Name="TogglePaneButtonVisible"/>
<VisualState x:Name="TogglePaneButtonCollapsed">
<VisualState.Setters>
<Setter Target="PaneContentGridToggleButtonRow.Height" Value="4"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderGroup">
<VisualState x:Name="HeaderVisible"/>
<VisualState x:Name="HeaderCollapsed">
<VisualState.Setters>
<Setter Target="HeaderContent.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SettingsGroup">
<VisualState x:Name="SettingsVisible"/>
<VisualState x:Name="SettingsCollapsed">
<VisualState.Setters>
<Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed"/>
<Setter Target="SettingsTopNavPaneItem.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="AutoSuggestGroup">
<VisualState x:Name="AutoSuggestBoxVisible"/>
<VisualState x:Name="AutoSuggestBoxCollapsed">
<VisualState.Setters>
<Setter Target="AutoSuggestArea.Visibility" Value="Collapsed"/>
<Setter Target="TopPaneAutoSuggestArea.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="PaneStateGroup">
<VisualState x:Name="NotClosedCompact"/>
<VisualState x:Name="ClosedCompact">
<VisualState.Setters>
<Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed"/>
<Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="PaneStateListSizeGroup">
<VisualState x:Name="ListSizeFull"/>
<VisualState x:Name="ListSizeCompact">
<VisualState.Setters>
<Setter Target="MenuItemsHost.HorizontalAlignment" Value="Left"/>
<Setter Target="MenuItemsHost.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<Setter Target="SettingsNavPaneItem.HorizontalAlignment" Value="Left"/>
<Setter Target="SettingsNavPaneItem.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<Setter Target="PaneTitleTextBlock.Visibility" Value="Collapsed"/>
<Setter Target="PaneHeaderContentBorder.Visibility" Value="Collapsed"/>
<Setter Target="PaneCustomContentBorder.HorizontalAlignment" Value="Left"/>
<Setter Target="PaneCustomContentBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left"/>
<Setter Target="FooterContentBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="TitleBarVisibilityGroup">
<VisualState x:Name="TitleBarVisible"/>
<VisualState x:Name="TitleBarCollapsed">
<VisualState.Setters>
<Setter Target="PaneContentGrid.Margin" Value="0,32,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="OverflowLabelGroup">
<VisualState x:Name="OverflowButtonWithLabel"/>
<VisualState x:Name="OverflowButtonNoLabel">
<VisualState.Setters>
<Setter Target="TopNavOverflowButton.Style" Value="{ThemeResource NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BackButtonGroup">
<VisualState x:Name="BackButtonVisible"/>
<VisualState x:Name="BackButtonCollapsed">
<VisualState.Setters>
<Setter Target="BackButtonPlaceholderOnTopNav.Width" Value="0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="PaneToggleButtonGrid" HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Canvas.ZIndex="100">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="TogglePaneTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<Grid x:Name="ButtonHolderGrid" Grid.Row="1">
<Button x:Name="NavigationViewBackButton" IsEnabled="{TemplateBinding IsBackEnabled}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.BackButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<ToolTipService.ToolTip>
<ToolTip x:Name="NavigationViewBackButtonToolTip"/>
</ToolTipService.ToolTip>
</Button>
<Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Style="{TemplateBinding PaneToggleButtonStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.PaneToggleButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<TextBlock x:Name="PaneTitleTextBlock" Grid.Column="0" HorizontalAlignment="Left" Style="{StaticResource NavigationViewItemHeaderTextStyle}" Text="{TemplateBinding PaneTitle}" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TopNavArea" Background="{ThemeResource NavigationViewTopPaneBackground}" HorizontalAlignment="Stretch" Grid.Row="0" VerticalAlignment="Top" XYFocusKeyboardNavigation="Enabled" Canvas.ZIndex="1">
<Grid x:Name="TopNavTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{Binding TemplateSettings.TopPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" Visibility="{Binding TemplateSettings.TopPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="48" Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="TopNavLeftPadding" Grid.Column="1" Width="0"/>
<ContentControl x:Name="PaneHeaderOnTopPane" Grid.Column="2" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
<NavigationViewList x:Name="TopNavMenuItemsHost" Grid.Column="3" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Disabled" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" AutomationProperties.LandmarkType="Navigation" SelectionMode="Single" SingleSelectionFollowsFocus="{Binding TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<NavigationViewList.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</NavigationViewList.ItemsPanel>
<NavigationViewList.ItemContainerTransitions>
<TransitionCollection/>
</NavigationViewList.ItemContainerTransitions>
</NavigationViewList>
<Button x:Name="TopNavOverflowButton" Content="More" Grid.Column="4" Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}" Visibility="{Binding TemplateSettings.OverflowButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Button.Flyout>
<Flyout Placement="Bottom" ShouldConstrainToRootBounds="False">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Padding" Value="0,8"/>
<Setter Property="Margin" Value="0,-4,0,0"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<NavigationViewList x:Name="TopNavMenuItemsOverflowHost" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" SingleSelectionFollowsFocus="False">
<NavigationViewList.ItemContainerTransitions>
<TransitionCollection/>
</NavigationViewList.ItemContainerTransitions>
</NavigationViewList>
</Flyout>
</Button.Flyout>
</Button>
<ContentControl x:Name="PaneCustomContentOnTopPane" Grid.Column="5" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
<Grid x:Name="TopPaneAutoSuggestArea" Grid.Column="6" Height="{ThemeResource NavigationViewTopPaneHeight}">
<ContentControl x:Name="TopPaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" MinWidth="48" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
</Grid>
<ContentControl x:Name="PaneFooterOnTopPane" Grid.Column="7" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
<NavigationViewItem x:Name="SettingsTopNavPaneItem" Grid.Column="8" Icon="Setting" Style="{ThemeResource NavigationViewSettingsItemStyleWhenOnTopPane}"/>
</Grid>
<Border x:Name="TopNavContentOverlayAreaGrid" Child="{TemplateBinding ContentOverlay}"/>
</StackPanel>
<ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalContentAlignment="Stretch" IsTabStop="False" MinHeight="{StaticResource PaneToggleButtonHeight}" Grid.Row="1" Style="{StaticResource NavigationViewTitleHeaderContentControlTextStyle}" VerticalContentAlignment="Stretch"/>
<SplitView x:Name="RootSplitView" Background="{TemplateBinding Background}" CompactPaneLength="{TemplateBinding CompactPaneLength}" DisplayMode="Inline" IsTabStop="False" IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenPaneLength="{TemplateBinding OpenPaneLength}" PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}" Grid.Row="2">
<SplitView.Pane>
<Grid x:Name="PaneContentGrid" Visibility="{Binding TemplateSettings.LeftPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
<RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="8"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="8"/>
</Grid.RowDefinitions>
<Grid x:Name="ContentPaneTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<Grid Height="{StaticResource PaneToggleButtonHeight}" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl x:Name="PaneHeaderContentBorder" Grid.Column="1" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
</Grid>
<Grid x:Name="AutoSuggestArea" Height="{ThemeResource NavigationViewTopPaneHeight}" Grid.Row="3" VerticalAlignment="Center">
<ContentControl x:Name="PaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}" VerticalContentAlignment="Center"/>
<Button x:Name="PaneAutoSuggestButton" Style="{ThemeResource NavigationViewPaneSearchButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
</Grid>
<ContentControl x:Name="PaneCustomContentBorder" HorizontalContentAlignment="Stretch" IsTabStop="False" Grid.Row="4" VerticalContentAlignment="Stretch"/>
<NavigationViewList x:Name="MenuItemsHost" HorizontalAlignment="Stretch" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" Margin="0,0,0,20" Grid.Row="6" SelectionMode="Single" SelectedItem="{TemplateBinding SelectedItem}" SingleSelectionFollowsFocus="{Binding TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<ContentControl x:Name="FooterContentBorder" HorizontalContentAlignment="Stretch" IsTabStop="False" Grid.Row="7" VerticalContentAlignment="Stretch"/>
<NavigationViewItem x:Name="SettingsNavPaneItem" Icon="Setting" Grid.Row="8"/>
</Grid>
</SplitView.Pane>
<Grid x:Name="ContentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="ContentTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{Binding TemplateSettings.LeftPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<ContentPresenter Content="{TemplateBinding Content}" AutomationProperties.LandmarkType="Main" Grid.Row="1"/>
</Grid>
</SplitView>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<NavigationView Style="{StaticResource NavigationViewStyle1}" ......>
......
</NavigationView>
</Grid>
【讨论】：