1,SemanticZoom 有两个重要属性 默认值ZoomedInView(不设置的话,默认显示,包括分类名和分类成员)和ZoomedOutView(这个是缩小后的目录,只要包括分类名,点击跳到对应分类位置)。

2,绑定数据使用CollectionViewSource

要注意:1)IsSourceGrouped属性一定要设置为true,2)ItemsPath设置为child的名字,3)ZoomedInView和CollectionViewSource的View属性绑定,ZoomedOutView和View.CollectionGroups属性绑定。

代码如下:

CollectionViewSource ViewSource = new CollectionViewSource();
ViewSource.IsSourceGrouped = true;
ViewSource.ItemsPath = new PropertyPath("Datas");//对应Datas属性
ViewSource.Source = GetItems();//所有的数据 // 绑定数据
ViewDetails.ItemsSource = ViewSource.View; // 全部数据
ViewSummary.ItemsSource = ViewSource.View.CollectionGroups; // 关联的组数据集合
///绑定的对象类
public class Source
{
private string _Title;
public string Title
{
get { return _Title; }
set { _Title = value; }
}
private List<Data> _Datas;//不一定是Data类,可以是别的类
public List<Data> Datas
{
get { return _Datas; }
set { _Datas = value; }
}
}
public class Data
        {
            private string _Name;
            public string Name
            {
                get { return _Name; }
                set { _Name = value; }
            }
        }

3,模版的绑定问题。

ZoomedOutView可以简单的设置ItemTemplate模版即可,但是要注意,绑定的对象不是原来的值了。

不如原来的绑定为 {Binding Title}现在应该改为 {Binding Group.Title},Group对象为View(View.CollectionGroups)自动生成的对象。

ZoomedInView的子模版即ItemTemplate同ZoomedOutView一样。主要的不同在于GridView.GroupStyle。

GridView.GroupStyle有三个重要属性:HeaderTemplate(即分类名{Binding Title}不用加 Group),Panel(设置子元素的排布),ContainerStyle(一个分类对应的模版,可以不自定义)

ContainerStyle必须包含两个重要的对象:header(下面的ContentPresenter )和items(ItemsControl 注意它的绑定{Binding GroupItems}这个是写死的由View决定)。

<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}"/>

整个模版xaml如下,注意标红的地方:

<SemanticZoom HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center" Width="auto" Height="auto">
<SemanticZoom.ZoomedInView>
<GridView x:Name="ViewDetails" Width="1920" Height="1080" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
<!--分组后,details 的数据模板-->
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="#022a56" Width="200" Height="65">
<TextBlock TextWrapping="Wrap" FontSize="16" Foreground="Red" Padding="5 0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<!--分组的样式-->
<GridView.GroupStyle>
<GroupStyle>
<!--分组后,header 的数据模板-->
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" FontSize="26.67" Height="30" Foreground="Yellow" Margin="0 0 0 20" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<!--分组后,每组数据(包括 header 和 details)的样式-->
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
<!--分组后,每组数据(包括 header 和 details)的 panel-->
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" Margin="0 0 50 0" ItemHeight="75"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<!--整体数据(一组数据算一个元素)的 panel-->
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="ViewSummary" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
<!--分组后,details 的数据模板-->
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="#022a56" Width="200" Height="65">
<TextBlock TextWrapping="Wrap" FontSize="16" Foreground="Red" Padding="5 0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Group.Title}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>

SemanticZoom配合GridView组件的使用关键点的更多相关文章

  1. 第30讲 UI组件之 GridView组件

    第30讲 UI组件之 GridView组件 1.网格布局组件GridView GridView是一个ViewGroup(布局控件),可使用表格的方式显示组件,可滚动的控件.一般用于显示多张图片,比如实 ...

  2. Flutter中打造多行列列表GridView组件的使用

    GridView组件.一个可滚动的二维空间数组. 在使用无限加载滚动列表的时候,最先使用的还是ListView组件.但若是要一行显示2列或者更多列的滚动列表,GridView组件更为方便.如下 在向服 ...

  3. Flutter——GridView组件(网格列表组件)

    GridView组件的常用参数: 名称 类型 说明 scrollDirection Axis 滚动方法 padding EdgeInsetsGeometry 内边距 resolve bool 组件反向 ...

  4. 安卓开发笔记——GridView组件

    1.什么是GridView? GridView(网格视图)是按照行列的方式来显示内容的,一般用于显示图片,图片等内容,比如实现九宫格图,用GridView是首选,也是最简单的. 2.正文 GridVi ...

  5. 9Flutter GridView组件 以及动态GridView

    main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* GridView : 通过GridVi ...

  6. flutter网格布局之GridView组件

    前面总结了使用ListView来实现列表,但是,有的时候,数据量很大,需要使用矩阵方式排列才能更清晰的展示数据,在flutter中,可以使用网格列表组件GridView来实现这个布局. GridVie ...

  7. vue配合UI组件

    bootstrap 创建项目 首先使用脚手架搭出项目基本框架,具体方法可以参考前面的文章. 1,执行命令创建项目:vue init webpack-simple vue-bootstrap 2,下载相 ...

  8. 与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom

    [源码下载] 与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom 作者:webab ...

  9. Android开发10.3:UI组件GridView网格视图

    GridView(网格视图) 概述 GridView用于在界面上按行.列分布的方式来显示多个组件         GridView和ListView有共同的父类 : AbsListView       ...

随机推荐

  1. Freemarker中空值 null的处理++++定义数组

    http://blog.java-zone.org/archives/800.html <#list listBlogPost as blogPost> </#list> 如果 ...

  2. RN中listView的每个item等高

    今天写ListView的每个Item的布局的时候发现,当文字太长时被截掉了不能完全显示,检查了很久发现没有设置固定高度都是可伸缩的为什么没有伸缩呢.看了很久才发现每个item是等高的,于是仔细检查才看 ...

  3. CSS实例练习

    蓝色导航为图片,用background-image实现. 排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float. 实例: 代码: <!D ...

  4. POJ1704 Georgia and Bob

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9771   Accepted: 3220 Description Georg ...

  5. HDU 5944 Fxx and string(暴力/枚举)

    传送门 Fxx and string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Othe ...

  6. console 输出信息美化

    不久前在一些前端的网站上看到的效果,以前觉得console只是拿来做做调试,不过现在看到别人网站的console美化效果,这个还可以作为一种网站个性来显示的.. 以%c开头,后面的文字就打印的信息,后 ...

  7. wireshark lua脚本

    1.目的:解析rssp2协议   2.如何使用wireshark lua插件 将编写的(假设为rssp2.lua)lua文本,放入wireshark 安装目录下,放哪里都行只要dofile添加了路径. ...

  8. kettle将Excel数据导入oracle

    导读 Excel数据导入Oracle数据库的方法: 1.使用PL SQL 工具附带的功能,效率比较低 可参考这篇文章的介绍:http://www.2cto.com/database/201212/17 ...

  9. Caf.CMS是一个免费的、 开源,功能齐全的CMS

    Caf.CMS(疯狂蚂蚁CMS) 是一个免费的. 开源,功能全面的CMS(内容管理系统).定位CMS也有点狭义呢,因为Caf.CMS是基于国外SmartStore.NET 开源商城源码的基础上改造而成 ...

  10. Python PIP安装

    https://zhidao.baidu.com/question/550936793.html 按图做