How to customize the application title bar in Win10 app application development

Win app's customization of the window title bar includes two levels: one is to define only the color of each part of the title, such as the color of the text on the title bar, the background color of the three system buttons (maximized, minimized, off), and so on, the other layer is to extend the visible area of the window directly to the title bar, and of course the three system buttons are reserved. You can also use a UI element to render as a title bar.

First look at the simplest layer, that is, set the color of each part of the title bar.

The Applicationview class represents the current application view-related operation, which exposes a titlebar property that can be accessed to obtain a Applicationviewtitlebar instance. The Applicationviewtitlebar instance's public properties allow you to set the color of each section.

Actually these attributes, you see it's name to know why use, here Old week is just a simple division.

BackgroundColor Foregroundcolor	The background color and foreground color of the title bar. The back color is the color of the title bar, which is the color of the caption text that appears on the title bar.
Inactivebackgroundcolor Inactiveforegroundcolor	The background color of the title bar and the foreground color when the window is inactive. Relative to the property in the previous line, the property in the previous row is the color of the window when it is active.
Buttonbackgroundcolor Buttonforegroundcolor	The background color and foreground color of the three buttons on the right when the window is active.
Buttoninactivebackgroundcolor Buttoninactiveforegroundcolor	The color of the three buttons to the right of the title bar when the window is inactive.
Buttonhoverbackgroundcolor Buttonhoverforegroundcolor	The color of the mouse when it is moved over the button.
Buttonpressedbackgroundcolor Buttonpressedforegroundcolor	The color of the button when it is pressed.

The meaning of the various attributes in the table, old weeks do not say, get a form has been very kind, you know, old week most hate to put a class of members of the table; the old week also hated copying MSDN books.

Next, there is a problem. In fact, the code to set these colors is not difficult to write, focusing on where these custom code should be placed. Because it is the code that customizes the appearance of the current view, note that these settings can only be under the current view, and you will need to reset the appearance if you create a new view. The more reasonable position is to put it in the application-level code. Of course, if you can guarantee that a page is the main page of an application, you can also write to the page's code.

The App class has two places to write, one is within the app's constructor, and has been tested for exceptions here. So, there is only one place available, is the Onlaunch method.

Here's an example, which is tnnd simple, and the code is placed in the Onlaunch method.

Applicationview view = Applicationview.getforcurrentview ();
Applicationviewtitlebar bar = view. TitleBar;
Bar. BackgroundColor = Colors.green;
Bar. Foregroundcolor = Colors.yellow;
Bar. Buttonbackgroundcolor = Colors.darkgoldenrod;
Bar. Buttonforegroundcolor = Colors.darkblue;
Bar. Buttonhoverbackgroundcolor = Colors.lightyellow;
Bar. Buttonhoverforegroundcolor = Colors.pink;
Bar. Buttonpressedbackgroundcolor = Colors.orange;
Bar. Buttonpressedforegroundcolor = Colors.purple;

Yes, very simple, find the corresponding attributes, desperately to assign value on the line. You use the system default color if you do not assign a value to the attribute.

Then look at the results.

One thing you can notice is that when you move the mouse over the Close button, its background is always red, no matter how you change it.

OK, so here's the end of the example, let's see how to extend the viewable area of the application to the title bar.

Again, add the following code to the Onlaunch method of the App class:

Applicationview view = Applicationview.getforcurrentview ();
var bar = view. TitleBar;
Bar. Buttonbackgroundcolor = Colors.blue;
Bar. Buttonforegroundcolor = Colors.white;
Bar. Buttonhoverbackgroundcolor = Colors.skyblue;
Coreapplicationview Coreappview = Coreapplication.getcurrentview ();
Coreappview. Titlebar.extendviewintotitlebar = true;

By Coreapplication.getcurrentview static method, you can get a Coreapplicationview instance that represents the current view, and then, by using the following statement, set Extendviewintotitlebar to True to allow the visual part of the window to expand Show up on the title bar.

Coreappview. Titlebar.extendviewintotitlebar = true;

The results are as shown in the following illustration:

probably sometimes, just expanding to the title bar is not enough, you may want to customize the title bar. The above code has allowed the viewable area to extend to the title bar, and then we just need to define the contents of the custom title bar and then use the window class to customize the title bar.

Now, we design some of the UI for the main page.

<grid background= "#FFD3CA94" >     <Grid.RowDefinitions>          <rowdefinition height= "Auto"/>          <RowDefinition/>     </Grid.RowDefinitions>      <stackpanel name= "Tbar"  background= "#FF916A88"  orientation= "Horizontal" >          <button background= "Blue" >              <symbolicon symbol= "Back"/>          </Button>         <button background= "Green" >             <symbolicon symbol= " Forward "/>         </Button>          &Lt Textblock margin= "16,0,0,0"  verticalalignment= "Center"  text= "My Application"  foreground= "white"  />     </StackPanel>     <textblock text= "my  app " fontsize="  grid.row= "1"/> </Grid>

Then in the page's code, the StackPanel element is used as the title bar.

Public MainPage ()
{this
.    InitializeComponent ();
Window.Current.SetTitleBar (This.tbar);
}

Call the Settitlebar method to set a UI element as the content of the title bar.

The results obtained are as follows: