UWP implements custom title bar and uwp custom title bar

UWP implements custom title bar and uwp custom title bar
UWP implements custom title bar 0x00 cause

In UWP development, sometimes we want to customize the title bar, such as adding a control such as a search box or a button to the title bar. I found a document about this topic on a Japanese Website:

Http://www.atmarkit.co.jp/ait/articles/1510/14/news022.html

After reading this article, I want to translate it and share it. But in some cases, I am not very clear about it, so I have implemented it myself and summarized this article based on my own experiences.

0x01 title bar in UWP

Shows a common UWP window:

 

We can obtain different title bar objects in two ways, with different operation focuses on different objects.

var coreTitleBar = Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar;

In this way, a CoreApplicationViewTitleBar object is obtained, which mainly controls the title bar extension and other related functions. The coreTitleBar behind it refers to this object.

var appTitleBar = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar;

This method is used to obtain an ApplicationViewTitleBar object, which is mainly used to control the background color of the title bar, and to minimize, maximize, and close the color and background color of buttons. The appTitleBar next to it refers to this object.

These two objects will be used when we customize the title bar.

0x02 implement custom title bar

CoreTitleBar has an attribute of ExtendViewIntoTitleBar. Setting it to true allows us to extend the view defined in XAML in the form to the title bar area.

coreTitleBar.ExtendViewIntoTitleBar = true;

After this setting, the original part of the title bar disappears, and our definition tries to extend it, as shown in:

 

It seems that we are a little closer to our target, and the title bar disappears. The Grid we defined in XAML occupies the position of the original title bar, the max, Min, and close buttons on the original appTitleBar are available. If you want to extend an image to the title bar and use it as the background, but we want to add a search bar to the title bar, there are several problems:

The background color of the appTitleBar is inconsistent.

To solve this problem, we need to set the background color of the button on appTitleBar to transparent:

appTitleBar.ButtonBackgroundColor = Colors.Transparent;

After the settings, the form becomes like this:

 

The button background color becomes transparent, but the buttons on the system title bar overlap the search box on the custom title bar. To solve this problem, we can use the SystemOverlayLeftInset and SystemOverlayRightInset attributes on coreTitleBar to indicate the Left and Right distances when coreTitleBar is embedded, we can achieve this by setting the Padding attribute of the custom title bar:

// TitleBar is our own title bar TitleBar. Height = coreTitleBar. Height; TitleBar. Padding = new Thickness (coreTitleBar. SystemOverlayLeftInset, 0, coreTitleBar. systemolayrightinset, 0 );

So when is the setting better? The coreTitleBar has an event called LayoutMetricsChanged. This event is triggered when the page layout changes. For example, if the page is re-laid due to screen rotation, this event is triggered. We can place the settings of the Padding attribute in the title bar in this event. The title bar of the running program after setting is shown in:

 

This seems a lot better, but when I want to enter some content in the search bar, I find that the basic point is not in, and the magnifier button cannot be clicked. I can hold down the search bar and drag the window, it seems that our own title bar is blocked by the system title bar below.

 

This is probably the feeling.

For this problem, we can use the SetTitleBar () method in the Window object to set the text area as the title bar:

Window.Current.SetTitleBar(TitleText);

TitleText is the area of the text control in the Custom title bar. This method sets TitleText as the title bar. The result is that the TitleText control can drag the form and double-click to maximize/restore the form. In this way, other controls that need to receive input do not belong to the title bar and can receive input normally.

In addition, I also considered a method that overlaps two layers of Grid. The underlying layer is set as the title bar through SetTitleBar, and controls that do not need to receive input, such as text and images are placed, the upper layer places controls that need to receive input, such as TextBox, but there is no actual test.

In addition, you can also consider adding a return button to the title bar. The button calls the Frame. GoBack () method and determines whether the return button is displayed based on the Frame. CanGoBack attribute. This is also easy to implement, so we will not describe it.

The final running effect of the program, in which the mobile terminal itself does not display the title bar

0x03 downloads

Https://github.com/durow/TestArea/tree/master/UWPTest/TitleBarTest