Windows 8实用窍门系列:20.Windows 8中的GridView使用(二)和DataTemplateSelector

2021-05-02 21:28

阅读:616

标签:pre   name   点击   margin   网吧   htm   block   工作   继承   

在本文中所讲述内容的实例仍然沿用于上篇文章,有什么疑惑可以参考上篇文章。

  一 GroupStyle 在GridView控件中我们可以对数据进行分组显示,通过对GridView的GroupStyle进行控制,分别设置GroupStyle.HeaderTemplate和GroupStyle.Panel。如下代码:

技术分享
            
                            
技术分享

  二 DataTemplateSelector 在不同的组之间我们想使用不同的样式进行显示,在这里我们可以继承重写DataTemplateSelector类编写并且根据后台数据选择相应的样式模版进行呈现。

  在之前代码的基础上我们需要做以下工作:

  1.编写一个类继承于DataTemplateSelector

技术分享
    public class TemplateSelector : DataTemplateSelector
    {
        /// 
        /// 第一种文本显示模版
        /// 
        public DataTemplate TextBoxTemplate { get; set; }
        /// 
        /// 第二种图片为主显示模版
        /// 
        public DataTemplate ImageTemplate { get; set; }
        /// 
        /// 核心方法:根据不同的数据源类型返回给前台不同的样式模版
        /// 
        /// 
        /// 
        /// 
        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绑定到前台,并且设置不同的样式资源

            

  3.定义文本显示模式样式和图片为主模式

技术分享
            
            
技术分享

  4.数据源增加显示模式区别字段,然后设置数据,请见下方红色部分。

技术分享
        public class DataModel
        {
            public string txtTitle { get; set; }

            public string txtContent { get; set; }

            public string ImageUrl { get; set; }

            /// 
            /// 主要显示模式 TextBox文字主要显示模式,Image:以图片为主要显示模式
            /// 
            public Type MainModel { get; set; }
        }
        public ObservableCollection GetDataGroup()
        {
            return new ObservableCollection(){
                new DataGroupModel(){ GroupTitle="玄幻小说", 
                    ItemContent=new ObservableCollection(){
                        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(){
                        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

标签:pre   name   点击   margin   网吧   htm   block   工作   继承   

原文地址:http://www.cnblogs.com/sjqq/p/7755696.html


评论


亲,登录后才可以留言!