【Win10应用开发】自适应磁贴中的分组
老周在上一篇文章中介绍过了自适应磁贴的基本结构,以及给大家演示了一些例子。
本文老周给大伙伴们说说自适应磁贴的另一个特点——分组呈现。
当磁贴的内容被分组后,每个组中的内容就会被视为一个整体。比如某磁贴在更新时定义了其内容包含有两个组,有些设备(比如手机、上世纪70年代的电脑、小霸王学习机等)的分辨率较低,磁贴不能显示两个组的信息,于是就会把第一组的内容整个显示出来,第二组信息就被忽略。就算空间不够,连第一组的内容都显示不全,然而一个组会被视为一个整体,不管空间够不够,第一组都要全部呈现。如果空间相当充足,当然两个分组的内容都会显示出来。
分组的方法是在binding元素下使用1个或n个group元素,每个group元素代表一组。对于单个group元素而言,它的子元素必须是subgroup(子组)元素,数量可以为n个,但至少你得有一个subgroup元素。正因为如此,group元素下面最少最少都会有一个subgroup元素。
先给大伙看一个例子。
<tile>
<visual>
<binding template="TileMedium">
<group>
<subgroup>
<text hint-style="subtitle">第一组</text>
<text>今天天气真好。</text>
</subgroup>
</group>
<group>
<subgroup>
<text hint-style="subtitle">第二组</text>
<text>天上的白云真白。</text>
</subgroup>
</group>
</binding>
</visual>
</tile>
上面定义的这个磁贴,分为两个组,每个组中都有两个text元素来呈现文本,虽然group中不打算设置子分组,但必须有一个subgroup,因为group元素的子元素必须为subgroup。
得到的磁贴如下图所示。
在一个group中,实际上一个subgroup可以理解为一列,因为subgroup元素有一个hint-weight属性,这个属性用来定义该subgroup的比重,这个比重实际上是该subgroup的宽度所占的比例。所以说,subgroup其实是用来定义列的。
大家应该会用XAML中的Grid控件,大家不妨想想,Grid在划分行和列的时候,是不是有一个按比例划分的方法。比如第一行为1*,第二行为2*,那就是把行的所有空间均分为3等份,第一行占1/3,第二行占2/3。
hint-weight的原理是一样的,但是,它不用写“*”,比如,一个组中有两个subgroup,每个subgroup的hint-weight的值都为1,那么每个subgroup的宽度将相等,各占50%。
再如,三个subgroup,设置它们的hint-weight属性。第一个为2,第二个为1,第三个为3,即把所有空间平均分为6份,第一列占2/6,第二列占1/6,第三列占3/6。
请看下面的例子:
<tile>
<visual>
<binding template="TileWide">
<group>
<subgroup hint-weight="1">
<image src="ms-appx:///Assets/images/关羽.png" hint-removeMargin="true"/>
<text hint-align="center" hint-style="body">关羽</text>
</subgroup>
<subgroup hint-weight="1">
<image src="ms-appx:///Assets/images/张飞.png" hint-removeMargin="true"/>
<text hint-align="center" hint-style="body">张飞</text>
</subgroup>
<subgroup hint-weight="1">
<image src="ms-appx:///Assets/images/曹操.png" hint-removeMargin="true"/>
<text hint-align="center" hint-style="body">曹操</text>
</subgroup>
<subgroup hint-weight="1">
<image src="ms-appx:///Assets/images/孙坚.png" hint-removeMargin="true"/>
<text hint-align="center" hint-style="body">孙坚</text>
</subgroup>
<subgroup hint-weight="1">
<image src="ms-appx:///Assets/images/袁绍.png" hint-removeMargin="true"/>
<text hint-align="center" hint-style="body">袁绍</text>
</subgroup>
</group>
</binding>
</visual>
</tile>
每个subgroup的hint-weight的值都为1,表明磁贴将一个组的水平空间平分为5列,每列显示图像和文本。
大家注意到,这里image元素设置了一个hint-removeMargin属性为true,表示删除图像的边距。如果为false,表示保留边距。默认情况下,图像周围的边距为8,由于这个磁贴内容多,比较拥挤,所以要去掉图像默认的边距。
磁贴更新后如下图所示。
再看下面一例:
<tile>
<visual>
<binding template="TileWide">
<group>
<subgroup hint-weight="1">
<image src="ms-appx:///Assets/images/曹操.png" hint-removeMargin="true" />
</subgroup>
<subgroup hint-weight="5">
<image src="ms-appx:///Assets/images/袁绍.png" hint-removeMargin="true" />
</subgroup>
<subgroup hint-weight="3">
<image src="ms-appx:///Assets/images/孙坚.png" hint-removeMargin="true" />
</subgroup>
</group>
</binding>
</visual>
</tile>
一个分组中有三个subgroup,即三列,所有空间被划分为9等份,第一列占其中1份,第二列占5份,第三列占3份。
磁贴更新后如下图。
另外,hint-weight属性还可以使用百分比来划分列,方法是指定的所有subgroup的weight值加起来刚好等于100,这时候就会被识别为百分比。
看例子。
<tile>
<visual>
<binding template="TileWide">
<group>
<subgroup hint-weight="70">
<image src="ms-appx:///Assets/images/张飞.png" hint-removeMargin="true" />
</subgroup>
<subgroup hint-weight="30">
<image src="ms-appx:///Assets/images/袁绍.png" hint-removeMargin="true" />
</subgroup>
</group>
</binding>
</visual>
</tile>
第一列的比重为70,第二列的比重为30,加起来正好是100,所以识别为百分比。
磁贴更新后的结果如下图:
好了,本文的牛皮就吹到这里。
【Win10应用开发】自适应磁贴中的分组的更多相关文章
- Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构
分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- Win10 UWP开发系列:实现Master/Detail布局
在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
- Win10/UWP开发—使用Cortana语音与App后台Service交互
上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...
- C#-MVC开发微信应用(6)--用户分组信息管理
让我们继续深入探索这方面的技术,为了更好的应用起来,专心做好底层的技术开发.本篇继续上一篇的介绍,主要介绍分组管理方面的开发应用,这篇的内容和上一篇,作为一个完整的用户信息和分组信息管理的组合. 1. ...
- UWP Windows10开发更新磁贴和动态更新磁贴
下面将介绍两种方式如何在windows10 uwp开发中如何更新应用磁贴: 实际上windows的磁贴就是用xml实现的,你只需要创建相应格式的xml就可以实现动态磁贴了 一,手动更新磁贴 二,轮询更 ...
- openresty开发系列24--openresty中lua的引入及使用
openresty开发系列24--openresty中lua的引入及使用 openresty 引入 lua 一)openresty中nginx引入lua方式 1)xxx_by_lua ---> ...
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
随机推荐
- Linux添加开机启动命令
1.vi /etc/rc.d/rc.local 添加要启动的命令 如: service php-fpm start //这样,开机就自动启动了php扩展 2. crontab -e //是写定时 ...
- bzoj1266最短路+最小割
本来写了spfa wa了 看到网上有人写Floyd过了 表示不开心 ̄へ ̄ 改成Floyd试试... 还是wa ヾ(。`Д´。)原来是建图错了(样例怎么过的) 结果T了 于是把Floyd改回spfa 还 ...
- 软件工程:vs单元测试
vs单元测试?VS?没装呢... 那么赶紧装个吧,于是跑到这去了: http://www.msdn.hk 我下个免费社区版. 安装过程没有什么需要说明的,傻瓜式安装会吗?当然中间会耗很长时间. 由于以 ...
- MongoDB的安装与设置MongoDB服务
Mongo DB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.Mongo DB很好的实现了面向对象的思想(OO思想),在Mongo DB ...
- <十五>JDBC_使用 DBUtils 进行更新、查询操作
详解待续... DBUtilsTest.java import java.sql.Connection;import java.sql.Date;import java.sql.ResultSet;i ...
- 通过arcgis在PostgreSQL中创建企业级地理数据库
部署环境: Win7 64位旗舰版 软件版本: PostgreSQL-9.1.3-2-windows-x64 Postgis-pg91x64-setup-2.0.6-1 Arcgis 10.1 SP1 ...
- JS中常遇到的浏览器兼容问题和解决方法
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...
- 工作总结_sql
今天客户叫导入数据,因为存在特殊字符,快把我给玩死了,,所以请教...总结 sql 数据导入excel 存在特殊字符引起的数据缺失 利用字符方式 : select a.OpenID+', ...
- Ubuntu安装c++编译器
打开终端输入sudo apt-get install build-essential 安装gcc和一些库函数.提供C/C++的编译环境 注意编译c++程序要用g++
- dot
今天写程序的时候发现一个问题啊 在主函数里面吧某个指针node* r=NULL 赋值为空 然后调用函数insert(node* r,....) 在insert里面呢,我给这个指针赋值了啊 但是主函数里 ...