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 ...
随机推荐
- NYOJ 747 蚂蚁的难题(三)
蚂蚁的难题(三) 时间限制:2000 ms | 内存限制:65535 KB 难度:4 描述 蚂蚁终于把尽可能多的食材都搬回家了,现在开始了大厨计划. 已知一共有 n 件食材,每件食材有一个美味 ...
- vue v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', { inserted:function(el) { const dragDom = el.querySelector('.jsPropupLay ...
- PAT天梯赛练习题——L3-003. 社交集群(并查集按秩合并)
L3-003. 社交集群 时间限制 1000 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 在社交网络平台注册时,用户通常会输入自己的兴趣爱好, ...
- CF dp 一句话解题
wyq说刚入门oi 或是遇到瓶颈的时候就刷DP吧,虽然觉得这么刷CF题有点浪费,但是还是挺爽的,按照solved排序做的,前面的题都挺水的(忘记记录了混蛋),就不写了,从5C开始写解题 CF5 C. ...
- LinkedList的构造函数有哪些
LinkedList构造函数有(两种): public LinkedList() public LinkedList(Collection<? extends E> c) /** * Co ...
- 你需要的130个vim命令
参考文章:http://www.oschina.net/news/43167/130-essential-vim-commands,其中有些我以为需要补充的及时补充或修改 从 1970 年开始,vi ...
- Xcode打包应用为ipa
Xcode教程 Xcode4发布测试 打包Archive操作是本文要介绍的内容,发布测试的最后一步打包(Archive),Xcode4帮助文档有比较详细介绍,但是居然是错的,这里说明一下. 1.设置& ...
- [转发]Android 系统稳定性 - ANR(三)
文章都为原创,转载请注明出处,未经允许而盗用者追究法律责任. 很久之前写的了,留着有点浪费,共享之. 编写者:李文栋 http://rayleeya.iteye.com/blog/1956056 1. ...
- MongoDB 复制(副本集)学习
MongoDB 复制(副本集)学习 replication set复制集,复制集,多台服务器维护相同的数据副本,提高服务器的可用性.MongoDB复制是将数据同步在多个服务器的过程.复制提供了数据的冗 ...
- hdu 3594 Cactus /uva 10510 仙人掌图判定
仙人掌图(有向):同时满足:1强连通:2任何边不在俩个环中. 个人理解:其实就是环之间相连,两两只有一个公共点,(其实可以缩块),那个公共点是割点.HDU数据弱,网上很多错误代码和解法也可以过. 个人 ...