How to set TitleBar icon in UWP?

Question

How to customize icon in TitleBar (Window) in UWP?

Example of a TitleBar icon:

Answer 1

We can customize the title bar to customize the TitleBar icon. The key point here is the Window.SetTitleBar method. The following is a simple example:

First, we need UIElement as a new header line. For example, in MainPage.xaml we can add a Grid , and in the grid - the name and the name of the application. Note that we need to put the "TitleBar" Grid in the first row of the root grid.

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid x:Name="TitleBar"> <Rectangle x:Name="BackgroundElement" Fill="Transparent" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Height="32" Margin="5,0" Source="Assets/StoreLogo.png" /> <TextBlock Grid.Column="1" VerticalAlignment="Center" Text="My Application" /> </Grid> </Grid> </Grid> 

Then in MainPage.xaml.cs we can use the following code to set a new header line with an icon.

 public MainPage() { this.InitializeComponent(); CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true; // Set the BackgroundElement instead of the entire Titlebar grid // so that we can add clickable element in title bar. Window.Current.SetTitleBar(BackgroundElement); } 

For more information, you can refer to the official sample header line on GitHub, especially scenario 2: Custom drawing in the sample.