TitleBar is an important part of an UWP app. Basically you can customize its background and foreground color making it consistent with your app's theme color. However, some apps may forget to change the hover and pressed color, which makes it weird.

By customizing TitleBar's color, your app should looks neat, but what if you can make it more different?

Here is some apps' TitleBars:

And here is some others:

There is no doubt that embedding TitleBar into your apps makes it different and importantly stand out from other apps. Fortunately, there is no magic on doing this. Microsoft provides developers APIs to implement embed TitleBar.

Coding time

You should know that by saying embedding TitleBar, I mean it visually. TitleBar is still alive and what I am going to do is REPLACE it with my customized one.

First of all, you should new a UserControl, which is the replacement of TitleBar. Let's name it EmptyTitleControl, and its main XAML code is shown below:

<UserControl x:Class="UC.EmptyTitleControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">

    <Grid Height="32"
          VerticalAlignment="Top"
          Background="Transparent" />
</UserControl>

It's quite simple, and make sure the gird has a background brush.

Then in your page's OnNavigatedTo override method(or constructor), place this code:

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

var titleBarUC = new EmptyTitleControl();
(this.Content as Grid).Children.Add(titleBarUC);
 
Window.Current.SetTitleBar(titleBarUC);

That's it. The code below

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

extend the page's content into TitleBar so that the title bar can overlap the page's content. In addition, make sure the UserControl you create at the top of the page's content, otherwise you cannot move the app window by manipulating the TitleBar.

Note that there are three stubborn buttons which can't be overridden by you: minimize, maximize and close button. It is reasonable because they play the key roles in letting users control the app window.

Further Customization

Since you are enable to embed your own UserControl(or you can create a custom control), you can customize your title bar in further, like adding back button to provide the way to going back between pages, adding full-screen button to toggle full screen in your video app. It's all up to you.