欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

UWP ListView添加不同样式

程序员文章站 2022-06-16 10:10:32
先看效果: 使用ListView的ItemTemplateSelector 1、定义一个 HomeTemplateSelector继承DataTemplateSelector, 并定义两个数据模板AdTemplate,NewsTemplate,代码如下 1 public class HomeData ......

先看效果:

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,代码如下

UWP ListView添加不同样式
 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     }
View Code

 

2、定义一个ItemData的基类,添加ItemType字段,区分不同类型的项数据,代码如下

UWP ListView添加不同样式
1     public class ItemData : ObservableObject
2     {
3         public string ItemTitle { get; set; }
4         public int ItemType { get; set; }
5     }
View Code

 

3、添加数据

UWP ListView添加不同样式
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 "首页";
        }
    }
}
View Code
UWP ListView添加不同样式
<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>
View Code

 

 转载请标明出处:,本文出自:【】