查看: 5892|回复: 9

[分享] Win 10 UWP开发系列:设置AppBarButton的图标

[复制链接]

该用户从未签到

84

主题

493

积分

104

支持

发表于 2016-1-12 11:27:51 | 显示全部楼层 |阅读模式

马上注册,享受积分奖励和更多功能,让您轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
本帖最后由 Clever-he 于 2016-1-12 11:42 编辑

WP8以前,页面最下面的四个小圆按钮是不支持绑定的,WP8.1 RT之后,系统按钮升级成了AppBarButton,并且支持绑定了。在win10 UWP开发中,按钮的样式发生了变化,外面的圆圈没有了。不过个人还是更喜欢之前的圆按钮的样子^_^

很喜欢Metro Studio这个程序,有数百个好看的按钮可以用,并且可以导出成png图片。但现在不建议采取png图片的方式了,主要是因为png在缩放后有可能会失真,最好使用字体、path等矢量的方式来实现。以下介绍几种设置AppBarButton图标的方式。

先建立一个新的UWP项目,命名为AppBarButtonDemo。

一、添加AppBarButton
默认主页面上是没有按钮的,在MainPage.xaml上单击右键,用Blend进行编辑:


p1.png



UWP的应用程序栏和WP8.1有所不同,不仅可以放在下面,还可以放在上面。设置按钮主要就是设置按钮的图形和文字。下面来设置一个最简单的按钮:

在BottomAppBar上右键,选择添加CommandBar

commm.png



默认添加了两个按钮,一个是对号,一个是叉号:


p3.png



看一下结构:

p4.png



PrimaryCommands就是底部的按钮栏,里面可以添加AppBarButton,SecondaryCommands就是点击后再弹起的菜单栏,但是形式跟WP8.1的不太一样了。再添加几个菜单,在SecondaryCommands单击右键,再添加几个AppBarButton,跑一下就变成这个样子:

ape1.png



改变文字比较简单,修改其Label属性即可,

ape2.png


ape3.png



这样就完成了最简单的一个按钮,看一下XAML代码是这样的:

ape4.png

看一下AppBarButton的属性,比较重要的有以下几个:

Icon:显示按钮的图形;

Label:按钮的文字说明;

除了AppBarButton,还可以添加一种AppBarToggleButton,与AppBarButton相比还多了一个IsChecked属性,可以用来标识按钮是否被选中,选中为True,未选中为False,否则为null,默认是False。

现在来看一下如何改变Icon图标。

二、设置按钮的图标

logo1.png

Icon有几种方式,分别是:

符号图标SymbolIcon:这是基于Segoe UI Symbol字体的预定义好的符号列表

字体图标FontIcon:可以使用字体来显示图标

位图图标BitmapIcon:使用位图的图标,缺点是不是矢量的,有可能失真

路径图标PathIcon:基于Path的图标

自定义图标

几种,下面分别来说一下。

1、符号图标
符号图标的使用是最简单的,可以直接选择

logo2.png



在XAML编辑器里也可以直接选择,有智能感知:

log3.png



所有的符号列表可以在此页面查看:

https://msdn.microsoft.com/zh-cn ... ontrols.symbol.aspx

XAML代码是这样的:

log4.png


其实只是以下这种方式的简写:

log5.png



2、字体图标

虽然SymbolIcon已经提供了很多图标,但有时候需要其他的图标样式,默认的SymbolIcon就无法满足要求了。好在还可以用其他的符号字体,现在把第二个底部按钮改成字体图标。

我们使用FontAwesome字体,下载地址在其官网http://fontawesome.io

下载到fontawesome.otf后,在项目中新建Resources目录,将字体文件其放到Resources目录里,然后在App.xaml里添加一个资源:

font1.png

注意#号之前是文件的名称,后面是字体名,字体名怎么看呢,双击打开字体文件,就能看到了:

font2.png


然后编译一下项目,这样才能让Blend识别出刚添加的资源。

把第二个按钮改成FontIcon,然后设置其FontFamily,注意这里也有两种设置方式,因为我们刚才添加了字体的资源,所以可以点击输入框后面的小点,选择本地资源:


font3.png



再设置其Glyph属性,这个具体要填什么呢,可以参考字体官网的说明:http://fontawesome.io/cheatsheet/

这里有全部的字体图标列表,需要用unicode方式来指定图标的样式,比如选择 

为什么要用&#x开头呢,这个其实就是\u的意思,但XAML代码里不能直接写\u,所以只能这样写了。

这样生成的XAML代码是这样的:

xmal.png


如果刚才没有添加资源的话,也可以直接点击输入框的小三角按钮选择,但是这时候字体会显示为方块:

fcode2.png


不用怀疑,这个方块就是刚才添加的字体,鼠标放到上面会有提示。

这样添加的XAML代码是这样的:

cc1.png


我还是建议写成资源的方式,这种方式可以充分利用VS的智能感知,避免出错:


cc2.png


现在运行一下看看:


cc3.png


很不错吧。


除了使用FontAwesome字体之外,还可以使用其他的图标字体。那在使用这些字体的时候,该如何取得某个图标的Glyph值呢?

打开小娜,输入"字符",即可搜索到字符映射表程序:

na1.png

选择要使用的字体

need1.png

左下角的U+26C7就是unicode编码了,注意写的时候要加一个前缀&#x,后面家一个后缀;

na3.png


运行效果如图:

na4.png


3、位图图标

位图图标就比较简单了,就跟以前WP8的时候一样,找一个png图片设置上就可以。我们可以使用Metro Studio来生成一个图标。Metro Studio很良心,现在已经升级到4了,可以申请免费授权:

image1.png

随便选一个图标,设置背景为透明,导出成png图片:

image2.png

放到项目里,并包括进项目

image3.png


然后添加一个AppBarButton,将其设置为位图图标,并设置其图片属性

cset1.png


XAML代码是这样的:

cset2.png


运行一下试试:

cset3.png


注意,在选择图片分辨率的时候,并不是越大越好,有时候分辨率越大反而更容易出现锯齿现象。

4、路径图标

PathIcon也属于矢量图标,不用担心失真问题。使用PathIcon主要是设置其Data属性,这个属性是Geometry类,可以是以下几种派生类:

简单的几何图形 EllipseGeometry、LineGeometry 或 RectangleGeometry 之一。

单个 GeometryGroup,支持其他几何图形作为子元素。

PathGeometry,支持建立图形和线段的路径几何图形对象模型的子对象元素。

一般不会只在按钮上放一个Ellipse吧,所以还需要更多的图标样式。简单起见,可以用Metro Studio生成图标对应的Path(因为要自己画那些图形实在太麻烦啦,如果对XAML熟悉的自己画也行):

path1.png


点击第三个Code按钮,然后选择AppBarButton(这个功能是版本4新增加的功能,所以赶紧升级到最新版吧):

path2.png


把里面的代码复制出来,粘贴到项目里:

path3.png


运行一下看看:

path4.png


有了这么多图标字体,再加上神器Metro Studio,基本上需要的图标都可以找到了。


三、AppBarButton的其他属性

应用程序栏里除了添加普通的按钮,还可以添加按钮分隔符:

app1.png


还可以添加开关按钮,添加一个AppBarToggleButton:

app2.png


点击后

app3.png


这只是设置按钮图标的一点经验,此外还有一些需求,比如点击按钮后如何改变其Icon和Label?下篇文章再写吧^_^


开发者交流群:53078485,期待您的加入!
p2.png
fcode1.png
na2.png

评分

参与人数 2 智慧币 +16 支持 +8 收起 理由
mxzz + 10 + 2 这个我喜欢
harrypt + 6 + 6 值得分享

查看全部评分

签到天数: 279 天

连续签到: 33 天

[LV.8]以坛为家I

15

主题

637

积分

1

支持

彩虹勋章

发表于 2016-1-12 11:43:31 来自手机 | 显示全部楼层
支持开发者对uwp做出的贡献

来自:Lumia 1520 -智机社区客户端
[你知道吗]:

签到天数: 118 天

连续签到: 1 天

[LV.6]常住居民II

11

主题

652

积分

2

支持

彩虹勋章先锋-WM10旗舰

发表于 2016-1-12 11:58:10 | 显示全部楼层
不懂帮顶!楼主加油
[你知道吗]:

签到天数: 1084 天

连续签到: 46 天

[LV.10]以坛为家III

36

主题

1904

积分

8

支持

发表于 2016-1-12 12:51:13 来自手机 | 显示全部楼层
非常好,虽然不会做开发,但是支持这样的教程
来自:System Product Name WIN10 PC版客户端
[你知道吗]:

签到天数: 639 天

连续签到: 1 天

[LV.9]以坛为家II

54

主题

1207

积分

6

支持

发表于 2016-1-12 23:08:44 来自手机 | 显示全部楼层
本帖最后由 hanhaifeichen 于 2016-1-12 23:10 编辑

很好的教程,顶顶顶

来自:Lumia 1520 -智机社区客户端

签到天数: 486 天

连续签到: 5 天

[LV.9]以坛为家II

22

主题

1230

积分

414

支持

微软核心粉丝

发表于 2016-1-13 00:44:15 来自手机 | 显示全部楼层
楼主要经常发这样的教程,很需要uwp教程

来自:Lumia 920 -智机社区客户端
[你知道吗]:

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

8

主题

263

积分

317

支持

开发者认证

Rank: 6Rank: 6

积分
263
发表于 2016-1-30 08:25:09 | 显示全部楼层
转载不标出处,已举报

签到天数: 588 天

连续签到: 1 天

[LV.9]以坛为家II

41

主题

1508

积分

6

支持

发表于 2016-1-30 10:09:49 来自手机 | 显示全部楼层
不错啊,好想学开发。

来自:Lumia 830 -智机社区客户端
[你知道吗]:

签到天数: 25 天

连续签到: 1 天

[LV.4]偶尔看看III

2

主题

66

积分

3

支持

发表于 2016-3-29 15:29:14 | 显示全部楼层
以为是我的
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推广活动:
字体大师
UWP.CN
智机社区
        

网站地图| 小黑屋|京ICP证150706号|京B2-20160045|京网文[2018]3705-313号| 京公网安备11010802018258号

Powered by Discuz! X3.4 / Copyright 2010-2017 © 智机网 WFUN.COM Inc. All rights reserved.

快速回复 返回顶部 返回列表