How to set TitleBar Icon in UWP?

Question

How to set up icon to TitleBar(Window) in UWP?

Example of TitleBar Icon:

Answer 1

We can customize title bar to set up TitleBar Icon. The key point here is using Window.SetTitleBar method. Following is a simple sample:

Firstly, we need a UIElement as the new title bar. For example, in MainPage.xaml we can add a Grid and in the grid, set the icon and application name. Please note that we need 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 following code to set the new title bar with 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 info, you can refer to the official Title bar sample on GitHub, especially scenario 2: Custom drawing in the sample.