什么没有 发表于 2015-5-22 13:18:46

Windows 8实用窍门系列:22.Windows 8 的SemanticZoom缩放视图

  在Windows 8中SemanticZoom缩放视图支持对GridView和ListView控件的视图效果进行缩放,它提供一个详细信息视图(ZoomedInView)以让用户查看详细信息,另外提供一个缩小索引视图(ZoomedOutView)让用户快速定位想要查看信息的大概范围。
  一.想要实现这种效果我们需要使用SemanticZoom控件和CollectionViewSource控件配合使用:
  SemanticZoom控件:



   

   


   
  CollectionViewSource是一个和前台UI控件进行互动的集合源。
  Source:源数据绑定属性
  IsSourceGrouped:是否允许分组
  View:获取当前与 CollectionViewSource 的此实例关联的视图对象
  View.CollectionGroups:返回该视图关联的所有集合组。
  二.现在通过一个实例来看如何使用SemanticZoom实现缩放视图,本实例接前一篇文章实例。
  1.前台设置CollectionViewSource控件



      


  2.前台绘制ZoomedInView视图和ZoomedOutView视图GridView



      





                           





















               





































  3.设置后台数据源和关联ZoomedOutView视图数据



      public MainPage()
{
this.InitializeComponent();
this.itemcollectSource.Source = new ViewModelData().Sourcedata;
//此处需要将ZoomedOutView的视图数据结合关联ZoomedInView的集合组
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = itemcollectSource.View.CollectionGroups;
}
  三.我们看效果图如下,如需源码请点击 win8Gridview3.rar 下载。
  ZoomedOutView效果图

  ZoomedInView效果图
页: [1]
查看完整版本: Windows 8实用窍门系列:22.Windows 8 的SemanticZoom缩放视图