UWP changes the title bar color, and uwp changes the title bar color.

UWP changes the title bar color, and uwp changes the title bar color.

Have you ever thought about changing the title bar of UWP because it is too ugly? This article may help you beautify the UWP interface and make the title bar of your UWP look better.

 

The code here must be in the MainPage constructor. If you have changed the homepage in the App class, then in the constructor of the homepage, type the Code required for the following tutorial.

First, you need to obtain the object of the title bar.

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

After obtaining the object, you can operate on the title bar.

Change the title bar color as follows

titleBar.BackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);

(0xFF, 0xFF, 0xFF, 0xD0) sets the ARGB value, which is beige (see the UWP application "Initial heart Diary "). If you don't understand it, you can search for it and learn it. The following situations are not described.

If you think the words on the title bar are not good-looking, you can hide them. However, after the author's test, if the foreground color is set to transparent, the text is still black. Therefore, you must set the same color.

titleBar.ForegroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);

After setting

It seems more concise than before.

Of course, you can also set this color when the application is not active. The color is the same here

titleBar.InactiveBackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);titleBar.InactiveForegroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);

 

At this time, the "Three Kings" (minimize, maximize, close) button in the title bar will look ugly, because they are still the original color. Then they need to change their color.

Similar to the title bar, but it must be set in four states: Normal, mouse passing, Mouse clicking (or touch clicking), and inactive.

 

This example is the same as that in the title bar of "Initial heart Diary ".

The normal and inactive statuses have the same background color:

titleBar.ButtonBackgroundColor = titleBar.ButtonInactiveBackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);

When the mouse goes over:

titleBar.ButtonHoverBackgroundColor = Color.FromArgb(0xFF, 0xEF, 0xEF, 0xB0);

When you press (or touch) the mouse:

titleBar.ButtonPressedBackgroundColor = Color.FromArgb(0xFF, 0xDF, 0xDF, 0x90);

 

At this time, the text color on the button is still white, and the color of the text on the button is not clear. We turn the text in four states into black:

titleBar.ButtonForegroundColor = titleBar.ButtonHoverForegroundColor = titleBar.ButtonInactiveForegroundColor = titleBar.ButtonPressedForegroundColor = Colors.Black;

After that, the title bar can be integrated with the app theme color. Let's take a look at the "Initial heart Diary ".

 

 

It looks more concise than the default theme color.

 

Add all the code for the title bar of "Initial heart Diary:

        public MainPage()        {            this.InitializeComponent();            var titleBar = ApplicationView.GetForCurrentView().TitleBar;            titleBar.BackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);            titleBar.ForegroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);            titleBar.InactiveBackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);            titleBar.InactiveForegroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);            titleBar.ButtonBackgroundColor = titleBar.ButtonInactiveBackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xD0);            titleBar.ButtonHoverBackgroundColor = Color.FromArgb(0xFF, 0xEF, 0xEF, 0xB0);            titleBar.ButtonPressedBackgroundColor = Color.FromArgb(0xFF, 0xDF, 0xDF, 0x90);            titleBar.ButtonForegroundColor = titleBar.ButtonHoverForegroundColor = titleBar.ButtonInactiveForegroundColor = titleBar.ButtonPressedForegroundColor = Colors.Black;        }

The code can change the color as needed to suit the theme color of the app.

Note: It must be set in the constructor of the homepage. Otherwise, it does not work.

 

----------------------------------------- Manual demarcation line ------------------------------------------------

 

If your application is only for the desktop, it will be done here.

 

However, if your application is still targeted at the mobile phone end, there will be a small problem: the status bar of the mobile phone is completely white, nothing else, it will affect the appearance.

I have been looking for a long time and there is no solution (maybe there are, but there are too few UWP tutorials), but I think of a good method. Since it cannot be eliminated, let it serve as a foil

 

In this case, the system's taskbar is displayed on the top and transparent to the background. Then I found that this is better than when there are no white lines.

The following can also be used as a tutorial to set the mobile phone status bar transparency

 

First, right-click "Reference" in "solution Resource Manager" and click "add reference ". In "extension" in "Universal Windows", find two references, as shown in.

Overall

After adding the function, open App. xaml. cs, find the OnLaunched function, and add the following code at the beginning of the function:

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))            {                StatusBar statusBar = StatusBar.GetForCurrentView();                statusBar.BackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xC0);                statusBar.ForegroundColor = Colors.Black;                statusBar.BackgroundOpacity = 1;            }

Where (0xFF, 0xFF, 0xFF, 0xC0) is the background of the mobile phone status bar, which is in the beige color to match with the subject color of "Initial Diary"

In addition, you need to add references. You can also use visual studio's powerful prompt function to add

using Windows.UI.ViewManagement;

 

At this point, the mobile phone status bar is also beautified: The system status bar can be displayed all the time, and the background color is the app subject color.

 

This tutorial is based on the "initial care Diary", which can be used by readers. About this software introduction, can refer to the http://bbs.wfun.com/forum.php? Mod = viewthread & tid = 1002379 & page = 4 # pid17167369

 

If you have any questions, please feel free to ask. Personal email wwh8797@qq.com