Extending the app’s Title Bar – How to place custom XAML in the Windows Universal app’s Title Bar ?

In one of our previous post you have learned how to apply custom color to the Title Bar in Windows 10 Universal Apps ?  Here, in this quick tip you let see how we can extend the existing title bar itself  by placing custom XAML content in the app window’s title bar.  There are set of APIs by which achieve this and of course just by following only few steps.

Here is simple diagram that illustrate how you can apply the custom xaml content in your app’s title bar.

Let’s have a look into the each steps

Step 1 :  first of all you need to set ExtendViewIntoTitleBar property to true for the current title bar.

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

This will hide the default title bar and then would allow your app to plug in a new title bar.

Step 2: In the next step, define your XAML element which you would like to apply for your app. This is nothing but a simple xaml content panel with the element that you wanted to have in the title bar. Make sure you have a name given for the panel; in this case we named it as “extendedTitleBar”

Step 3 : Call the Window.SetTitleBar() and pass the defined panel name.

Window.Current.SetTitleBar(extendedTitleBar);

That’s All. Run the app. You will find your app with new look with different title bar !!

Here is complete code block.

public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
Window.Current.SetTitleBar(extendedTitleBar);
}
}
}

Hope this helps. To know more about this, you can refer to this