NavigationView是集成组合控件,如果要在PaneToggleButton上添加TextBlock,只能修改NavigationView的模板。
这是一个例子:
xaml
<Style TargetType="NavigationView">
<Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Foreground" Value="White"/>
<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.Setters>
<Setter Target="AppTitle.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
<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="AppTitle.Visibility" Value="Collapsed"/>
<Setter Target="PaneToggleButtonGrid.Padding" Value="0,25,0,0"/>
<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" />
<!-- This is essentially a TemplateBinding: -->
<Setter Target="MenuItemsHost.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
<Setter Target="SettingsNavPaneItem.HorizontalAlignment" Value="Left" />
<Setter Target="SettingsNavPaneItem.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
<Setter Target="PaneTitleTextBlock.Visibility" Value="Collapsed" />
<Setter Target="PaneHeaderContentBorder.Visibility" Value="Collapsed" />
<Setter Target="PaneCustomContentBorder.HorizontalAlignment" Value="Left" />
<Setter Target="PaneCustomContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
<Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left" />
<Setter Target="FooterContentBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
</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"
Margin="0,0,0,8"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Canvas.ZIndex="100">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock
Style="{StaticResource CaptionTextBlockStyle}"
Margin="10,5" x:Name="AppTitle"
VerticalAlignment="Center"
Text="MainPageTitre"/>
<Grid x:Name="TogglePaneTopPadding"
Grid.Row="1"
/>
<Grid x:Name="ButtonHolderGrid" Grid.Row="2">
<Button
x:Name="NavigationViewBackButton"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.BackButtonVisibility}"
IsEnabled="{TemplateBinding IsBackEnabled}">
<ToolTipService.ToolTip>
<ToolTip x:Name="NavigationViewBackButtonToolTip" />
</ToolTipService.ToolTip>
</Button>
<Button
x:Name="TogglePaneButton"
Style="{TemplateBinding PaneToggleButtonStyle}"
AutomationProperties.LandmarkType="Navigation"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}"
VerticalAlignment="Top">
<TextBlock
x:Name="PaneTitleTextBlock"
Grid.Column="0"
Text="{TemplateBinding PaneTitle}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{StaticResource NavigationViewItemHeaderTextStyle}"/>
</Button>
</Grid>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="TopNavArea" Background="{ThemeResource NavigationViewTopPaneBackground}" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Canvas.ZIndex="1" XYFocusKeyboardNavigation="Enabled">
<Grid x:Name="TopNavTopPadding"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}"/>
<Grid x:Name="TopNavGrid"
Height="{ThemeResource NavigationViewTopPaneHeight}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPaneVisibility}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" MinWidth="48" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid
x:Name="TopNavLeftPadding"
Grid.Column="1"
Width="0"/>
<ContentControl
x:Name="PaneHeaderOnTopPane"
IsTabStop="False"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Column="2"/>
<!-- Top nav list -->
<NavigationViewList AutomationProperties.LandmarkType="Navigation" x:Name="TopNavMenuItemsHost" Grid.Column="3" SelectionMode="Single" IsItemClickEnabled="True" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerTransitions>
<TransitionCollection />
</ListView.ItemContainerTransitions>
</NavigationViewList>
<Button
x:Name="TopNavOverflowButton"
Grid.Column="4"
Content="More"
Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OverflowButtonVisibility}">
<Button.Flyout>
<Flyout Placement="Bottom" ShouldConstrainToRootBounds="False">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Padding" Value="0,8" />
<!-- Set negative top margin to make the flyout align exactly with the button -->
<Setter Property="Margin" Value="0,-4,0,0" />
</Style>
</Flyout.FlyoutPresenterStyle>
<NavigationViewList x:Name="TopNavMenuItemsOverflowHost" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" SingleSelectionFollowsFocus="False" IsItemClickEnabled="True">
<ListView.ItemContainerTransitions>
<TransitionCollection />
</ListView.ItemContainerTransitions>
</NavigationViewList>
</Flyout>
</Button.Flyout>
</Button>
<ContentControl
x:Name="PaneCustomContentOnTopPane"
IsTabStop="False"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Column="5"/>
<Grid
x:Name="TopPaneAutoSuggestArea"
Height="{ThemeResource NavigationViewTopPaneHeight}"
Grid.Column="6">
<ContentControl
x:Name="TopPaneAutoSuggestBoxPresenter"
Margin="12,0,12,0"
MinWidth="48"
IsTabStop="False"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"/>
</Grid>
<ContentControl
x:Name="PaneFooterOnTopPane"
IsTabStop="False"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Column="7" />
<NavigationViewItem x:Name="SettingsTopNavPaneItem" Style="{ThemeResource NavigationViewSettingsItemStyleWhenOnTopPane}" Grid.Column="8" Icon="Setting" />
</Grid>
<Border
x:Name="TopNavContentOverlayAreaGrid"
Child="{TemplateBinding ContentOverlay}" />
</StackPanel>
<SplitView
x:Name="RootSplitView"
Background="{TemplateBinding Background}"
CompactPaneLength="{TemplateBinding CompactPaneLength}"
DisplayMode="Inline"
IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
IsTabStop="False"
OpenPaneLength="{TemplateBinding OpenPaneLength}"
PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}"
Grid.Row="1">
<SplitView.Pane>
<Grid
x:Name="PaneContentGrid"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="0" />
<!-- above button margin + back button space -->
<RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="8" />
<!-- above list margin -->
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="8" />
</Grid.RowDefinitions>
<Grid x:Name="ContentPaneTopPadding"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"/>
<Grid Grid.Row="2" Height="{StaticResource PaneToggleButtonHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl
x:Name="PaneHeaderContentBorder"
IsTabStop="False"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Column="1" />
</Grid>
<Grid
x:Name="AutoSuggestArea"
Grid.Row="3"
Height="{ThemeResource NavigationViewTopPaneHeight}"
VerticalAlignment="Center">
<ContentControl
x:Name="PaneAutoSuggestBoxPresenter"
Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}"
IsTabStop="False"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"/>
<Button
x:Name="PaneAutoSuggestButton"
Visibility="Collapsed"
Style="{ThemeResource NavigationViewPaneSearchButtonStyle}"
Width="{TemplateBinding CompactPaneLength}"/>
</Grid>
<ContentControl
x:Name="PaneCustomContentBorder"
IsTabStop="False"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Row="4" />
<!-- Left nav list -->
<NavigationViewList x:Name="MenuItemsHost" Grid.Row="6" Margin="0,0,0,20" SelectionMode="Single" IsItemClickEnabled="True" HorizontalAlignment="Stretch" SelectedItem="{TemplateBinding SelectedItem}" ItemTemplate="{TemplateBinding MenuItemTemplate}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}" />
<ContentControl
x:Name="FooterContentBorder"
IsTabStop="False"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Grid.Row="7" />
<NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="8" Icon="Setting" />
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid x:Name="ContentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="ContentTopPadding"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}"/>
<ContentControl
x:Name="HeaderContent"
Grid.Row="1"
MinHeight="{StaticResource PaneToggleButtonHeight}"
IsTabStop="False"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Style="{StaticResource NavigationViewTitleHeaderContentControlTextStyle}"/>
<ContentPresenter
AutomationProperties.LandmarkType="Main"
Grid.Row="2"
Content="{TemplateBinding Content}"/>
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
xaml.cs
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
}
在名为PaneToggleButtonGrid 的网格中,我们添加了TextBlock 来显示应用标题。此外,我们还需要添加一些状态效果。在<VisualStateGroup x:Name="PaneStateGroup"> 中,我们添加了控制AppTitle 可见性和一些UI 处理的代码。
BTW,如果你需要一些更复杂的效果,比如动态改变AppTitle的值,那么你可以尝试使用SplitView和Frame构建一个
自定义NavigationView 以满足您的需求。
最好的问候。