新时尚Windows8开发(25):缩放视图
来源:互联网 发布:sql2005数据库修复 编辑:程序博客网 时间:2024/05/05 13:34
前面有一节,我们探讨了分组视图,本节我们再来吹一下有关缩放视图。那么,这视图怎么个缩放法呢?我们拒绝抽象,直接上截图。
上面两个图中,第一个图就是缩略视图,第二张图片展示的是全视图,所以,这样把图一看,胜于千言万语的理论介绍。
要实现这样的效果,我们有两大工具要引入的。
其中,第一个是看得见的,那就是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,我们要准备一些用来测试的实体类。
public class Student { public string Name { get; set; } public string Address { get; set; } } public class GroupTitleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return string.Format("姓氏:{0}", value); } public object ConvertBack(object value, Type targetType, object parameter, string language) { return null; } }
接着就是XAML代码,MainPage.xaml
<Page x:Class="App5.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App5" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <local:GroupTitleConverter x:Name="ttcvt"/> <Style x:Key="gridvItemStyle" TargetType="GridViewItem"> <Setter Property="Background" Value="Green"/> <Setter Property="VerticalContentAlignment" Value="Bottom"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="Margin" Value="10"/> </Style> </Page.Resources> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <SemanticZoom > <!-- 外视图 --> <SemanticZoom.ZoomedOutView> <GridView x:Name="gv" HorizontalAlignment="Center" VerticalAlignment="Center" ItemContainerStyle="{StaticResource gridvItemStyle}"> <GridView.ItemTemplate> <DataTemplate> <TextBlock FontSize="24" Text="{Binding Path=Group.Key,Converter={StaticResource ttcvt}}" FontFamily="宋体"/> </DataTemplate> </GridView.ItemTemplate> <GridView.ItemsPanel> <ItemsPanelTemplate> <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" ItemHeight="80" ItemWidth="160"/> </ItemsPanelTemplate> </GridView.ItemsPanel> </GridView> </SemanticZoom.ZoomedOutView> <!-- 内视图 --> <SemanticZoom.ZoomedInView> <ListView x:Name="lvInView" > <ListView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,65,0,3" Background="Orange"> <TextBlock Text="{Binding Key}" FontSize="50" FontWeight="Black" FontFamily="宋体" Margin="5"/> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Horizontal" ItemWidth="225" MaximumRowsOrColumns="3"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </ListView.GroupStyle> <ListView.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock FontSize="20" FontWeight="Bold" Text="{Binding Name}" FontFamily="宋体"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="地址:"/> <TextBlock Text="{Binding Address}"/> </StackPanel> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> </SemanticZoom.ZoomedInView> </SemanticZoom> </Grid></Page>
// 【C#】 public MainPage() { this.InitializeComponent(); // 随便弄些数据源来测试 Student[] students = { new Student{ Name="孙大敢", Address="rrrrrrrrrrrrrrrrrrrrr"}, new Student{ Name="李猩猩", Address="eeeeeeeeeeeeeeee"}, new Student{ Name="金骨头", Address="kkkkkkkkkkkkkk"}, new Student{ Name="孙大牙", Address="ffffffffffff"}, new Student{ Name="唐超人", Address="66666666666666"}, new Student{ Name="李一丁", Address="55555555555555555"}, new Student{ Name="高今天", Address="777777777777777777777"}, new Student{ Name="高昨天", Address="eeeeeeeeeeewwww"}, new Student{ Name="高明天", Address="ppppppppppppppp"}, new Student{ Name="元三思", Address="ssssssssssssssssss"}, new Student{ Name="李三山", Address="ssssssssssssss"}, new Student{ Name="高富帅", Address="ccccccccccccccccccc"}, new Student{ Name="李XX", Address="eeeeeeeeeeeee"}, new Student{ Name="唐老鸭", Address="dfeeggggeeeww"}, new Student{ Name="元小头", Address="zzzzzzzzzzzzzzzzzz"}, new Student{ Name="元三郎", Address="ddddddddddddddddddd"}, new Student{ Name="唐小二", Address="hhhhhhhhhhhhhhhhhh"}, new Student{ Name="元大头", Address="222222222222222"}, new Student { Name="金刚刀", Address="死胡同"}, new Student{ Name="曾野人", Address="安哥拉"} }; // 对数据源进行分组 var res = (from s in students group s by s.Name[0].ToString().ToUpper() into g select new { Key = g.Key, StudentItems = g.ToList() }).ToList<dynamic>(); // 实例化CollectionViewSource对象 CollectionViewSource cvs = new CollectionViewSource(); cvs.IsSourceGrouped = true; //支持分组 // 分组后集合项的路径,本例中为StudentItems cvs.ItemsPath = new PropertyPath( "StudentItems"); // 设置数据来源,就是我们刚才分好组的动态列表 cvs.Source = res; // 分别对两个视图进行绑定 this.lvInView.ItemsSource = cvs.View; this.gv.ItemsSource = cvs.View.CollectionGroups; }
这个我就不解释,WPF学得好的,不是难题。
现在的关键是,如何弄清楚CollectionViewSource的内部结构。
我们在上面的代码后面加上以下代码。
foreach (var item in cvs.View.CollectionGroups) { ICollectionViewGroup vg = (ICollectionViewGroup)item; dynamic ent = vg.Group as dynamic; }
然后下一个断点。
接着运行调试,并单步跟入。
不知道现在明白了没有?反正多动手试一下吧,祝你成功。
因此,我们可以画出这样的结构图。
- 新时尚Windows8开发(25):缩放视图
- 新时尚Windows8开发(21):分组视图
- 新时尚Windows8开发(2):应用程序生命周期
- 新时尚Windows8开发(3):应用程序状态
- 新时尚Windows8开发(5):消息框
- 新时尚Windows8开发(6):资源 & 本地化
- 新时尚Windows8开发(20):FlipView控件
- 新时尚Windows8开发(35):后台传输
- 新时尚Windows8开发(38):聊天程序
- 新时尚Windows8开发(27):根据应用程序的视图状态调整UI
- 新时尚Windows8开发(28):多媒体捕捉(低级篇)
- 新时尚Windows8开发(29):多媒体捕捉(高级篇)
- 新时尚Windows8开发(32):Json数据处理(A)
- 新时尚Windows8开发(33):Json数据处理(B)
- 新时尚Windows8开发(32):Json数据处理(A)
- 新时尚Windows8开发(33):Json数据处理(B)
- 新时尚Windows8开发(1):如何创建应用程序项目
- 新时尚Windows8开发(4):保存/读取本地应用程序设置
- 花生哥的伤感爱情日志:伤害我,你会心痛吗?
- Delphi中文件操作
- U-boot start.s 详解
- HttpURLConnection的get和post处理方法(含图片)
- 伤感日志:时光远走,流年轻度
- 新时尚Windows8开发(25):缩放视图
- Shell脚本调试技术
- 【Adobe AIR学习笔记】打包、签名、运行AIR应用程序
- https 学习笔记二
- hdu44438 Hunters
- JAVA连接数据库大全
- Android项目运行junit测试类时出现错误Internal Error (classFileParser.cpp:3494)的解决办法
- https 学习笔记三
- QQ伤感日志_一点点揭开这撕心裂肺的伤