UWP ListView添加不同样式

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

先看效果：

使用ListView的ItemTemplateSelector

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>