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

　　在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属性--> 
7.                             <TextBlock Text="{Binding Group.GroupTitle}" FontSize="24"/> 
8.                         </DataTemplate> 
9.                     </GridView.ItemTemplate> 
10.                     <GridView.ItemsPanel> 
11.                         <ItemsPanelTemplate> 
12.                             <WrapGrid ItemWidth="150" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" /> 
13.                         </ItemsPanelTemplate> 
14.                     </GridView.ItemsPanel> 
15.                     <GridView.ItemContainerStyle> 
16.                         <Style TargetType="GridViewItem"> 
17.                             <Setter Property="Margin" Value="4" /> 
18.                             <Setter Property="Padding" Value="10" /> 
19.                             <Setter Property="BorderBrush" Value="Gray" /> 
20.                             <Setter Property="BorderThickness" Value="1" /> 
21.                             <Setter Property="HorizontalContentAlignment" Value="Center" /> 
22.                             <Setter Property="VerticalContentAlignment" Value="Center" /> 
23.                         </Style> 
24.                     </GridView.ItemContainerStyle> 
25.                 </GridView> 
26.             </SemanticZoom.ZoomedOutView> 
27.             <SemanticZoom.ZoomedInView> 
28.                 <!--设置ScrollViewer.IsHorizontalScrollChainingEnabled="False"--> 
29.                 <GridView Name="gv_Item" ItemsSource="{Binding Source={StaticResource itemcollectSource}}"   
30.                   SelectedItem="{Binding ItemContent, Mode=TwoWay}" ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
31.                   Margin="20,140,40,20"  IsSwipeEnabled="True"  > 
32.                     <GridView.ItemTemplate> 
33.                         <DataTemplate> 
34.                             <Grid Width="250" Height="200" Background="#33CCCCCC"> 
35.                                 <Grid.ColumnDefinitions> 
36.                                     <ColumnDefinition Width="110"></ColumnDefinition> 
37.                                     <ColumnDefinition></ColumnDefinition> 
38.                                 </Grid.ColumnDefinitions> 
39.                                 <Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Stretch="None"></Image> 
40.                                 <TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="Black" Text="{Binding txtTitle}" 
41.                                     FontWeight="Bold" FontSize="16" TextWrapping="Wrap"/> 
42.                                 <TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="Black" Text="{Binding txtContent}" 
43.                                     FontWeight="Light" FontSize="14" TextWrapping="Wrap"/> 
44.                             </Grid> 
45.                         </DataTemplate> 
46.                     </GridView.ItemTemplate> 
47.                     <GridView.ItemsPanel> 
48.                         <ItemsPanelTemplate> 
49.                             <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" /> 
50.                         </ItemsPanelTemplate> 
51.                     </GridView.ItemsPanel> 
52.                     <GridView.GroupStyle> 
53.                         <GroupStyle> 
54.                             <GroupStyle.HeaderTemplate> 
55.                                 <DataTemplate> 
56.                                     <Grid Margin="1,0,0,6"> 
57.                                         <Button AutomationProperties.Name="组名称" Content="{Binding GroupTitle}"/> 
58.                                     </Grid> 
59.                                 </DataTemplate> 
60.                             </GroupStyle.HeaderTemplate> 
61.                             <GroupStyle.Panel> 
62.                                 <ItemsPanelTemplate> 
63.                                     <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/> 
64.                                 </ItemsPanelTemplate> 
65.                             </GroupStyle.Panel> 
66.                         </GroupStyle> 
67.                     </GridView.GroupStyle> 
68.                 </GridView> 
69.             </SemanticZoom.ZoomedInView> 
70.         </SemanticZoom>