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     }

View Code

 

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

1     public class ItemData : ObservableObject
2     {
3         public string ItemTitle { get; set; }
4         public int ItemType { get; set; }
5     }

View Code

 

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 "首页";
        }
    }
}

View Code

<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

 

 转载请标明出处：，本文出自：【】