UWP中数据绑定模板选择

    上文简单介绍了数据绑定。下面简单介绍一下数据模板选择。这是非常实用的,举个例子,我们做一个新闻app,来的数据源有的是纯文字(标题加文字内容),有的丰富一些(标题+文字内容+图片),还有的是(标题+文字内容+视频),那么如果用ListView这样的控件显示这样的数据源,数据模板的样式必须不同,这时候需要根据数据源的数据来判断使用何种模板进行显示。

    上面是我做的一个小游戏,使用的是同一个ListView但根据后台数据不同显示了不同的模板。如何根据数据选择模板?其实并不难。首先建立一个类。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace 开心打地鼠.Models
{
    class MyTemplateSelector: DataTemplateSelector
    {
        public DataTemplate DataTemplate0 { get; set; }
        public DataTemplate DataTemplate1 { get; set; }
        public DataTemplate DataTemplate2 { get; set; }
        public DataTemplate DataTemplate3 { get; set; }
        public DataTemplate DataTemplate4 { get; set; }
        public DataTemplate DataTemplate5 { get; set; }
        public DataTemplate DataTemplate6 { get; set; }

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
           ItemsControl.ItemsControlFromItemContainer(container) as GridView;
            //int index = Gv.IndexFromContainer(container);
            Level ThisLevel = item as Level;
            //先判断  是否被锁定
            if (ThisLevel.Locked=="1")
            {
                return DataTemplate0;//锁定,返回模板0
            }
            else
            {
                switch (ThisLevel.Stars)
                {
                    case "0":
                        return DataTemplate1;//未锁定,返回模板1  0星
                    case "1":
                        return DataTemplate2;//未锁定,返回模板2  1星  
                    case "2":
                        return DataTemplate3;//未锁定,返回模板3  2星
                    case "3":
                        return DataTemplate4;//未锁定,返回模板4  3星
                    case "4":
                        return DataTemplate5;//未锁定,返回模板5  4星
                    case "5":
                        return DataTemplate6;//未锁定,返回模板6  5星
                    default:
                        break;
                }
            }
            return base.SelectTemplateCore(item, container);    
        }

    }
}
   在xaml页面引用这个类。在Page的resource的面加入这些模板和selector,如下:
    <Page.Resources>
        <!--关卡模板0-->
        <DataTemplate x:Key="DataTemplate0">
         ...
        </DataTemplate>
        <!--关卡模板1-->
        <DataTemplate x:Key="DataTemplate1">
         ...           
        </DataTemplate>
        <!--关卡模板2-->
        <DataTemplate x:Key="DataTemplate2">
         ...           
        </DataTemplate>
        <!--关卡模板3-->
        <DataTemplate x:Key="DataTemplate3">
           ...
        </DataTemplate>
        <!--关卡模板4-->
        <DataTemplate x:Key="DataTemplate4">
           ...
        </DataTemplate>
        <!--关卡模板5-->
        <DataTemplate x:Key="DataTemplate5">
            ...
        </DataTemplate>
        <!--关卡模板6-->
        <DataTemplate x:Key="DataTemplate6">
            ...
        </DataTemplate>
        <Models:MyTemplateSelector x:Key="Selector" x:Name="MyTemplateSelector" DataTemplate0="{StaticResource DataTemplate0}" DataTemplate1="{StaticResource DataTemplate1}" DataTemplate2="{StaticResource DataTemplate2}" DataTemplate3="{StaticResource DataTemplate3}" DataTemplate4="{StaticResource DataTemplate4}" DataTemplate5="{StaticResource DataTemplate5}" DataTemplate6="{StaticResource DataTemplate6}">
        </Models:MyTemplateSelector>
    </Page.Resources>

      最后在数据绑定的控件上指定selector(同时后台赋予DataContext),即完成了根据数据选择模板。(根据我的代码修改即可),其中代码段中ThisLevel就是后台绑定的数据对象,根据其中数据内容决定返回何种模板(根据需要)。


 <GridView Margin="20,0,20,0" 
                ItemTemplateSelector="{StaticResource Selector}" 
                ItemsSource="{Binding}" 
                Name="GridView_Levels">
</GridView>

     第三部分,数据绑定分页。

作者:songshizhao 发表于:2017-04-16T11:55:44 访问量:623