How to set App title in Winui3 desktop app

Question

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";
          
        }
    }

Answer 1

If you want to set only the title instead of WinUI Desktop to something else, then you can do it in MainWindow.xaml.cs file as follows

public MainWindow()
{
      this.InitializeComponent();
      Title = $"App name";
}

Title shows in the XAML IntelliSense for Window, but setting it in XAML causes an error. Set this property in code instead.