DataTemplateSelector介绍
DataTemplateSelector
可以帮助我们实现动态选择数据绑定的模版,如通过ListView+DataTemplateSelector实现微信朋友圈或聊天列表效果。
Github已有聊天效果图

喜欢阅读代码请直接移步:https://github.com/nishanil/Xamarin.Forms-Samples/tree/master/DataTemplateSelector
本文通过一个简单的Demo练习DataTemplateSelector的使用。
首先在新建的空项目中添加三个Model类:

其中BaseModel
作基类,表示数据源类型,TitleModel
和DescribeModel
分别是BaseModel的子类表示数据源的不同情况。作为练习BaseModel中仅定义了一个String类型属性Title,TitleModel只是单纯的继承BaseModel,DescribeModel继承BaseModel的同时增加了一个String类型属性Describe。
接下来开始为本文的主角编码,声明一个MyDataTemplateSelector
继承DataTemplateSelector
。

其中TitleTemplate和DescribeTemplate是我们根据情况定义的两个数据模版,TitleTemplate对应TitleModel,DescribeTemplate对应DescribeModel。
OnSelectTemplate
方法是我们必须重写的一个方法,在OnSelectTemplate方法中判断item的类型或某个属性值返回对应的DataTemplate。
接下来主要介绍DataTemplateSelector在Xaml中的使用。
首先在Resources中定义我们需要的两个DataTemplate。

为了方便用TextCell代替自定义Cell,两个DataTemplate 的Key值方便使用区分分别定义为TitleTemplate和DescribeTemplate,可以定义你自己的任意值。
定义了需要的DataTemplate后再定义我们的MyDataTemplateSelector。并将提前定义好的DataTemplate通过StaticResource
赋值给MyDataTemplateSelector的TitleTemplate和DescribeTemplate属性。

Demo中所有内容都定义在了ContentPage.Resources内,完整定义代码。

定义ListView时再将我们定义好的MyDataTemplateSelector对象赋值给ListView的ItemTemplate
属性

模拟数据源并绑定到ListView:

Demo效果图:

作者:MayueCif
链接:https://www.jianshu.com/p/a9bdcffa50c9
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

DataTemplateSelector介绍的更多相关文章
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- MySQL高级知识- MySQL的架构介绍
[TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...
- Windows Server 2012 NIC Teaming介绍及注意事项
Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...
- Linux下服务器端开发流程及相关工具介绍(C++)
去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路 ...
- JavaScript var关键字、变量的状态、异常处理、命名规范等介绍
本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
随机推荐
- Outlook配置163邮箱
一.在163邮箱设置处设置POP3/SMTP/IMAP 二.开启客户端授权码 三.打开Outlook,选择手动设置 选择POP/IMAP 密码是上文中的授权码 点击其它设置,勾选以下选项 点击完成即可
- mindmaster导出markdown文档
mindmaster支持多终端同步,10M免费云空间对于免费用户来说够用了,又给我的IPad增加了生产力,赞! 每次在写文章之前我都会先用mindmaster的思维导图把结构写好,然后根据结构大纲写文 ...
- SELECT SQL
替换换行符: update qgnews set article_url=REPLACE(article_url,char(10),'') 替换回车符: update qgnews set artic ...
- 【每日算法】存在重复元素 II
题目描述 这是 LeetCode 上的 219. 存在重复元素 II, 难度为 [简单] 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nu ...
- Vue全局引入JS的方法
两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中 ...
- C++五十一篇 -- VS2017开发人员新闻无法联网
参考链接:https://blog.csdn.net/zz1589275782/article/details/88364983 这几天玩了下以前的电脑,本来想更新一下Visual Studio In ...
- python 接口测试之 图片识别
4.1 pytesser安装 2.安装pytesser,下载地址:http://code.google.com/p/pytesser/ ,下载后直接将其解压到项目代码下,或者解压到python安装目录 ...
- css问题记录
1.flex:1元素被子元素撑开,将该元素overflow不为visible,构造BFC,或子元素脱离文档流
- SpringBoot自动装配-Condition
1. 简介 @Conditional注解在Spring4.0中引入,其主要作用就是判断条件是否满足,从而决定是否初始化并向容器注册Bean. 2. 定义 2.1 @Conditional @Condi ...
- Vue单点登录控件代码分享
这里提供一个Vue单点登录的demo给大家参考,希望对想了解的朋友有一些帮助. 具体的原理大家可以查看我的上篇文章 vue实现单点登录的N种方式 废话不多少直接上代码 这里分两套系统,一是登录系统的主 ...