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>