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

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

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

SemanticZoom控件:

SemanticZoom.ZoomedOutView

!--此处填充缩小索引视图的GridView,一般情况下绑定Group.Title--

/SemanticZoom.ZoomedOutView

SemanticZoom.ZoomedInView

!--此处填充平常普通的GridView,显示详细信息--

/SemanticZoom.ZoomedInView

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

Source:源数据绑定属性

IsSourceGrouped：是否允许分组

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

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

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

1.前台设置CollectionViewSource控件

Grid.Resources

CollectionViewSourcex:Name="itemcollectSource"IsSourceGrouped="true"ItemsPath="ItemContent"/

/Grid.Resources

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

SemanticZoomx:Name="semanticZoom"VerticalAlignment="Center"
SemanticZoom.ZoomedOutView
GridViewScrollViewer.IsHorizontalScrollChainingEnabled="False"
GridView.ItemTemplate
DataTemplate
!--注意此处绑定的是实体集的GroupTitle属性--
TextBlockText="{BindingGroup.GroupTitle}"FontSize="24"/
/DataTemplate
/GridView.ItemTemplate
GridView.ItemsPanel
ItemsPanelTemplate
WrapGridItemWidth="150"ItemHeight="75"MaximumRowsOrColumns="1"VerticalChildrenAlignment="Center"/
/ItemsPanelTemplate
/GridView.ItemsPanel
GridView.ItemContainerStyle
StyleTargetType="GridViewItem"
SetterProperty="Margin"Value="4"/
SetterProperty="Padding"Value="10"/
SetterProperty="BorderBrush"Value="Gray"/
SetterProperty="BorderThickness"Value="1"/
SetterProperty="HorizontalContentAlignment"Value="Center"/
SetterProperty="VerticalContentAlignment"Value="Center"/
/Style
/GridView.ItemContainerStyle
/GridView
/SemanticZoom.ZoomedOutView
SemanticZoom.ZoomedInView
!--设置ScrollViewer.IsHorizontalScrollChainingEnabled="False"--
GridViewName="gv_Item"ItemsSource="{BindingSource={StaticResourceitemcollectSource}}"
SelectedItem="{BindingItemContent,Mode=TwoWay}"ScrollViewer.IsHorizontalScrollChainingEnabled="False"
Margin="20,140,40,20"IsSwipeEnabled="True"
GridView.ItemTemplate
DataTemplate
GridWidth="250"Height="200"Background="#33CCCCCC"
Grid.ColumnDefinitions
ColumnDefinitionWidth="110"/ColumnDefinition
ColumnDefinition/ColumnDefinition
/Grid.ColumnDefinitions
ImageGrid.Column="0"Margin="5,0,0,0"Source="{BindingImageUrl}"Stretch="None"/Image
TextBlockGrid.Column="1"Margin="15,15,0,0"Foreground="Black"Text="{BindingtxtTitle}"
FontWeight="Bold"FontSize="16"TextWrapping="Wrap"/
TextBlockGrid.Column="1"Margin="15,40,0,0"Foreground="Black"Text="{BindingtxtContent}"
FontWeight="Light"FontSize="14"TextWrapping="Wrap"/
/Grid
/DataTemplate
/GridView.ItemTemplate
GridView.ItemsPanel
ItemsPanelTemplate
VariableSizedWrapGridOrientation="Vertical"MaximumRowsOrColumns="3"/
/ItemsPanelTemplate
/GridView.ItemsPanel
GridView.GroupStyle
GroupStyle
GroupStyle.HeaderTemplate
DataTemplate
GridMargin="1,0,0,6"
ButtonAutomationProperties.Name="组名称"Content="{BindingGroupTitle}"/
/Grid
/DataTemplate
/GroupStyle.HeaderTemplate
GroupStyle.Panel
ItemsPanelTemplate
VariableSizedWrapGridOrientation="Vertical"Margin="0,0,50,0"/
/ItemsPanelTemplate
/GroupStyle.Panel
/GroupStyle
/GridView.GroupStyle
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/diannaorumen/）/GridView
/SemanticZoom.ZoomedInView
/SemanticZoom