How to set App title in Winui3 desktop app

Viewed 22

I'm trying to set the app title bar with app name but it appears at the bottom of title bar.

Title bar image

Instead of title as WinUI Desktop at the top, I want to have My App Title at top. Also how can I change the background colour of the title bar?

Here's my MainPage.xaml code how I'm currently setting title bar

MainPage.xaml

    x:Class="MyProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyProject"
    xmlns:controlpages="using:MyProject"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"    
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar">
           <!-- <Image Source="Images/WindowIcon.png"
                   HorizontalAlignment="Left" 
                   Width="16" Height="16" 
                   Margin="8,0"/> -->
            <TextBlock x:Name="AppTitleTextBlock" Text="App title"
                       TextWrapping="NoWrap"
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>


        <NavigationView  Grid.Row="1" x:Name="nvSample8" 
                        PaneDisplayMode="Left"
                        IsTabStop="False"
                        SelectionChanged="NavigationView_SelectionChanged8"
                        IsPaneOpen="False"
                        >
            <NavigationView.MenuItems>
                <NavigationViewItem Content="Accounts" Icon="Contact" ToolTipService.ToolTip="Accounts" Tag="AccountsPage">
                </NavigationViewItem>
            </NavigationView.MenuItems>
            <Frame x:Name="contentFrame8" />
        </NavigationView>
    </Grid>
</Page>

MainPage.xaml.cs

    {
        public MainPage()
        {
            this.InitializeComponent();
            nvSample8.SelectedItem = nvSample8.MenuItems.OfType<NavigationViewItem>().First();
            AppTitleTextBlock.Text = "My App Title";
          
        }
    }
1 Answers
Related