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

我也小兴奋了一把。

正文:

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

app bar 的设置方式较多了。

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

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

前面 4个:

第5个:

全部的相关 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 系统桌面右侧的 “超级按钮” 中搜索选项中,输入“字符”,打开 “字符映射表” :

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

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

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

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

2、笑脸图标

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

ICON 枚举可以选择:

相关的 xaml:

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

3、搜索图标

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

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

相关 xaml:

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

4、设置  PathIcon.Data

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

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

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

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

这里设置为一个 TextBlock 控件:

显示效果:

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

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

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

图标利器 “MetroStudio”

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

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

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

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

完。

相关:

1、Guidelines for Segoe UI Symbol icons

2、Symbol enumeration

02、Universal app 中按钮图标使用的更多相关文章

  1. 使用MVVM-Sidekick开发Universal App(二)

    上一篇文章已经建立了基本的实体类,并且搞定了多语言的问题,以后在app里用字符串的时候就可以从资源文件中取了.现在继续进行. 一.添加一个页面 CurrencyExchanger首页是一个货币兑换的列 ...

  2. Windows Phone 8.1 开发技术概览 (Universal APP)

    前一阵真的比较懒 WP8.1 已经出来这么长时间了现在才更新BLOG让大家久等了,今天我先为大家介绍下 WP 8.1的开发框架,什么是微软所推崇的 Universal APP,以及我们要开发 Univ ...

  3. 如何在移动端app中应用字体图标icon fonts (转)

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  4. 下载企业级证书打包的app 出现“正在下载”或“等待中”的图标并且无法删除的问题

    下载企业级证书打包的app 出现“正在下载”或“等待中”的图标并且无法删除的问题: 原因分析:手机上的bundleid 与后台plist文件中的bundleid不一致导致的. 解决方案:用plist文 ...

  5. 如何在移动端app中应用字体图标icon fonts

    How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...

  6. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  7. 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

    此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...

  8. 网页与APP中那些优美的登陆表单

    我从Dribbble收集了20个漂亮的登陆表单案例.希望你看后能从中受益,并对你以后的登陆表单设计有帮助.设计一个登陆表单是非常容易,但大多设计都很糟糕.毫无亮点.无论如何,这篇Dribbble案例集 ...

  9. 全面分析:APP中的消息功能设计

    一.定义 APP的“消息”模块,是通过APP或手机这个客户端,围绕某个产品的功能进行交流.沟通的重要方式.这种沟通,一方是运营人员或商家,也可以是产品或系统本身,为方便说明笔者这里姑且统一简称为B端, ...

随机推荐

  1. <%@ include> <jsp:include>

    1. <%@ include file=”relativeURI” %> 这个效果是将引入的文件内容直接加入当前JSP然后再编译,会造成的问题就是如果引入的页面中也写了head,conte ...

  2. Spark Streaming:大规模流式数据处理的新贵(转)

    原文链接:Spark Streaming:大规模流式数据处理的新贵 摘要:Spark Streaming是大规模流式数据处理的新贵,将流式计算分解成一系列短小的批处理作业.本文阐释了Spark Str ...

  3. 微软URLRewriter.dll的url重写的简单使用(实现伪静态)

    先添加引用URLRewriter.dll到项目下的bin目录中,下载: http://files.cnblogs.com/tianguook/URLRewriter.rar 1.在web.config ...

  4. 详细记录ASP.NET中的图象处理

    最近做网站时,要求上传能加上水印,就研究了一下相关的功能.推荐一下程序人生的网站,大家也可以写一些开发感悟在上面.在使用ASP的时候,我们时常要借助第三方控件来实现一些图象功能.而现在,ASP.NET ...

  5. java学习笔记2--数据类型、数组

    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note2.html,转载请注明源地址. 1.数据类型 Java数据类型有: 原始数据类型(Pr ...

  6. Word TOC域的使用说明

    TOC域的使用说明: 域代码:TOC(目录)域 { TOC [Switches ] } 建立一个目录.TOC 域根据标题级别.指定样式或由 TC(目录项)域指定的项目来收集目录项.在使用“插入”菜单中 ...

  7. js 判断页面元素是否存在

    转自:http://www.0fish.com/js/416 原生js写法案例: obj = document.getElementById("someID"); if (obj) ...

  8. T-SQL 之 运算符

    1.算术运算符 [1] +:加 [2] -:减 [3] *:乘 [4] /:除 [5] %:模除取余 2.位运算符 [1] &(与,and): 按位逻辑与运算 [2] |(或,or): 按位逻 ...

  9. 移动端HTML5框架

    一:移动端HTML5框架 http://jquerymobile.com/jQuery Mobile http://jqtjs.com/jQTouch http://www.sencha.com/pr ...

  10. ORA-16014 与 ORA-00312

    场景: SQL> alter system archive log current; alter system archive log current * 第 1 行出现错误: ORA-1601 ...