前言,windows10 昨天凌晨发布了,windows store 开发模型比以前的 silverlight 模型由很多优势,

我也小兴奋了一把。

正文:

在 windows phone 8.0 以前的开发中, application bar 的图标设置相对单一,到了 windows store app 后,

app bar 的设置方式较多了。

首先在页面中,5个按钮的显示效果(按钮放大后,明显看到第三个 “搜索按钮” 出现了锯齿现象,原因是使用了 png 图片作为图标,

其它的是使用的矢量图标 或者控件,支持无损缩放):

前面 4个:

02、Universal app 中按钮图标使用-LMLPHP

第5个:

02、Universal app 中按钮图标使用-LMLPHP

全部的相关 xaml 代码:

 <Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="飞机">
<AppBarButton.Icon>
<FontIcon FontFamily="Segoe UI Symbol" Glyph=""/>
</AppBarButton.Icon>
</AppBarButton> <AppBarButton Label="笑脸">
<AppBarButton.Icon>
<SymbolIcon/>
</AppBarButton.Icon>
</AppBarButton> <AppBarButton Label="搜索">
<AppBarButton.Icon>
<BitmapIcon UriSource="Images/test/search.png"/>
</AppBarButton.Icon>
</AppBarButton> <AppBarButton Label="椭圆">
<AppBarButton.Icon>
<PathIcon>
<PathIcon.Data>
<EllipseGeometry RadiusX="10" RadiusY="5" Center="20,20"/>
</PathIcon.Data>
</PathIcon>
</AppBarButton.Icon>
</AppBarButton> <AppBarButton Label="控件">
<TextBlock Text="love" Foreground="Yellow" FontSize="15" Margin="8,10,0,0"/>
</AppBarButton>
</CommandBar>
</Page.BottomAppBar>

1、飞机图标

使用的是 windows 系统默认安装的 “Segoe UI Symbol” 字体

1)在 win8.1 系统桌面右侧的 “超级按钮” 中搜索选项中,输入“字符”,打开 “字符映射表” :

02、Universal app 中按钮图标使用-LMLPHP

2)打开后,选择 “Segoe UI Symbol” 字体,并且选择需要设置的图标(这里选择 “飞机”):

02、Universal app 中按钮图标使用-LMLPHP

将  "" 设置给 FontIcon 的 Glyph属性,注意前缀 &#x 和 后缀 ;

<AppBarButton Label="飞机">
<AppBarButton.Icon>
<FontIcon FontFamily="Segoe UI Symbol" Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>

3) 可以在 xaml 页面中,选中 AppBarButton 后,点击键盘的 F4, 在属性窗口中,进行设置:

02、Universal app 中按钮图标使用-LMLPHP

2、笑脸图标

在 xaml 中,选中app bar 中的按钮,F4 打开属性对话框,在 Symbol 下拉框中,有很多

ICON 枚举可以选择:

02、Universal app 中按钮图标使用-LMLPHP

相关的 xaml:

 <AppBarButton Label="笑脸">
<AppBarButton.Icon>
<SymbolIcon/>
</AppBarButton.Icon>
</AppBarButton>

3、搜索图标

这个是最简单的了,把 BitmapIcon 对象设置为本地工程目录下的一张 png 图片即可,缺点是

如果在高清屏上,有可能出现锯齿,而其它几个是支持矢量缩放的。

02、Universal app 中按钮图标使用-LMLPHP

相关 xaml:

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

4、设置  PathIcon.Data

因为该 Data 对象是一个 Geometry 类型的属性,所以可以把它的众多子类赋值给它:

02、Universal app 中按钮图标使用-LMLPHP

这里设置一个简单的椭圆:

02、Universal app 中按钮图标使用-LMLPHP

5、直接设置 UIElement 作为 AppBarButton 的内容

1)在 xaml 页面,打开 AppBarButton的属性对话框:

02、Universal app 中按钮图标使用-LMLPHP

这里设置为一个 TextBlock 控件:

02、Universal app 中按钮图标使用-LMLPHP

显示效果:

02、Universal app 中按钮图标使用-LMLPHP

之所以可以直接设置 xmal 元素,原因是 AppBarButton 继承自 Button,

02、Universal app 中按钮图标使用-LMLPHP

而 Button 间接继承自 ContentControl,它的 Content 属性是 object 类型的:

02、Universal app 中按钮图标使用-LMLPHP

(另附一个园友的 “Segoe UI Symbol图标字体及常用图标列表”)

图标利器 “MetroStudio”

从 version 1.0  就开始使用了,现在是最新的 version 3.0(下载地址),功能更加丰富,图标也变多了

1)众多可以选择的矢量 icon:

02、Universal app 中按钮图标使用-LMLPHP

2)比如上面的 “太极” 的图案,点击“编辑按钮”,可以进行各种编辑操作:

02、Universal app 中按钮图标使用-LMLPHP

3)选择 “代码视图”,可以直接编辑生成的 xaml 和 网页绘制控件的 svg 格式的代码,相当酷:

02、Universal app 中按钮图标使用-LMLPHP

完。

相关:

1、Guidelines for Segoe UI Symbol icons

2、Symbol enumeration

05-11 22:18
查看更多