弹来弹去跑马灯!

【转载】UWP中数据绑定模板选择

UWP中数据绑定模板选择

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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就是后台绑定的数据对象，根据其中数据内容决定返回何种模板（根据需要）。


1
2
3
4
5
<GridView Margin="20,0,20,0"
                ItemTemplateSelector="{StaticResource Selector}"
                ItemsSource="{Binding}"
                Name="GridView_Levels">
</GridView>

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

原文地址：http://www.songshizhao.com/blog/blogPage/138.html
posted @ 2017-10-20 17:29  wgscd  阅读(352)  评论(0)    收藏  举报