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

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.

Set Custom XAML Content in Title Bar
Set Custom XAML Content in Title Bar

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

 

Set Custom XAML Content in Title Bar Steps
Set Custom XAML Content in Title Bar Steps

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”

image

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 !!

Set Custom XAML Content in Title Bar
Set Custom XAML Content in 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

Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.

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

  1. One thing to add to this: It would be a good idea to add an adaptive trigger that disables this when the app is running full-screen (ie on phone, tablet mode or on IoT)

Comments are closed.