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>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>