[WP8] Binding时，依照DataType选择DataTemplate

范例下载

范例程序代码：点此下载

问题情景

在开发WPF、WP8...这类应用程序的时候，透过Binding机制搭配DataTemplate，能让数据类别在经过Binding之后于画面上呈现。例如下列的范例，透过Binding机制搭配DataTemplate，就能在WP8的ListBox控件中，依照DataTemplate的定义，来呈现Car对象集合。

  • 执行结果

  • 程序代码(.CS)

    1. namespace BindingSample001.Models
    2. {
    3.     public class Car
    4.     {
    5.         public string Name { get; set; }
    6.     }
    7. }
    9. namespace BindingSample001
    10. {
    11.     public partial class MainPage : PhoneApplicationPage
    12.     {
    13.         // Constructors
    14.         public MainPage()
    15.         {
    16.             // Initialize
    17.             this.InitializeComponent();
    19.             // Data
    20.             var carList = new List<Car>();
    21.             carList.Add(new Car() { Name = "C001" });
    22.             carList.Add(new Car() { Name = "C002" });
    23.             carList.Add(new Car() { Name = "C003" });
    24.             carList.Add(new Car() { Name = "C004" });
    25.             carList.Add(new Car() { Name = "C005" });
    27.             // Binding
    28.             this.ListBox001.ItemsSource = carList;
    29.         }
    30.     }
    31. }

  • 程序代码(.XAML)

    1. <!--Resources-->
    2. <phone:PhoneApplicationPage.Resources>
    4.     <!--Car Template-->
    5.     <DataTemplate x:Key="CarTemplate">
    6.         <StackPanel Background="LightGreen"  Margin="12,6" FlowDirection="LeftToRight">
    7.             <TextBlock Text="Car" />
    8.             <CheckBox Content="{Binding Path=Name}" />
    9.         </StackPanel>
    10.     </DataTemplate>
    12. </phone:PhoneApplicationPage.Resources>
    14. <!--LayoutRoot-->
    15. <ListBox x:Name="ListBox001">
    17.     <!--ItemTemplate-->
    18.     <ListBox.ItemTemplate>
    19.         <StaticResource ResourceKey="CarTemplate" />
    20.     </ListBox.ItemTemplate>
    22.     <!--Style-->
    23.     <ListBox.ItemContainerStyle>
    24.         <Style TargetType="ListBoxItem">
    25.             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    26.         </Style>
    27.     </ListBox.ItemContainerStyle>
    29. </ListBox>

而在一些更复杂的开发项目中，画面上不单单只需要呈现一种的数据类别，而是需要呈现数据类别的各种延伸数据类别，并且这些不同种类的延伸数据类别，在经过Binding之后于画面上必须要有不同种类的呈现外观。例如下列的范例，Car类别为基础数据类别，Truck类别、Sedan类别各自为Car类别的延伸类别，这些Truck类别、Sedan类别在经过Binding之后，于画面上Truck类别会有一种呈现外观、而Sedan类别会有另外一种呈现外观。

本篇文章介绍如何在Binding时，依照数据类别的DataType选择对应的DataTemplate，用以在Binding之后，于画面上依照不同数据类别来呈现不同外观，为自己留个纪录也希望能帮助到有需要的开发人员。

  • 类别结构

  • 类别程序代码(.CS)

    1. public class Car
    2. {
    3.     public string Name { get; set; }
    4. }       
    6. public class Truck : Car
    7. {
    8.     public int MaxLoad { get; set; }
    9. }
    11. public class Sedan : Car
    12. {
    13.     public int MaxSpeed { get; set; }
    14. }

在WPF中，依照DataType选择DataTemplate

在WPF中，可以定义DataTemplate.DataType这个属性，用来指定DataTemplate所对应的数据类别。当定义这个属性之后，WPF应用程序在Binding时，就可以依照数据对象的DataType选择DataTemplate，并且使用这个DataTemplate的定义来呈现数据对象。例如下列的范例，Truck类别、Sedan类别在经过Binding之后，于画面上Truck类别会有一种呈现外观、而Sedan类别会有另外一种呈现外观。

  • 执行结果

  • 程序代码(.CS)

    1. namespace BindingSample002
    2. {
    3.     public partial class MainWindow : Window
    4.     {
    5.         // Constructors
    6.         public MainWindow()
    7.         {
    8.             // Initialize
    9.             this.InitializeComponent();
    11.             // Source
    12.             var carList = new List<Car>();
    13.             carList.Add(new Truck() { Name = "T001", MaxLoad = 100 });
    14.             carList.Add(new Sedan() { Name = "S002", MaxSpeed = 200 });
    15.             carList.Add(new Truck() { Name = "T003", MaxLoad = 300 });
    16.             carList.Add(new Truck() { Name = "T004", MaxLoad = 400 });
    17.             carList.Add(new Sedan() { Name = "S005", MaxSpeed = 500 });
    19.             // Binding
    20.             this.ListBox001.ItemsSource = carList;
    21.         }
    22.     }
    23. }

  • 程序代码(.XAML)

    1. <!--Resources-->
    2. <Window.Resources>
    4.     <!--Truck Template-->
    5.     <DataTemplate DataType="{x:Type models:Truck}">
    6.         <StackPanel Background="LightBlue"  Margin="12,6" FlowDirection="LeftToRight">
    7.             <TextBlock Text="Truck" />
    8.             <CheckBox Content="{Binding Path=Name}" />
    9.             <CheckBox Content="{Binding Path=MaxLoad}" />
    10.         </StackPanel>
    11.     </DataTemplate>
    13.     <!--Sedan Template-->
    14.     <DataTemplate DataType="{x:Type models:Sedan}">
    15.         <StackPanel Background="LightPink" Margin="12,6" FlowDirection="RightToLeft">
    16.             <TextBlock Text="Sedan" />
    17.             <TextBlock Text="{Binding Path=Name}" />
    18.             <TextBlock Text="{Binding Path=MaxSpeed}" />
    19.         </StackPanel>
    20.     </DataTemplate>
    22. </Window.Resources>
    24. <!--LayoutRoot-->
    25. <ListBox x:Name="ListBox001">
    27.     <!--Style-->
    28.     <ListBox.ItemContainerStyle>
    29.         <Style TargetType="ListBoxItem">
    30.             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    31.         </Style>
    32.     </ListBox.ItemContainerStyle>
    34. </ListBox>

在WP8中，依照DataType选择DataTemplate

因为一些原因，在WP8中目前没有提供DataTemplate.DataType这个属性，用来指定DataTemplate所对应的数据类别，这也让WP8应用程序，没有办法提供在Binding之后，于画面上依照不同数据类别来呈现不同外观的这个功能。但是山不转路转，开发人员还是可以透过Binding机制、结合自定义的IValueConverter，来提供依照DataType选择DataTemplate这个功能。

  • 程序代码(.XAML)

首先在页面中使用下列的XAML宣告来取代原有的DataTemplate，让DataTemplate的选择机制，改为使用Binding以及自定义的TypeTemplateConverter来提供。

  • 程序代码(.XAML)

    1. <!--LayoutRoot-->
    2. <ListBox x:Name="ListBox001">
    4.     <!--ItemTemplate-->
    5.     <ListBox.ItemTemplate>
    6.         <DataTemplate>
    7.             <ContentControl Content="{Binding}" ContentTemplate="{Binding Converter={StaticResource TypeTemplateConverter}}" HorizontalContentAlignment="Stretch" />
    8.         </DataTemplate>
    9.     </ListBox.ItemTemplate>
    11.     <!--Style-->
    12.     <ListBox.ItemContainerStyle>
    13.         <Style TargetType="ListBoxItem">
    14.             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    15.         </Style>
    16.     </ListBox.ItemContainerStyle>
    18. </ListBox>

接着就是依照下列的程序代码来建立自定义的TypeTemplateConverter。这个自定义的TypeTemplateConverter实作IValueConverter，用来处理Binding的目标数据对象，并且依照目标数据对象的型别来提供DataTemplate。

这个设计直觉上会认为没有问题，但实际撰写这个Converter的时候会发现，接收目标数据对象、取得目标数据对象型别这些功能实作都没有问题，但是如何取得DataTemplate却是一个问题(范例中[???]部分的程序代码)。在TypeTemplateConverter并没有定义DataTemplate的来源，没有来源就没有办法取得DataTemplate，那当然也就没有办法依照目标数据对象型别来提供DataTemplate。

  • 程序代码(.CS)

    1. public sealed class TypeTemplateConverter : IValueConverter
    2. {
    3.     // Methods
    4.     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    5.     {
    6.         // Require
    7.         if (value == null) return null;
    9.         // TypeName
    10.         string typeName = value.GetType().ToString();
    12.         // DataTemplate
    13.         DataTemplate dataTemplate = [???];
    14.         if (dataTemplate == null) return null;
    16.         // Convert
    17.         return dataTemplate;
    18.     }
    20.     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    21.     {
    22.         throw new NotImplementedException();
    23.     }
    24. }

这时为了提供DataTemplate的来源，开发人员可以为TypeTemplateConverter类别加入System.Windows.FrameworkElement类别的继承，这样就可以使用FrameworkElement的Resources属性做为DataTemplate的来源。在这之后TypeTemplateConverter就可以使用目标数据对象型别作为索引，取得Resources属性之中的DataTemplate，用以提供Binding机制使用。

  • 程序代码(.CS)

    1. namespace BindingSample003.Converters
    2. {
    3.     public sealed class TypeTemplateConverter : System.Windows.FrameworkElement, IValueConverter
    4.     {
    5.         // Methods
    6.         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    7.         {
    8.             // Require
    9.             if (value == null) return null;
    11.             // TypeName
    12.             string typeName = value.GetType().ToString();
    14.             // DataTemplate
    15.             var dataTemplate = this.Resources[typeName] as DataTemplate;
    16.             if (dataTemplate == null) return null;
    18.             // Convert
    19.             return dataTemplate;
    20.         }
    22.         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    23.         {
    24.             throw new NotImplementedException();
    25.         }
    26.     }
    27. }

为TypeTemplateConverter类别加入System.Windows.FrameworkElement类别的继承之后，在XAML定义中就可以使用XAML语法来定义TypeTemplateConverter对象所要提供的DataTemplate。

  • 程序代码(.XAML)

    1. <!--Resources-->
    2. <phone:PhoneApplicationPage.Resources>
    4.     <!--Converter-->
    5.     <converters:TypeTemplateConverter x:Key="TypeTemplateConverter" >
    6.         <converters:TypeTemplateConverter.Resources>
    8.             <!--Truck Template-->
    9.             <DataTemplate x:Key="BindingSample003.Models.Truck">
    10.                 <StackPanel Background="LightBlue"  Margin="12,6" FlowDirection="LeftToRight">
    11.                     <TextBlock Text="Truck" />
    12.                     <CheckBox Content="{Binding Path=Name}" />
    13.                     <CheckBox Content="{Binding Path=MaxLoad}" />
    14.                 </StackPanel>
    15.             </DataTemplate>
    17.             <!--Sedan Template-->
    18.             <DataTemplate x:Key="BindingSample003.Models.Sedan">
    19.                 <StackPanel Background="LightPink" Margin="12,6" FlowDirection="RightToLeft">
    20.                     <TextBlock Text="Sedan" />
    21.                     <TextBlock Text="{Binding Path=Name}" />
    22.                     <TextBlock Text="{Binding Path=MaxSpeed}" />
    23.                 </StackPanel>
    24.             </DataTemplate>
    26.         </converters:TypeTemplateConverter.Resources>
    27.     </converters:TypeTemplateConverter>
    29. </phone:PhoneApplicationPage.Resources>

完成上列的设计与定义之后，透过Binding机制、结合自定义的TypeTemplateConverter，WP8应用程序在Binding时，就可以依照数据对象的DataType选择DataTemplate，并且使用这个DataTemplate的定义来呈现数据对象。例如下列的范例，Truck类别、Sedan类别在经过Binding之后，于画面上Truck类别会有一种呈现外观、而Sedan类别会有另外一种呈现外观。

  • 执行结果

  • 程序代码(.CS)

    1. namespace BindingSample003
    2. {
    3.     public partial class MainPage : PhoneApplicationPage
    4.     {
    5.         // Constructors
    6.         public MainPage()
    7.         {
    8.             // Initialize
    9.             this.InitializeComponent();
    11.             // Data
    12.             var carList = new List<Car>();
    13.             carList.Add(new Truck() { Name = "T001", MaxLoad = 100 });
    14.             carList.Add(new Sedan() { Name = "S002", MaxSpeed = 200 });
    15.             carList.Add(new Truck() { Name = "T003", MaxLoad = 300 });
    16.             carList.Add(new Truck() { Name = "T004", MaxLoad = 400 });
    17.             carList.Add(new Sedan() { Name = "S005", MaxSpeed = 500 });
    19.             // Binding
    20.             this.ListBox001.ItemsSource = carList;
    21.         }
    22.     }
    23. }

  • 程序代码(.XAML)

    1. <!--Resources-->
    2. <phone:PhoneApplicationPage.Resources>
    4.     <!--Converter-->
    5.     <converters:TypeTemplateConverter x:Key="TypeTemplateConverter" >
    6.         <converters:TypeTemplateConverter.Resources>
    8.             <!--Truck Template-->
    9.             <DataTemplate x:Key="BindingSample003.Models.Truck">
    10.                 <StackPanel Background="LightBlue"  Margin="12,6" FlowDirection="LeftToRight">
    11.                     <TextBlock Text="Truck" />
    12.                     <CheckBox Content="{Binding Path=Name}" />
    13.                     <CheckBox Content="{Binding Path=MaxLoad}" />
    14.                 </StackPanel>
    15.             </DataTemplate>
    17.             <!--Sedan Template-->
    18.             <DataTemplate x:Key="BindingSample003.Models.Sedan">
    19.                 <StackPanel Background="LightPink" Margin="12,6" FlowDirection="RightToLeft">
    20.                     <TextBlock Text="Sedan" />
    21.                     <TextBlock Text="{Binding Path=Name}" />
    22.                     <TextBlock Text="{Binding Path=MaxSpeed}" />
    23.                 </StackPanel>
    24.             </DataTemplate>
    26.         </converters:TypeTemplateConverter.Resources>
    27.     </converters:TypeTemplateConverter>
    29. </phone:PhoneApplicationPage.Resources>
    31. <!--LayoutRoot-->
    32. <ListBox x:Name="ListBox001">
    34.     <!--ItemTemplate-->
    35.     <ListBox.ItemTemplate>
    36.         <DataTemplate>
    37.             <ContentControl Content="{Binding}" ContentTemplate="{Binding Converter={StaticResource TypeTemplateConverter}}" HorizontalContentAlignment="Stretch" />
    38.         </DataTemplate>
    39.     </ListBox.ItemTemplate>
    41.     <!--Style-->
    42.     <ListBox.ItemContainerStyle>
    43.         <Style TargetType="ListBoxItem">
    44.             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    45.         </Style>
    46.     </ListBox.ItemContainerStyle>
    48. </ListBox>

[WP8] Binding时，依照DataType选择DataTemplate的更多相关文章

  1. [WP8] Binding时，依照DataType来选择DataTemplate

    原文 [WP8] Binding时,依照DataType来选择DataTemplate 范例下载 范例程序代码:点此下载 问题情景 在开发WPF.WP8...这类应用程序的时候,透过Binding机制 ...

  2. 背水一战 Windows 10 (76) - 控件（控件基类）: Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素

    [源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...

  3. 当没有用 EXISTS 引入子查询时，在选择列表中只能指定一个表达式。

    当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式.比如 select * from T_Employee where FNumber not in ( select top 5*  ...

  4. Linux系统安装时分区的选择（推荐）

    Linux系统安装时分区的选择(推荐)  出处:http://www.cnblogs.com/gylei/archive/2011/12/04/2275987.html 前言: 以前初识Linux时, ...

  5. SQL2005：SQL Server 2005还原数据库时出现“不能选择文件或文件组XXX_log用于此操作的解决办法

    SQL2005 还原数据库失败,提示如下: SQL Server 2005还原数据库时出现“不能选择文件或文件组XXX_log用于此操作的解决办法 出现错误时操作步骤为:右击数据库--->任务- ...

  6. （转）Linux系统安装时分区的选择

    场景:对于Linux系统的分区总是迷迷茫茫的,还是实践少,基础不牢. 以前初识Linux时,对Linux系统安装时分区的选择,一点都不了解,导致几次没法进行下一步安装,因此就静下心来,专门拿出时间研究 ...

  7. 构建现代Web应用时究竟是选择传统web应用还是SPA

    在大前端盛行的今天,似乎前后端分离的开发模式才是大势所趋,而SPA的概念更是应运而生.现在随便构建一个web应用程序如果你不是使用SPA的话,就会感觉有点low,但是真的是这样吗?今天这篇文章我们就来 ...

  8. 解决radio、select表单返回时，再次选择失效

    应用场景:我们在选择好radio跟select之后提交表单,返回历史记录时,再次选择,提交表单,发现提交的是上次表单选择的 解决办法:我们可以一进页面就给radio跟select的选项重置掉,因为,返 ...

  9. MyBatis 内置日志工厂基于运行时自省机制选择合适的日志工具

    mybatis – MyBatis 3 | 日志 http://www.mybatis.org/mybatis-3/zh/logging.html MyBatis 内置日志工厂基于运行时自省机制选择合 ...

随机推荐

  1. 算法导论第十八章 B树

    一.高级数据结构 本章以后到第21章(并查集)隶属于高级数据结构的内容.前面还留了两章:贪心算法和摊还分析,打算后面再来补充.之前的章节讨论的支持动态数据集上的操作,如查找.插入.删除等都是基于简单的 ...

  2. 图文安装Windows Template Library - WTL Version 9.0

    从http://wtl.sourceforge.net/下载 WTL 9.0,或者点此链接下载:WTL90_4140_Final.zip,然后解压到你的VC目录下面, 我的地址是:C:\Program ...

  3. [转]Handy adb commands for Android

    转自:http://www.growingwiththeweb.com/2014/01/handy-adb-commands-for-android.html View connected devic ...

  4. 【迁移学习】2010-A Survey on Transfer Learning

    资源:http://www.cse.ust.hk/TL/ 简介: 一个例子: 关于照片的情感分析. 源:比如你之前已经搜集了大量N种类型物品的图片进行了大量的人工标记(label),耗费了巨大的人力物 ...

  5. Inkpad中文翻译已合并到官方项目

    今天 Steve Sprang 已合并了#100提交请求,Inkpad即将在AppStore上发布简体中文版了! 20天前因一个偶然原因启动翻译的: 当晚(周六)我想对iPad上的矢量绘图软件进行交互 ...

  6. ARM Linux 3.x的设备树(Device Tree)

    1. ARM Device Tree起源 Linus Torvalds在2011年3月17日的ARM Linux邮件列表宣称“this whole ARM thing is a f*cking pai ...

  7. shell 和awk性能对比

    time for ((i=0;i<10000;i++)) do ((sum+=i)); done real    0m0.086suser    0m0.079ssys    0m0.007s ...

  8. MySQL工具汇总

    本博客已经迁移至:http://cenalulu.github.io/ 本篇博文已经迁移,阅读全文请点击:http://cenalulu.github.io/mysql/mysql-tools-lis ...

  9. Spring Remoting: Burlap--转

    原文地址:http://www.studytrails.com/frameworks/spring/spring-remoting-burlap.jsp Concept Overview In the ...

  10. ShortcutMapper – 热门应用程序的可视化快捷键

    ShortcutMapper 是一个流行应用程序的键盘快捷键映射.该应用程序使用 Ajax 调用来加载键盘和应用程序数据.首先,试图找到一个在线资源,其中列出了每个平台的所有应用程序快捷方式.然后你可 ...