How to set App title in Winui3 desktop app

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

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

Upvotes: 1

Answers (3)

Shiva N

Reputation: 166

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.

Upvotes: 5

Roy Li - MSFT

Reputation: 8666

@Nick's answer already shows the correct document that you need to check. But you might need to check the UWP part of it.

To change the text and the background of the Title bar, you will need to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true first. Then you could pass a UIElement you created as the TitleBar. After that, you could change the color of System caption buttons by getting the system title bar that holds these buttons.

MainPage.Xaml:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="32"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid x:Name="AppTitleBar" Background="Red">
   
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <Image Source="Assets/StoreLogo.png" 
       Grid.Column="1"
       HorizontalAlignment="Left"
       Width="16" Height="16"
       Margin="8,0,0,0"/>
        <TextBlock x:Name="AppTitleTextBlock"
           Text="App title" 
           Style="{StaticResource CaptionTextBlockStyle}" 
           Grid.Column="1"
           VerticalAlignment="Center"
           Margin="28,0,0,0"/>
    </Grid>
</Grid>

MainPage.Xaml.cs

 public MainPage()
    {
        this.InitializeComponent();

        var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
        coreTitleBar.ExtendViewIntoTitleBar = true;
        // Set XAML element as a drag region.
        Window.Current.SetTitleBar(AppTitleBar);

        //change color for the caption buttons
        var systemTitleBar = ApplicationView.GetForCurrentView().TitleBar;
        systemTitleBar.ButtonBackgroundColor = Colors.Transparent;
        systemTitleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
        systemTitleBar.ButtonPressedBackgroundColor = Colors.Transparent;
        systemTitleBar.ButtonHoverBackgroundColor = Colors.Transparent;
    }

Upvotes: 1

Nick

Reputation: 5042

Have you tried setting Window.ExtendsContentIntoTitleBar to true?

You might want to check this out: https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3

Upvotes: 1

How to set App title in Winui3 desktop app

Answers (3)

Related Questions