My UWP app has a NavigationView and uses Fluent Design with extended acrylic in the title bar. So you have to draw the application title yourself, which normally appears automatically in the title bar, with a TextBlock control using CaptionTextBlockStyle. I tried to apply the example provided by Microsoft here But unfortunately this example does not take into account the extended acrylic in the title bar. Below the modified XAML code:
<Page
x:Class="MesProjets.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MesProjets"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<Page.Resources>
<ImageBrush x:Key="imagefond"
ImageSource="/Assets/Images/Wallpaper.png"
Stretch="UniformToFill"/>
<Style TargetType="NavigationView">
<Setter Property="Foreground" Value="White" />
</Style>
</Page.Resources>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.Resources>
<AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="DarkOliveGreen"
TintOpacity="0.6"
FallbackColor="DarkGray"/>
<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="DarkOliveGreen"
TintOpacity="0.6"
FallbackColor="DarkGray"/>
<SolidColorBrush x:Key="NavigationViewItemForeground" Color="White"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver" Color="White"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="GreenYellow"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="White"/>
<SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="GreenYellow"/>
</Grid.Resources>
<!--<TextBlock Text="Mes Projets"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="0,8,0,0"/>-->
<!--<Grid x:Name="AppTitleBar" Background="Transparent">
--><!--Width of the padding columns is set in LayoutMetricsChanged handler.
Using padding columns instead of Margin ensures that the background
paints the area under the caption control buttons (for transparent buttons).--><!--
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
--><!--<Image Source="Assets/Square44x44Logo.png"
Grid.Column="1" HorizontalAlignment="Left"
Width="20" Height="20" Margin="12,0"/>--><!--
<TextBlock Text="Mes Projets"
Grid.Column="1"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="10,8,0,0"/>
</Grid>-->
<NavigationView x:Name="NavViewMain"
PaneTitle=" Mes Projets"
Margin="0,0,0,0" Grid.Row="1"
Loaded="NavViewMain_Loaded"
SelectionChanged="NavViewMain_SelectionChanged"
ItemInvoked="NavViewMain_ItemInvoked"
CompactModeThresholdWidth="0"
ExpandedModeThresholdWidth="1000"
OpenPaneLength="250"
FontSize="24"
IsSettingsVisible="{Binding ElementName=settingsCheck,Path=IsChecked}" IsTabStop="False"
IsBackButtonVisible="Collapsed"
>
<NavigationView.HeaderTemplate>
<DataTemplate>
<!--<Grid Margin="100,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
-->
<!--<ColumnDefinition/>-->
<!--
</Grid.ColumnDefinitions>-->
<TextBlock x:Name="appTitle"
Style="{StaticResource TitleTextBlockStyle}"
Grid.Column="1"
FontSize="28"
VerticalAlignment="Top"
x:Uid="MainPageTitre"/>
<!--</Grid>-->
</DataTemplate>
</NavigationView.HeaderTemplate>
<NavigationView.MenuItems>
<NavigationViewItem Icon="Library" Tag="ListeProjets_Page" >
<TextBlock Tag="Nav_ListeProjets" x:Uid="NVItem1" />
</NavigationViewItem>
<NavigationViewItem Icon="Library" Tag="ProjetsPrevus_Page" >
<TextBlock Tag="Nav_ProjetsPrevus" x:Uid="NVItem2" />
</NavigationViewItem>
<NavigationViewItem Icon="Library" Tag="ProjetsEnCours_Page" >
<TextBlock Tag="Nav_ProjetsEnCours" x:Uid="NVItem3" />
</NavigationViewItem>
<NavigationViewItem Icon="Library" Tag="ProjetsRealises_Page" >
<TextBlock Tag="Nav_ProjetsRealises" x:Uid="NVItem4" />
</NavigationViewItem>
<NavigationViewItemSeparator/>
<NavigationViewItem Icon="XboxOneConsole" Tag="ListeMonnaies_Page" >
<TextBlock Tag="Nav_ListeMonnaies" x:Uid="NVItem5" />
</NavigationViewItem>
<NavigationViewItem Icon="Save" Tag="Backup_Page" >
<TextBlock Tag="Nav_Backup" x:Uid="NVItem6" />
</NavigationViewItem>
<NavigationViewItem Icon="Help" Tag="Aide_Page" >
<TextBlock Tag="Nav_Aide" x:Uid="NVItem7" />
</NavigationViewItem>
</NavigationView.MenuItems>
<Frame x:Name="contentFrame">
</Frame>
</NavigationView>
</Grid>
The result is that the title of the application appears in the upper left, but in a title bar that should not normally exist. How do I get the same result we have with the Calendar app? Thanks for your help.
NavigationView is an integrated combination control, if you want to add a TextBlock on the PaneToggleButton, you can only modify the template of the NavigationView.
This is an example:
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;
}
In a grid called PaneToggleButtonGrid, we added a TextBlock to display the app title. In addition, we need to add some status effects. In <VisualStateGroup x:Name="PaneStateGroup">, we added code that controls AppTitle visibility and some UI handling.
BTW, if you need some more complicated effects, such as dynamically changing the value of AppTitle, then you can try to use SplitView and Frame to build a
custom NavigationView to meet your needs.
Best regards.