UWP ListView添加不同样式
先看效果:

使用ListView的ItemTemplateSelector
<ListView
IsItemClickEnabled="True"
ItemContainerStyle="{StaticResource ListViewItemStyle1}"
ItemTemplateSelector="{StaticResource HomeTemplateSelector}"
ItemsSource="{x:Bind HomeTab.NewsList}"
SelectionMode="None" />
1、定义一个 HomeTemplateSelector继承DataTemplateSelector,
并定义两个数据模板AdTemplate,NewsTemplate,代码如下
1 public class HomeDataTemplateSelector : DataTemplateSelector
2 {
3
4 public DataTemplate AdTemplate { get; set; }
5 public DataTemplate NewsTemplate { get; set; }
6
7 protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
8 {
9 var bean = item as ItemData;
10 if (1 == bean.ItemType)
11 {
12 return AdTemplate;
13 }
14 else if (2 == bean.ItemType)
15 {
16 return NewsTemplate;
17 }
18 return NewsTemplate;
19 }
20 }
2、定义一个ItemData的基类,添加ItemType字段,区分不同类型的项数据,代码如下
1 public class ItemData : ObservableObject
2 {
3 public string ItemTitle { get; set; }
4 public int ItemType { get; set; }
5 }
3、添加数据
namespace Demo.UWP.ViewModels
{
public class HomeViewModel : MyViewModel
{
public string Title { get; set; }
public ObservableCollection<ItemData> NewsList { get; set; } public HomeViewModel()
{
NewsList = new ObservableCollection<ItemData>
{
new AdBean() {Title = "aaa", ImgUrl = "ms-appx:///Assets/Main/8b59cca11a991187fcb2c1bd71b3345c220639.png", ItemType = 1},
new AdBean() {Title = "aaa", ImgUrl = "ms-appx:///Assets/Main/8b59cca11a991187fcb2c1bd71b3345c220639.png", ItemType = 1},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用,建议6-7人使用,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2},
new NewsBean() {Title = "东北小厨", SubTitle = "[丰庄]午市套餐C,建议6-7人使用", Price = "¥328", ItemType = 2}
}; } public override string ToString()
{
return "首页";
}
}
}
<Page.Resources>
<ResourceDictionary>
<DataTemplate x:Key="AdTemplate" x:DataType="bean:AdBean">
<local:AdItemView />
</DataTemplate>
<DataTemplate x:Key="NewsTemplate" x:DataType="bean:HomeBean">
<local:NewsItemView />
</DataTemplate>
<dataTemplateSelectors:HomeDataTemplateSelector
x:Key="HomeTemplateSelector"
AdTemplate="{StaticResource AdTemplate}"
NewsTemplate="{StaticResource NewsTemplate}" />
</ResourceDictionary>
</Page.Resources>
<Grid>
<ListView
IsItemClickEnabled="True"
ItemContainerStyle="{StaticResource ListViewItemStyle1}"
ItemTemplateSelector="{StaticResource HomeTemplateSelector}"
ItemsSource="{x:Bind HomeTab.NewsList}"
SelectionMode="None" />
</Grid>
转载请标明出处:http://www.cnblogs.com/xiaocaidev/p/7021541.html,本文出自:【xiaocaidev的博客】
UWP ListView添加不同样式的更多相关文章
- UWP ListView添加分割线
先看效果: 我并没有找到有设置ListView分割线的属性 下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步.我的叙述不一定准确 实现的方法就是在DataTemplate里包 ...
- 仿喜马拉雅实现ListView添加头布局和脚布局
ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动 ...
- 044. asp.net主题之二为主题添加CSS样式和动态加载主题
1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...
- 8添加一些样式:开始学习CSS
CSS中简单的表达式,成为规则.一个典型的规则包括一个选择符.若干属性和属性值. 1.在XHTML中直接添加CSS样式,必须在<head>元素里添加样式开始和结束标记.(但这未必是最好的方 ...
- class属性中为什会添加非样式的属性值?
来由 在一些插件中经常看到, 在class属性中出现一些跟样式无关的属性值, 这些值在css样式中没有对应定义, 但是在js中会根据这个值来给dom对象添加特殊的行为, 例如: jquery vali ...
- ListView添加项目带序列
ListView添加项目带序列 function AddSelItems(listview1:TListView;ListView2:TListView):Boolean;var s: st ...
- 为ListView添加头和脚
转自:https://software.intel.com/zh-cn/blogs/2014/12/15/android-listview-addheaderview-addfooterview ...
- 自定义listView添加滑动删除功能
今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...
- 怎么给当前点击的a标签添加一个样式(跳转页面后)
怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...
随机推荐
- iOS中如何使定时器NSTimer不受UIScrollView滑动所影响
以下是使用 scheduledTimerWithTimeInterval 方法来实现定时器 - (void)addTimer { NSTimer scheduledTimerWithTimeInter ...
- C语言const和define的区别
const 定义的是变量不是常量,只是这个变量的值不允许改变是常变量!带有类型.编译运行的时候起作用存在类型检查. define 定义的是不带类型的常数,只进行简单的字符替换.在预编译的时候起作用,不 ...
- Kubernetes K8S之固定节点nodeName和nodeSelector调度详解
Kubernetes K8S之固定节点nodeName和nodeSelector调度详解与示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-mas ...
- mySQL初学者一定要掌握的数据操纵
本文献给与作者一样不断地在追求梦想的小伙伴! 文章目录 1.INSERT 语句为表中所有字段添加数据 (1)可以指定所有字段名添加数据 (2)可以不指定字段名添加数据 (3)可以指定部分字段添加数据 ...
- 注册dll命令
向系统中注册dll的方法,如下(直接回车即可注册): regsvr32
- PyQt(Python+Qt)学习随笔:QDockWidget停靠窗toggleViewAction方法的作用
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 toggleViewAction方法返回一个动作对象,该动作对象通过点 ...
- 第9.9节 Python文件随机读写定位操作方法seek
类似于C语言,Python也提供了文件位置定位的操作方法seek. 一. 语法 seek(offset, whence=SEEK_SET) 语法释义: 1)offset :将文件当前操作位置移动偏移量 ...
- 第11.25节 Python正则表达式编译re.compile及正则对象使用
一. 引言 在<第11.2节 Python 正则表达式支持函数概览>介绍了re模块的主要函数,在<第11.3节 Python正则表达式搜索支持函数search.match.fullm ...
- XSS挑战赛(2)
进入第六关 简单判断过滤情况 <>script"'/ 查看源代码 可以看到第二个红框部分跟之前类似,闭合双引号尝试进行弹窗 "><script>ale ...
- HTML基础之标签
HTML初识 HTML(Hpyer Text Markup Language的缩写)译为"超文本标签语言",用来描述网页的一种语言.所谓超文本,因为它可以加入图片.声音.动画.多媒 ...