在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>
