【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，所以识别为百分比。
磁贴更新后的结果如下图：

 

好了，本文的牛皮就吹到这里。

示例源代码下载