02. Set the BottomAppBar icon in the Universal app, and universalapp

02. Set the BottomAppBar icon in the Universal app, and universalapp

 

Preface: windows 10 was released early yesterday. The windows store development model has many advantages over the previous silverlight model,

I'm also excited.

 

Body:

In development prior to windows phone 8.0, the application bar icon settings were relatively simple. After arriving at the windows store app,

There are many ways to set the app bar.

 

First, in the page, the display effect of the five buttons (After the button is zoomed in, it is obvious that the third "Search button" has a sawtooth phenomenon because the png image is used as the icon,

Others are vector icons or controls that support lossless scaling.):

First 4:

 

5th:

 

All relevant xaml code:

<Page. bottomAppBar> <CommandBar> <AppBarButton Label = ""> <AppBarButton. icon> <FontIcon FontFamily = "Segoe UI Symbol" Glyph = "& # xE0EB;"/> </AppBarButton. icon> </AppBarButton> <AppBarButton Label = "Smiley"> <AppBarButton. icon> <SymbolIcon/> </AppBarButton. icon> </AppBarButton> <AppBarButton Label = "Search"> <AppBarButton. icon> <BitmapIcon UriSource = "Images/test/search.png"/> </AppBarButton. icon> </AppBarButton> <AppBarButton Label = "elliptical"> <AppBarButton. icon> <PathIcon. data> <EllipseGeometry RadiusX = "10" RadiusY = "5" Center = "20, 20"/> </PathIcon. data> </PathIcon> </AppBarButton. icon> </AppBarButton> <AppBarButton Label = "control"> <TextBlock Text = "love" Foreground = "Yellow" FontSize = "15" Margin = "8, 10, 0, 0 "/> </AppBarButton> </CommandBar> </Page. bottomAppBar>

 

1. Airplane icon

The default "Segoe UI Symbol" font is used in windows.

1) In the search option on the right side of win8.1 system desktop, enter "character" to open the "character ing table ":

 

2) After opening, select the Segoe UI Symbol font and select the desired icon (here, select airplane "):

 

Set "& # xE0EB;" toGlyphAttribute, note the prefix& # XAnd suffix;

<AppBarButton Label = ""> <AppBarButton. icon> <FontIcon FontFamily = "Segoe UI Symbol" Glyph = "& # xE0EB;"/> </AppBarButton. icon> </AppBarButton>

 

3) You can select AppBarButton on The xaml page, click F4 on the keyboard, and set it in the Properties window:

 

2. Smiley face icon

In xaml, select the button in app bar. In the F4 open attribute dialog box, there are many

You can select ICON enumeration:

 

Related xaml:

<AppBarButton Label = "Smiley"> <AppBarButton. Icon> <SymbolIcon/> </AppBarButton. Icon> </AppBarButton>

 

3. Search for icons

This is the simplest. Set the BitmapIcon object to a png Image in the local project directory. The disadvantage is that

If the screen is displayed on a high-definition screen, the page may be jagged, while the other scenes may support vector scaling.

Related xaml:

<AppBarButton Label = "Search"> <AppBarButton. Icon> <BitmapIcon UriSource = "Images/test/search.png"/> </AppBarButton. Icon> </AppBarButton>

 

 

4. Set PathIcon. Data

Because the Data object is a Geometry type attribute, you can assign a number of its sub-classes to it:

 

Set a simple ellipse here:

 

5. directly set the UIElement as the AppBarButton content

1) on The xaml page, open the attribute dialog box of AppBarButton:

 

Set as a TextBlock control:

Display Effect:

 

 

 

The reason why xmal elements can be directly set is that AppBarButton inherits from Button,

The Content attribute of a Button that is indirectly inherited from ContentControl is of the object type:

 

 

(The "Segoe UI Symbol icon font and frequently used icon list" of a garden friend is attached ")

 

 

Icon tool "MetroStudio"

It has been used since version 1.0 and is now the latest version 3.0 (). It has more functions and more icons.

1) A large number of selectable vector icons:

 

 

2) For example, click "edit" on the "Tai Chi" pattern above to perform various editing operations:

 

3) Select "Code view" to directly edit the generated code in the svg format of the xaml and web page drawing controls. This is cool:

 

.