Visual Studio 2017: Display the title of a UWP application containing a NavigationView and an acrylic design extended to the title bar

[Mani035]

Hello,

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>



<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/>
</Grid.ColumnDefinitions>
<TextBlock Text="Mes Projets"
Grid.Column="1"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="10,0,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>
<TextBlock x:Name="appTitle"
Style="{StaticResource TitleTextBlockStyle}"
Grid.Column="1"
FontSize="28"
VerticalAlignment="Top"
x:Uid="MainPageTitre"/>
</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>
</Page>


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 to whoever can help me.

Continue reading...