Windows 8 Metro中GridView的Group化和SemanticZoom控件的配合使用

将一个GridView分组，将同一类型的条目放一个区域，使得用户能够方便地查找要找的内容。但是如果分类较多、又杂，还是会有些许不便。这里就需要用到一个名叫SemanticZoom的控件。

SemanticZoom，中文翻译不知道说好，直译的话叫做语义变焦。其作用是为开发者提供两个视图，一个用来描述详细信息，一个用来描述简要信息。通过手势张开和合拢来切换两个视图。先来看下效果图。

第一张是正常情况下的GridView，第二张是通过手势合拢后得到的类似于缩略图的样子。同样通过分开手势或者点击某个itemj就能回到第一张视图。

下面来看具体的实现。

SemanticZoom下面有个视图，前面说过了。其中一个叫ZoomedInView，对应第一张的视图，另一个叫ZoomedOutView，对应第二张的视图。XAML结构 如下：

<SemanticZoom Grid.Row="1" x:Name="semanticZoom">    <SemanticZoom.ZoomedOutView>        <!-- 这里写类似于缩略图的视图 -->    </SemanticZoom.ZoomedOutView>    <SemanticZoom.ZoomedInView>        <!-- 这里写默认视图 -->    </SemanticZoom.ZoomedInView></SemanticZoom>

画面上最初表示的是ZoomedInView，所以在这个View里把你的分组的GridView写到这里就行了，主要是接下来的ZoomedOutView。

ZoomedOutView里当然也是放GridView，然后给这个GridView写的Template里的控件加上Binding，与ZoomedInView关联起来。

<SemanticZoom.ZoomedOutView>    <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False" HorizontalAlignment="Center" SelectionMode="None">        <GridView.ItemTemplate>            <DataTemplate>                <TextBlock Text="{Binding Group.Province}"/>            </DataTemplate>    </GridView></SemanticZoom.ZoomedOutView>

上面代码中TextBlock的文本绑定的是分组后的Key属性，这里的Key是Province。然后指定Binding的Group来源。CS文件里操作如下：

(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = NationwideCitySource.View.CollectionGroups;

NationwideCitySource是给ZoomedInView中GridView绑定的CollectionViewSource。这样就与ZoomedInView中的Key关联起来了。

如果不这样指定，或是指定成其他数据源，或者干脆ZoomedOutView做成其他不相干的View也行，不过如此一来，和ZoomedInView就没什么关联了，用这个控件的意义也就没有了。

ZoomedOutView其实最好布局和ZoomedInView中的一样，像上面给的示例，应该把所有省也排成一行，不过这都是开发者自己设计的。正如上面所说，ZoomedOutView做成一个完全不相干的View也行。

另外，点击ZoomedOutView上任意一个Item后会回到ZoomedInView，如果关联了两个View 的话，点击会自动导航到Key 所在的区域，不关联的话就没这种效果了。

最后一点就是，画面最初表示的ZoomedInView，上面也提到过的，能不能使得最初表示ZoomedOutView，这个尚未知道怎么做到。有知道的朋友希望可以分享下。