Windows 8实用窍门系列:20.Windows 8中的GridView使用(二)和DataTemplateSelector
在本文中所讲述内容的实例仍然沿用于上篇文章,有什么疑惑可以参考上篇文章。
一 GroupStyle 在GridView控件中我们可以对数据进行分组显示,通过对GridView的GroupStyle进行控制,分别设置GroupStyle.HeaderTemplate和GroupStyle.Panel。如下代码:
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="组名称"
Content="{Binding GroupTitle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
二 DataTemplateSelector 在不同的组之间我们想使用不同的样式进行显示,在这里我们可以继承重写DataTemplateSelector类编写并且根据后台数据选择相应的样式模版进行呈现。
在之前代码的基础上我们需要做以下工作:
1.编写一个类继承于DataTemplateSelector
public class TemplateSelector : DataTemplateSelector
{
/// <summary>
/// 第一种文本显示模版
/// </summary>
public DataTemplate TextBoxTemplate { get; set; }
/// <summary>
/// 第二种图片为主显示模版
/// </summary>
public DataTemplate ImageTemplate { get; set; }
/// <summary>
/// 核心方法:根据不同的数据源类型返回给前台不同的样式模版
/// </summary>
/// <param name="item"></param>
/// <param name="container"></param>
/// <returns></returns>
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
DataModel model = item as DataModel;
string typeName = model.MainModel.Name;
if (typeName == typeof(TextBox).Name)//根据数据源设置的数据显示模式返回前台样式模版
{
return TextBoxTemplate;
}
if (typeName == typeof(Image).Name)
{
return ImageTemplate;
}
return null;
}
}
2.将后台的DataTemplateSelector绑定到前台,并且设置不同的样式资源
<GridView.ItemTemplateSelector>
<local:TemplateSelector TextBoxTemplate="{StaticResource textboxTemp}"
ImageTemplate="{StaticResource imageTemp}">
</local:TemplateSelector>
</GridView.ItemTemplateSelector>
3.定义文本显示模式样式和图片为主模式
<!--图片为主模式-->
<DataTemplate x:Key="imageTemp">
<Grid Width="250" Height="200" Background="#33CCCCCC">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Stretch="None"></Image>
<TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="Black" Text="{Binding txtTitle}"
FontWeight="Bold" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="Black" Text="{Binding txtContent}"
FontWeight="Light" FontSize="14" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
<!--文本显示模式样式-->
<DataTemplate x:Key="textboxTemp">
<Grid Width="250" Height="200" Background="#33CCCCCC">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Width="50" Height="80" Stretch="Fill"></Image>
<TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="White" Text="{Binding txtTitle}"
FontWeight="Light" FontSize="14" TextWrapping="Wrap"/>
<TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="White" Text="{Binding txtContent}"
FontWeight="Light" FontSize="12" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
4.数据源增加显示模式区别字段,然后设置数据,请见下方红色部分。
public class DataModel
{
public string txtTitle { get; set; } public string txtContent { get; set; } public string ImageUrl { get; set; } /// <summary>
/// 主要显示模式 TextBox文字主要显示模式,Image:以图片为主要显示模式
/// </summary>
public Type MainModel { get; set; }
}
public ObservableCollection<DataGroupModel> GetDataGroup()
{
return new ObservableCollection<DataGroupModel>(){
new DataGroupModel(){ GroupTitle="玄幻小说",
ItemContent=new ObservableCollection<DataModel>(){
new DataModel(){ MainModel=typeof(Image), txtTitle="盘龙",txtContent="大小的血睛鬃毛狮,力大无穷的紫睛金毛猿,毁天灭地的九头蛇皇,携带着毁灭雷电的恐怖雷龙……这里无奇不有,这是一个广博的魔幻世界。", ImageUrl="http://image.qidian.com/books/1017141/1017141.jpg" },
new DataModel(){ MainModel=typeof(Image), txtTitle="纵横轮回",txtContent="李沐然,本为身怀诸子百家所长的大神通者,在收取世间最后一颗神雷珠之时和神雷珠一道重生异世。 神雷之力,刑罚天下", ImageUrl="http://image.qidian.com/books/1.jpg" },
new DataModel(){ MainModel=typeof(Image), txtTitle="巫师世界",txtContent="穿越到异世界成为普通的小家族子弟,带着具有分析能力的生物芯片开始强大之旅..... ", ImageUrl="http://image.qidian.com/books/2443169/2443169.jpg" },
new DataModel(){ MainModel=typeof(Image), txtTitle="杀神",txtContent="在这个人吃人的疯狂世界,神已无力回天,就让我踏着漫天诸神的累累尸骨来普渡这芸芸众生……", ImageUrl="http://image.qidian.com/books/1911245/1911245.jpg" }
}
},
new DataGroupModel(){ GroupTitle="网游小说",
ItemContent=new ObservableCollection<DataModel>(){
new DataModel(){ MainModel=typeof(TextBox), txtTitle="全职高手",txtContent="网游荣耀中被誉为教科书级别的顶尖高手,因为种种原因遭到俱乐部的驱逐,离开职业圈的他寄身于一家网吧成了一个小小的网管, ", ImageUrl="http://image.qidian.com/books/1887208/1887208.jpg" },
new DataModel(){ MainModel=typeof(TextBox), txtTitle="重生之贼行天下",txtContent="孤寂的行者,追逐阴影的脚步,这是盗贼的赞歌。 带着一个一百八十级的大盗贼的记忆,回到了十年前,命运给聂言开了一个玩笑", ImageUrl="http://image.qidian.com/books/1693876/1693876.jpg" },
new DataModel(){ MainModel=typeof(TextBox), txtTitle="琥珀之剑",txtContent="命运在我眼前分开成两条互不相关笔直的线,一条通向火焰中熊熊燃烧的宫殿与城池,王国倾覆,大地承载苦难,生灵在这火中忍受煎熬", ImageUrl="http://image.qidian.com/books/1784765/1784765.jpg" },
new DataModel(){ MainModel=typeof(TextBox), txtTitle="独裁之剑",txtContent="来自银耀天堂的智慧之光,自然之力的守护者, 这是阿克蒙斯神位德鲁伊的王者传奇。", ImageUrl="http://image.qidian.com/books/2172318/2172318.jpg" }
}
}
};
}
最后我们看效果如下,左边是图片为主显示模式的黑色字体和大图,右边是文本为主显示模式的白色字体和小图。如需源码请点击 Win8Gridview2.rar 下载。
http://www.cnblogs.com/chengxingliang/archive/2013/03/11/2940191.html
Windows 8实用窍门系列:20.Windows 8中的GridView使用(二)和DataTemplateSelector的更多相关文章
- Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别
问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A.B.C.D.E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有 ...
- Silverlight实用窍门系列:57.Silverlight中的Binding使用(二)-数据验证
本文将简单讲述Silverlight中的Binding数据时的数据验证. NotifyOnValidationError:是否在出现异常/错误信息的时候激发BindingValidationError ...
- Silverlight实用窍门系列:2.Silverlight动态加载外部XML指定地址的WebService---(动态加载外部XML文件中指定的WebService地址)【附带实例源码】
接上节所讲的,Silverlight可以加载外部的XML文件里面的内容,那么我们可不可以在外部XML里面配置一个WebService地址,并且以此加载这个地址来动态加载WebService呢?这样子就 ...
- Windows Phone 8 开发系列(持续更新中)
1. 从应用列表再次点击应用,如何恢复到上次浏览的页面呢? 2. Windows Phone 文本框的 UpdateSourceTrigger 属性不支持 PropertyChanged 怎么办? 3 ...
- 转载 Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))
转载:程兴亮文章,地址;http://www.cnblogs.com/chengxingliang/archive/2011/02/07/1949579.html 使用WebClient读取XAP包同 ...
- Windows phone 应用开发系列教程(更新中)
Windows phone 应用开发[1]-Text To Speech 作为开篇章节.第一篇将在如下介绍一些Windows phone比较有意思的东西-Text To Speech[文 ...
- Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))【附带实例源码】
使用WebClient读取XAP包同目录下的XML文件 我们想要读取XAP包下面的XML文件,需要将此XML文件放在加载XAP包的网页的目录中去,然后使用URI方式读取此URL方式下的XML文件. 首 ...
- [转载]Silverlight实用窍门系列:71.Silverlight的Style
本文版权归作者和博客园共有,欢迎转载,未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 原文链接:http://www.cnblogs.com/chengx ...
- Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary
允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://chengxingliang.blog.51cto.com/3972944/886643 ...
随机推荐
- 在 Yii2 项目中使用 Composer 添加 FontAwesome 字体资源
2014-06-21 19:05 原文 简体 繁體 2,123 次围观 前天帮同事改个十年前的网站 bug,页面上一堆 include require 不禁让人抱头痛哭.看到 V2EX 上的讨论说,写 ...
- Leetcode 394.字符串编码
字符串编码 给定一个经过编码的字符串,返回它解码后的字符串. 编码规则为: k[encoded_string],表示其中方括号内部的 encoded_string 正好重复 k 次.注意 k 保证为正 ...
- XML文件的操作说明
说明:C#中XmlNode与XmlElement的区别如下:xmlnode类表示xml文档中的单个节点,其命名空间为:System.Xml.XmlNode的三个最主要的子类包括:XmlDocument ...
- 【Luogu】P2340奶牛会展
题目链接 突发奇想可以用f[i]表示智商和为i的时候情商最大是多少.这样就变成了一个背包问题. 最后更新答案的时候从0到最大背包容量遍历,最后答案是最大的i+f[i]; 但是虽然答案只能从0到m里选, ...
- BZOJ 3209: 花神的数论题【数位dp】
Description 背景众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦.描述话说花神这天又来讲课了.课后照例有超级难的神题啦…… 我等蒟蒻又遭殃了. ...
- 刷题总结——道路覆盖(ssoj)
题目: 题目描述 Tar 把一段凹凸不平的路分成了高度不同的 N 段(每一段相同高度),并用 H[i] 表示第 i 段高度.现在 Tar 一共有 n 种泥土可用,它们都能覆盖给定的连续的 k 个部分. ...
- yum update 出错解决办法
卸载掉yum和python 于是我卸载了python和yum,觉得自己重新安装python和yum. 步骤1:卸载python rpm -qa|grep python|xargs rpm -e --a ...
- docker 给容器配置ip(和主机一个网段)
docker 给容器配置ip(和主机一个网段).详情参考:http://www.xiaomastack.com/2015/02/06/docker-static-ip/ #/bin/bash ] || ...
- mongodb的安装及环境配置
一 下载 官网:https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl-3.6.3-signed.msi 官网可能打不开, ...
- win8激活工具,win 8激活工具,windows8激活工具,赶紧来下载咯
同事前几天买了一个电脑,装的win8的系统,由于装office,需要激活,找了下office的激活工具,那个Office激活工具自带有win8激活,同事点错了,把正版系统给激活了,变成盗版了(悲剧.. ...