"Win10 app development" custom app title bar

The Win app's customization of the window title bar includes two levels: one is to define only the colors 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 (maximize, minimize, close), and so on, and the other layer is to extend the visible area of the window directly to the title bar, of You can also use a UI element to render as a title bar.

Let's look at the simplest layer, which is the color of each part of the title bar.

The Applicationview class represents the current application view-related action, which exposes a TitleBar property that accesses the property to a Applicationviewtitlebar instance, The common properties of the Applicationviewtitlebar instance allow you to set the color of each part.

In fact, these properties, you see its name to know what to use, here the old week is just a simple division.

BackgroundColor Foregroundcolor	The background color and foreground color of the title bar. The background color is the colour of the title bar, which is the color of the caption text that appears on the title bar.
Inactivebackgroundcolor Inactiveforegroundcolor	The background and foreground color of the title bar when the window is inactive. The property in the previous row is the color of the window when it is active, relative to the property in the previous row.
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 when the mouse moves over the button.
Buttonpressedbackgroundcolor Buttonpressedforegroundcolor	The color when the button is pressed.

The meaning of the various properties in the table, the old week will not say, get a form out already very kind, you know, the old week most hate to put a class of members of the table; Lao Zhou also hated copying MSDN books.

Next, there is a problem. The code that sets these colors is not hard to write, but the point is where these custom codes should be placed. Because it's the code that customizes the appearance of the current view, note that these settings can only be in the current view, and if you create a new view, you also want to reset the appearance. A reasonable position is placed in the code at the application level. Of course, if you can ensure that a page is the main page of the application, you can also write to the code of the page.

The App class has two places to write, one is within the app's constructor and, after testing, an exception occurs here. So, there is only one place available, is the Onlaunch method .

Here is an example, it is tnnd simple, the code is placed in the Onlaunch method.

            Applicationview view = Applicationview.getforcurrentview ();             = view. titlebar;             = Colors.green;             = Colors.yellow;             = Colors.darkgoldenrod;             = Colors.darkblue;             = Colors.lightyellow;             = Colors.pink;             = Colors.orange;             = Colors.purple;

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

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 .

Well, the above example ends, let's see how to extend the viewable area of the application to the title bar.

Similarly, add the following code to the Onlaunch method in the App class:

            Applicationview view = Applicationview.getforcurrentview ();             var bar = view. titlebar;             = Colors.blue;             = colors.white;             = Colors.skyblue;             = Coreapplication.getcurrentview ();             true;

By Coreapplication.getcurrentview The static method, you can get the Coreapplicationview instance that represents the current view, and set the Extendviewintotitlebar to True by using the following statement, which means that the visible part of the window is allowed to expand Display to the title bar.

            true;

The results are as follows:

There are times when it's not enough to just expand to the title bar, and you might want to customize the title bar. The above code has allowed the viewable area to be extended to the title bar, then we just need to define the contents of the custom title bar and then customize it as the title bar through the window class.

Now, let's design some UI for the main page.

    <GridBackground= "#FFD3CA94">        <grid.rowdefinitions>            <RowDefinitionHeight= "Auto"/>            <RowDefinition/>        </grid.rowdefinitions>        <StackPanelName= "Tbar"Background= "#FF916A88"Orientation= "Horizontal">            <ButtonBackground= "Blue">                <SymboliconSymbol= "Back"/>            </Button>            <ButtonBackground= "Green">                <SymboliconSymbol= "Forward"/>            </Button>            <TextBlockMargin= "16,0,0,0"VerticalAlignment= "Center"Text= "My App"Foreground= "White" />        </StackPanel>        <TextBlockText= "My App"FontSize= "+"Grid.Row= "1"/>    </Grid>

Then in the code of the page, 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 contents of the title bar.

The results are as follows:

OK, it's over, I'm hungry, we're ready to eat.

Sample source Download

"Win10 app development" custom app title bar