Win Ten UWP Development series: Setting Appbarbutton icons

Before WP8, the bottom of the page four small circle button is not supported binding, WP8.1 RT, the System button upgraded to Appbarbutton, and support binding. In Win10 UWP development, the style of the button changed, and the outside circle was gone. But the individual still prefers the look of the previous round button ^_^

Like the Metro Studio program, there are hundreds of good-looking buttons to use and can be exported as PNG images. However, it is not recommended to take PNG images, mainly because PNG may be distorted after zooming, preferably using vectors such as font, path, and so on. Here are a few ways to set the Appbarbutton icon.

First create a new UWP project, named Appbarbuttondemo.

First, add Appbarbutton

There are no buttons on the default main page, right-click on MainPage.xaml and edit with blend:

The UWP app Bar and WP8.1 are different, not only below, but also on top. The main setting button is the graphic and text of the button. Here's a simple button to set:

Right-click on Bottomappbar and select Add CommandBar

By default, two buttons are added, one is a check mark and the other is a fork number:

Look at the structure:

Primarycommands is the bottom of the button bar, which can be added appbarbutton,secondarycommands is clicked and then bounced up the menu bar, but the form is not the same as WP8.1. Add a few more menus, right-click on the Secondarycommands, add a few Appbarbutton, and run it like this:

Change the text is simple, modify its Label property,

This completes the simplest button and looks at the XAML code:

Take a look at the properties of Appbarbutton, the more important ones are the following:

Icon: Displays the graphic of the button;

Label: Text description of the button;

In addition to Appbarbutton, you can add a Appbartogglebutton that has a ischecked property compared to Appbarbutton, which can be used to identify whether a button is selected, checked to True, not selected as false, Otherwise null, the default is False.

Now take a look at how to change the icon.

Second, set the icon of the button

There are several ways of icon, namely:

Symbol icon Symbolicon: This is a predefined list of symbols based on the Segoe UI symbol font

Font icon Fonticon: You can use fonts to display icons

Bitmap icon Bitmapicon: Use the bitmap icon, the disadvantage is not vector, there may be distortion

Path icon Pathicon: path-based icon

Custom icons

Several, respectively, below.

1. Symbol icon

The use of symbol icons is the simplest and can be directly selected

You can also select directly in the XAML editor with IntelliSense:

All symbol lists can be viewed on this page:

Https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.ui.xaml.controls.symbol.aspx

The XAML code is this:

In fact, it's just a shorthand for the following:

2. Font icon

Although Symbolicon has provided many icons, sometimes other icon styles are required, and the default Symbolicon will not meet the requirements. Fortunately, you can also use a different symbol font, now the second bottom button to change the font icon.

We use Fontawesome fonts on their official website Http://fontawesome.io

After downloading to FONTAWESOME.OTF, create a new resources directory in your project, place the font file in the resource directory, and then add one in the App.xaml:

Note that before the # is the name of the file, followed by the font name, how to look at the font name, double-click to open the font file, you can see:

Then compile the project so that blend recognizes the resource you just added.

Change the second button to Fonticon, and then set its fontfamily, notice there are two ways to set up, because we have just added the font resources, so you can click on the dot behind the input box, select the local resources:

And then set its Glyph property, this specific to fill what, you can refer to the description of the font official website: http://fontawesome.io/cheatsheet/

Here is a list of all the font icons, you need to use Unicode to specify the style of the icon, such as Select & #xf088;

Why Use & #x开头呢, this is actually \u meaning, but the XAML code can not directly write \u, so can only write.

The resulting XAML code is like this:

If you have not added the resources, you can also directly click the input box of the small Triangle button selection, but this time the font will be displayed as a block:

No doubt, this block is just added to the font, the mouse on the above will be prompted.

This adds the XAML code like this:

I'm still suggesting a way to write resources that can take advantage of VS's IntelliSense to avoid mistakes:

Now run for a look:

It's pretty good.

In addition to using Fontawesome fonts, you can also use other icon fonts. How do you get the glyph value of an icon when using these fonts?

Open Cortana and enter "characters" to search for the Character Map program:

Select the font you want to use

The lower left corner of the U+26C7 is Unicode encoding, note that when writing to add a prefix & #x, a suffix after the home ;

Run effect

3. Bitmap icon

The bitmap icon is relatively simple, just like the previous WP8, find a PNG image settings on it. We can use Metro Studio to generate an icon. Metro Studio is very conscientious and has now upgraded to 4 and can apply for a free license:

Choose one of the icons, set the background to transparent, and export to PNG images:

Put it in the project and include it in the project

Then add a Appbarbutton, set it as a bitmap icon, and set its picture properties

The XAML code is this:

Run a try:

Note that when choosing a picture resolution, it is not as big as possible, and sometimes the larger the resolution, the more likely it is to appear jagged.

4. Path icon

Pathicon also belong to the vector icon, do not worry about distortion problem. The main use of Pathicon is to set its Data property, which is the Geometry class and can be derived from the following classes:

• One of the simple geometry ellipsegeometry, linegeometry, or RectangleGeometry.
• A single geometrygroup that supports other geometries as child elements.
• PathGeometry, which supports the creation of child object elements of the path geometry object model for graphs and segments.

You don't usually just put a ellipse on the button, so you'll need more icon styles. For simplicity, you can use Metro Studio to generate the path for the icon (because it's too cumbersome to draw those graphics yourself, if you're familiar with XAML):

Click on the Third Code button and select Appbarbutton ( This feature is a new addition to version 4, so go to the latest update ):

Copy the code inside and paste it into the project:

Run a look at:

With so many icon fonts, plus the artifact Metro Studio, you can find almost all the icons you need.

Iii. Other properties of Appbarbutton

In addition to adding normal buttons in the application bar, you can also add a button delimiter:

You can also add a switch button to add a Appbartogglebutton:

After clicking

This is just a bit of experience setting the button icon, and there are some requirements, like how to change the icon and label after clicking the button? Let's write the next article ^_^

Win Ten UWP Development series: Setting Appbarbutton icons