【转载】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

转载于:https://www.cnblogs.com/wgscd/articles/7700606.html