02. Icon Settings for Application Bar (Bottomappbar) in Universal app

Preface, WINDOWS10 released yesterday morning, the Windows Store development model has many advantages over the previous Silverlight model,

I was a little excited, too.

Body:

In the previous development of Windows Phone 8.0, the application bar had a relatively simple icon set, and after the Windows Store app

The app bar is set up in many ways.

First in the page, the 5 button display effect (the button enlarged, obviously see the third "search button" has a jagged phenomenon, because the use of a PNG image as an icon,

The other is the use of vector icons or controls that support lossless scaling ):

Front 4:

5th one:

All the relevant XAML code:

 <Page.bottomappbar>     <CommandBar>         <AppbarbuttonLabel= "aircraft">             <Appbarbutton.icon>                 <FonticonFontFamily= "Segoe UI Symbol"Glyph= "& #xE0EB;"/>             </Appbarbutton.icon>         </Appbarbutton>                  <AppbarbuttonLabel= "smiley face">             <Appbarbutton.icon>                 <Symbolicon/>             </Appbarbutton.icon>         </Appbarbutton>         <AppbarbuttonLabel= "Search">             <Appbarbutton.icon>                 <BitmapiconUriSource= "Images/test/search.png"/>             </Appbarbutton.icon>         </Appbarbutton>                         <AppbarbuttonLabel= "Ellipse">             <Appbarbutton.icon>                 <Pathicon>                     <Pathicon.data>                         <EllipseGeometryRadiusX= "Ten"RadiusY= "5"Center= "20,20"/>                     </Pathicon.data>                 </Pathicon>             </Appbarbutton.icon>         </Appbarbutton>                             <AppbarbuttonLabel= "Control">             <TextBlockText= "Love"Foreground= "Yellow"FontSize= " the"Margin= "8,10,0,0"/>         </Appbarbutton>     </CommandBar> </Page.bottomappbar>

1, aircraft icon

Using the Segoe UI Symbol font for Windows system default installation

1) in the win8.1 system's "charms" search option, enter "character" to open "Character Map":

2) When open, select the "Segoe UI Symbol" font and select the icon you want to set (select "Airplane" here):

Will "& #xE0EB;" Set the Glyph attribute to Fonticon, note the prefix & #x and suffix ;

 <  appbarbutton  label  = "aircraft"  >  <  appbarbutton.icon  >  Span style= "color: #0000ff;" ><  fonticon  fontfamily  = "Segoe UI Symbol"   Glyph      />  </ appbarbutton.icon  >  </ appbarbutton  >  

3) in the XAML page, when Appbarbutton is selected, click the F4 of the keyboard, and in the Properties window, set:

2. Smiley face icon

In XAML, select the button in the app bar, F4 Open the Properties dialog box, and in the Symbol drop-down box, there are many

Images can be selected:

Related XAML:

<Label= "smiley face">     <Appbarbutton.icon  >         <symbolicon/>     </Appbarbutton.icon  ></appbarbutton>

3. Search icon

This is the simplest, the Bitmapicon object is set to a PNG image under the Local project directory, the disadvantage is

If you are on a high-definition screen, there is a possibility of aliasing, while several others support vector scaling.

Related XAML:

<Label= "search">     <Appbarbutton.icon  >         <urisource= "images/test/search.png"/>      </appbarbutton.icon></Appbarbutton >

4. Set Pathicon.data

Because the Data object is an attribute of type Geometry, it is possible to assign many of its subclasses to it:

Here a simple ellipse is set:

5, directly set UIElement as the content of Appbarbutton

1) in the XAML page, open the Appbarbutton Properties dialog box:

This is set to a TextBlock control:

Display effect:

The Xmal element can be set directly because Appbarbutton inherits from the Button,

The Button indirectly inherits from ContentControl, whose Content property is of type object:

Finish.

A list of "Segoe UI symbol icons and common icons" is attached to the garden friend.

02. Icon Settings for Application Bar (Bottomappbar) in Universal app