将一个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,这个尚未知道怎么做到。有知道的朋友希望可以分享下。