网页磁贴模板_【Win 10应用开发】Adaptive磁贴模板的XML文档结构
在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板。
同样道理,你依旧可以使用8.1时候的磁贴模板,在win 10的API中也是支持的,此外,Win10 App还支持全新的自适应磁贴模板,本文老周就给大家先讲一下基本结构,下一篇文章中咱们再说一说复杂排版。
应用程序的图标可以分为两类:第一类是应用商店上专用的,就是你的应用提交到商店后,给用户看的图标;另一类就是应用本身的一些图标或磁贴。
磁贴其实也就这么几种,大家只需要知道这么几个尺寸就可以了。
1、44乘44,显示在所有应用程序列表中的图标,这是尺寸最小的。
2、71乘71,显示在开始屏幕上的小图标。
3、150乘150,显示在开始屏幕上的中图标。
4、310乘150,显示在开始屏幕上的宽图标。
5、310乘310,显示在开始屏幕上的大图标。
用于图标的图像应选用PNG格式,背景可以透明,显示出来比较晶莹清透。如果你要使用多种比例的图标,可以在放图标的目录下,比如默认的Assets目录,在目录下建两个子目
\scale-100
\scale-200
scale-xx表示缩放比例,这个会被系统自动识别,然后这两个目录下分别放对应大小的图片,图片的文件名必须相同。
用PS制作图标时,可以先做大尺寸的,因为图片缩小不会模糊,但放大有可能模糊。以做44X44为例,我先做200%比例的,44乘以2等于88,所以200%大小的图片为88x88。
做完200%的图片并导出为PNG文件后,再在PS中按快捷键Ctrl + Alt + I,把图像大小进行缩小,按比例缩小为50%,这样表示44x44的图像就得到了。再导出PNG就可以了。这样实际每个图标我们只做一次即可。
组织好的资源目录如下图所示。
然后在清单文件中就好办了,因为正式版的SDK已经有清单编辑器了。
对号入座即可,我就不多说了。
其实在实际开发中,你未必一定需要所有尺寸的图标,我这里是为了演示各个大小版本的磁贴,所以才弄齐全了。
接下来我们开始了解自适应磁贴了,都说是磁贴了,自然它的根节点是tile了(所以Toast通知的根节点是toast)。
……
磁贴是展示文本和图像给用户看的,当然是可视化的元素了,所以tile下面是visual元素。
我们也知道,磁贴有N种大小的,而每一种大小对应不同的视图,每一种视图用一个binding元素来包装,比如我这个例子,它支持所有尺寸的磁贴,因而应该包含多个binding元素。
binding元素的template属性,现在已统一为四个值:
TileSmall:小图标,71x71
TileMedium:中图标,150x150
TileWide:宽图标,310x150
TileLarge:大图标,310x310
模板的名字是大小写敏感的,所以在输入时,大小写不能输错。visual元素下可以有1到4个binding,你需要哪些大小的图标,就声明多少个binding。
每个binding元素下可以放text和image元素,text表示文本,image表示图像。
比如这样:
小图标
中图标
宽图标
大图标
更新磁贴后如下所示。
我们还可以在里面使用图像。
很好玩。
image元素的src属性指定图像的来源,可以是ms-appx:(安装目录内)、ms-appdata:(本地数据目录),或者网络上的图像都行。
磁贴更新后如下。
把image元素的placement属性设置为background,可以让图片作为磁贴的背景。
看看背景图。
更新后的磁贴如下图。
如果文本的内容太长,你还可以考虑让它自动换行。例如:
看看,前面山坡上坐着个傻二愣,张开他那垃圾铲一样的大嘴巴,也没有人知道他在嚷什么。说的也不知道是哪个星球的语言。其声音就像老驴拉石磨似的。
hint-wrap属性是布尔值,如果自动换行,则为true,否则为false。更新后的磁贴如下图所示。
你还能够设置文本的对齐方式,有效的对齐方式为左、中、右。
左对齐
居中对齐
右对齐
hint-align属性设置文本的水平对齐方式,有效值为:
left——左对齐。
center——居中对齐
right——右对齐
磁贴更新后如下图所示。
text元素不能设置文本的垂直对齐方式,只能通过binding元素的hint-textStacking属性来设置,有效的取值为;
top——顶部对齐
center——居中对齐
bottom——底部对齐
比如下面例子,文本对齐到磁贴的顶部。
文本对齐到顶部
磁贴更新后如下图所示。
如果你喜欢圆形图像,你还可以选择把图像裁剪为圆形。看看下面的例子:
hint-crop默认为none,即不裁剪,所以如果不想裁剪图像就不用加这个属性,如果要剪为圆形,就设置为circle。
磁贴更新后得到的结果如下图所示。
看到没,狄大人和元芳一起去手机店买手机。
好的,今天给大家展示了自适应磁贴的几个新特性,下一篇文章就介绍一下如何在磁贴进行分列布局。
本文示例源码下载:http://files.cnblogs.com/files/tcjiaan/AdaptiveTileDemoApp.zip
网页磁贴模板_【Win 10应用开发】Adaptive磁贴模板的XML文档结构相关推荐
- 【Win 10应用开发】Adaptive磁贴模板的XML文档结构
原文:[Win 10应用开发]Adaptive磁贴模板的XML文档结构 在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴 ...
- Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构...
分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
- 【Win10 应用开发】自适应Toast通知的XML文档结构
原文:[Win10 应用开发]自适应Toast通知的XML文档结构 老规矩,在开始之前老周先讲个故事. 话说公元2015年7月20日,VS 2015发布.于是,肯定有人会问老周了,C#6有啥新特性,我 ...
- Java传xml时字符串乱码_大神们,我用DOM4j解析xml文档时,中文乱码
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 String sql="insert into t1(CreateTime, Question, Category, Place,Type) v ...
- java解析xml乱码_大神们,我用DOM4j解析xml文档时,中文乱码
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 String sql="insert into t1(CreateTime, Question, Category, Place,Type) v ...
- Dom4j解析器_解析xml文档
为什么80%的码农都做不了架构师?>>> 目录 1.Dom4J是什么 2.使用dom4j解析xml 3.使用dom4j查询xml 4.使用dom ...
- 【Win 10 应用开发】Toast通知激活应用——前台后台
原文:[Win 10 应用开发]Toast通知激活应用--前台&后台 老周最近热衷于讲故事,接下来还是讲故事时间. 有人问我:你上大学的时候,有加入过学生会吗?读大学有没有必要加入学生会? 哎 ...
- 【Win 10 应用开发】RTM版的UAP项目解剖
原文:[Win 10 应用开发]RTM版的UAP项目解剖 Windows 10 发布后,其实SDK也偷偷地在VS的自定义安装列表中出现了,今天开发人员中心也更新了下载.正式版的SDK在API结构上和以 ...
- 【Win 10应用开发】SplitView控件
[Win 10应用开发]SplitView控件 原文:[Win 10应用开发]SplitView控件 SplitView控件用于呈现分隔视图,简单地说,就是把一个视图分割为两部分,Content属性所 ...
- latex中文论文模板_西安建筑科技大学LaTeX学位论文模板 v1.0.0 beta
什么是LaTeX? LaTeX是一种基于TeX的排版系统,由美国计算机科学家莱斯利·兰伯特在20世纪80年代初期开发,利用这种格式系统的处理,即使用户没有排版和程序设计的知识也可以充分发挥由TeX所提 ...
最新文章
- calendar 获取季度的第一天_Java日期查询:日、周、旬、月、季度、年等时间操作...
- 年末福利,C/S应用升级更新完整解决方案放送
- NeurIPS 2018 | 如何用循环关系网络机智地解决数独类关系推理任务?
- iOS QQ分享图片无反应问题
- 微信小程序支付,带java源码
- 修改了sql默认路径无法登录服务器,PostgreSQL错误'无法连接到服务器:没有这样的文件或目录'...
- 工作中应用计算机,浅谈计算机在我国计工作中的应用与发展.doc
- 开启事物_开启大门,聚焦在正确的事物上
- Java从入门到精通——数据库篇Mongo DB 导出,导入,备份
- Python+pywin32操作Excel文件常用功能(268行代码+注释)
- 固态硬盘玩游戏有必要吗
- 华为机试HJ98:自动售货系统
- CentOS 7.5基于Docker部署4.2 版本的zabbix监控平台
- 计算机组成原理期末无选择题,计算机组成原理期末考试习题及答案精编(70页)-原创力文档...
- oracle之三 自动任务调度
- SketchUp草图大师制作分析图的详细流程介绍
- 二维码的制作之根据Excel数据批量制作二维码
- 红黑二叉树详解及理论分析
- 版本控制管理工具Git/SVN
- [置顶]使用scrapy_redis,自动实时增量更新东方头条网全站新闻