新时尚Windows8开发（25）：缩放视图

转自：http://blog.csdn.net/tcjiaan/article/details/8120584

前面有一节，我们探讨了分组视图，本节我们再来吹一下有关缩放视图。那么，这视图怎么个缩放法呢？我们拒绝抽象，直接上截图。

 

 

上面两个图中，第一个图就是缩略视图，第二张图片展示的是全视图，所以，这样把图一看，胜于千言万语的理论介绍。

 

要实现这样的效果，我们有两大工具要引入的。

其中，第一个是看得见的，那就是SemanticZoom，这个东西乍一看可能有点玄，其实它没什么，我们主要把握它的两个属性：

1、ZoomedOutView是缩略视图，即上面图片一。

2、ZoomedInView是放大视图，即上面的图片二。

它们都需要一个实现了ISemanticZoomInformation按口的视图控件，这个我不多说了，你打开对象浏览器，找到ISemanticZoomInformation接口，看看哪些类实现了该接口就明白了。

 

第二个工具是看不见的，位于Windows.UI.Xaml.Data命名空间下的CollectionViewSource。这个东西用起来不难，但理解起来不容易，建议你深入研究一下，多调试，多断点一下就明白了，一定要充分发挥VS的强大功能，不然就太浪费了。

CollectionViewSource是专为数据绑定有UI视图互动而设的，尤其是对于要实现分组的情况下，更需要它，因为：

Source设置分组后的数据源，至于数居源如何分组，不用我多说了，好好运用一下LinQ吧，别浪费学到的知识。

IsSourceGrouped属性指示是否允许分组，你自己知道怎么设置了。

ItemsPath是分组后，组内部所包含列表的属性路径，参考后面的例子。

 

View属性就是获取其视图数据，如果是XAML中用{Binding}来绑定，可以忽略它，如果是使用代码的话，记得读取View中的数据。

 

由于微软隐藏了某些类，也就是不对外公开，而只是公开了接口，并不公开实现接口的具体类，导致这个东西理解起来有些痛苦，但无论在哪里，使用的方法都一样，如果理解不了，我告诉你一个法子，背下来，理解了自然最好。

 

理论的东西讲再多也是云里雾里，所以我比较倾向于实例，让事实来说话。

新建一个空页面项目，接着打开MainPage.xaml.cs，我们要准备一些用来测试的实体类。

[csharp] view plaincopyprint?

1. public class Student  
2. {  
3.     public string Name { get; set; }  
4.     public string Address { get; set; }  
5. }  
6.   
7. public class GroupTitleConverter : IValueConverter  
8. {  
9.     public object Convert(object value, Type targetType, object parameter, string language)  
10.     {  
11.         return string.Format("姓氏：{0}", value);  
12.     }  
13.   
14.     public object ConvertBack(object value, Type targetType, object parameter, string language)  
15.     {  
16.         return null;  
17.     }  
18. }  

 

接着就是XAML代码，MainPage.xaml

[html] view plaincopyprint?

1. <Page  
2.     x:Class="App5.MainPage"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:App5"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <Page.Resources>  
11.         <local:GroupTitleConverter x:Name="ttcvt"/>  
12.         <Style x:Key="gridvItemStyle" TargetType="GridViewItem">  
13.             <Setter Property="Background" Value="Green"/>  
14.             <Setter Property="VerticalContentAlignment" Value="Bottom"/>  
15.             <Setter Property="HorizontalContentAlignment" Value="Left"/>  
16.             <Setter Property="Margin" Value="10"/>  
17.         </Style>  
18.     </Page.Resources>  
19.       
20.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
21.         <SemanticZoom >  
22.             <!-- 外视图 -->  
23.             <SemanticZoom.ZoomedOutView>  
24.                 <GridView x:Name="gv" HorizontalAlignment="Center" VerticalAlignment="Center" ItemContainerStyle="{StaticResource gridvItemStyle}">  
25.                     <GridView.ItemTemplate>  
26.                         <DataTemplate>  
27.                             <TextBlock FontSize="24" Text="{Binding Path=Group.Key,Converter={StaticResource ttcvt}}" FontFamily="宋体"/>  
28.                         </DataTemplate>  
29.                     </GridView.ItemTemplate>  
30.                     <GridView.ItemsPanel>  
31.                         <ItemsPanelTemplate>  
32.                             <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" ItemHeight="80" ItemWidth="160"/>  
33.                         </ItemsPanelTemplate>  
34.                     </GridView.ItemsPanel>  
35.                 </GridView>  
36.             </SemanticZoom.ZoomedOutView>  
37.             <!-- 内视图 -->  
38.             <SemanticZoom.ZoomedInView>  
39.                 <ListView x:Name="lvInView" >  
40.                     <ListView.GroupStyle>  
41.                         <GroupStyle>  
42.                             <GroupStyle.HeaderTemplate>  
43.                                 <DataTemplate>  
44.                                     <Grid Margin="1,65,0,3" Background="Orange">  
45.                                         <TextBlock Text="{Binding Key}" FontSize="50" FontWeight="Black" FontFamily="宋体" Margin="5"/>  
46.                                     </Grid>  
47.                                 </DataTemplate>  
48.                             </GroupStyle.HeaderTemplate>  
49.                             <GroupStyle.Panel>  
50.                                 <ItemsPanelTemplate>  
51.                                     <VariableSizedWrapGrid Orientation="Horizontal" ItemWidth="225" MaximumRowsOrColumns="3"/>  
52.                                 </ItemsPanelTemplate>  
53.                             </GroupStyle.Panel>  
54.                         </GroupStyle>  
55.                     </ListView.GroupStyle>  
56.                     <ListView.ItemTemplate>  
57.                         <DataTemplate>  
58.                             <StackPanel>  
59.                                 <TextBlock FontSize="20" FontWeight="Bold" Text="{Binding Name}" FontFamily="宋体"/>  
60.                                 <StackPanel Orientation="Horizontal">  
61.                                     <TextBlock Text="地址："/>  
62.                                     <TextBlock Text="{Binding Address}"/>  
63.                                 </StackPanel>  
64.                             </StackPanel>  
65.                         </DataTemplate>  
66.                     </ListView.ItemTemplate>  
67.                 </ListView>  
68.             </SemanticZoom.ZoomedInView>  
69.         </SemanticZoom>  
70.     </Grid>  
71. </Page>  

 

[csharp] view plaincopyprint?

1. // 【C#】   
2. public MainPage()  
3.  {  
4.      this.InitializeComponent();  
5.      // 随便弄些数据源来测试  
6.      Student[] students = {  
7.                               new Student{ Name="孙大敢", Address="rrrrrrrrrrrrrrrrrrrrr"},  
8.                               new Student{ Name="李猩猩", Address="eeeeeeeeeeeeeeee"},  
9.                               new Student{ Name="金骨头", Address="kkkkkkkkkkkkkk"},  
10.                               new Student{ Name="孙大牙", Address="ffffffffffff"},  
11.                               new Student{ Name="唐超人", Address="66666666666666"},  
12.                               new Student{ Name="李一丁", Address="55555555555555555"},  
13.                               new Student{ Name="高今天", Address="777777777777777777777"},  
14.                               new Student{ Name="高昨天", Address="eeeeeeeeeeewwww"},  
15.                               new Student{ Name="高明天", Address="ppppppppppppppp"},  
16.                               new Student{ Name="元三思", Address="ssssssssssssssssss"},  
17.                               new Student{ Name="李三山", Address="ssssssssssssss"},  
18.                               new Student{ Name="高富帅", Address="ccccccccccccccccccc"},  
19.                               new Student{ Name="李XX", Address="eeeeeeeeeeeee"},  
20.                               new Student{ Name="唐老鸭", Address="dfeeggggeeeww"},  
21.                               new Student{ Name="元小头", Address="zzzzzzzzzzzzzzzzzz"},  
22.                               new Student{ Name="元三郎", Address="ddddddddddddddddddd"},  
23.                               new Student{ Name="唐小二", Address="hhhhhhhhhhhhhhhhhh"},  
24.                               new Student{ Name="元大头", Address="222222222222222"},  
25.                               new Student { Name="金刚刀", Address="死胡同"},  
26.                               new Student{ Name="曾野人", Address="安哥拉"}  
27.                           };  
28.      // 对数据源进行分组  
29.      var res = (from s in students  
30.                 group s by s.Name[0].ToString().ToUpper() into g  
31.                 select new  
32.                 {  
33.                     Key = g.Key,  
34.                     StudentItems = g.ToList()  
35.                 }).ToList<dynamic>();  
36.      // 实例化CollectionViewSource对象  
37.      CollectionViewSource cvs = new CollectionViewSource();  
38.      cvs.IsSourceGrouped = true; //支持分组  
39.      // 分组后集合项的路径，本例中为StudentItems  
40.      cvs.ItemsPath = new PropertyPath( "StudentItems");  
41.      // 设置数据来源，就是我们刚才分好组的动态列表  
42.      cvs.Source = res;  
43.      // 分别对两个视图进行绑定  
44.      this.lvInView.ItemsSource = cvs.View;  
45.      this.gv.ItemsSource = cvs.View.CollectionGroups;  
46.  }  

这个我就不解释，WPF学得好的，不是难题。

现在的关键是，如何弄清楚CollectionViewSource的内部结构。

 

我们在上面的代码后面加上以下代码。

[csharp] view plaincopyprint?

1. foreach (var item in cvs.View.CollectionGroups)  
2. {  
3.     ICollectionViewGroup vg = (ICollectionViewGroup)item;  
4.     dynamic ent = vg.Group as dynamic;  
5. }  

然后下一个断点。

 

接着运行调试，并单步跟入。

不知道现在明白了没有？反正多动手试一下吧，祝你成功。

 

因此，我们可以画出这样的结构图。