您现在的位置: 万盛学电脑网 >> 操作系统 >> windows 8技巧 >> 正文

Windows 8+VS 开发教程SemanticZoom缩放视图

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

  一.想要实现这种效果我们需要使用SemanticZoom控件和CollectionViewSource控件配合使用:

    SemanticZoom控件:

  1. <SemanticZoom.ZoomedOutView> 
  2.    <!--此处填充缩小索引视图的GridView,一般情况下绑定Group.Title--> 
  3. </SemanticZoom.ZoomedOutView> 
  4. <SemanticZoom.ZoomedInView> 
  5.     <!--此处填充平常普通的GridView,显示详细信息--> 
  6. </SemanticZoom.ZoomedInView> 

    CollectionViewSource是一个和前台UI控件进行互动的集合源。

      Source:源数据绑定属性

      IsSourceGrouped:是否允许分组

      View:获取当前与 CollectionViewSource 的此实例关联的视图对象

       View.CollectionGroups:返回该视图关联的所有集合组。

  二.现在通过一个实例来看如何使用SemanticZoom实现缩放视图,本实例接前一篇文章实例。

    1.前台设置CollectionViewSource控件

  1. <Grid.Resources> 
  2.     <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="ItemContent" /> 
  3. </Grid.Resources> 

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

  1. <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Center"> 
  2.             <SemanticZoom.ZoomedOutView> 
  3.                 <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False" > 
  4.                     <GridView.ItemTemplate> 
  5.                         <DataTemplate> 
  6.                             <!--注意此处绑定的是实体集的GroupTitle属性-->