WPF数据模板轻松实现数据显示

开发 开发工具
WPF数据模板主要适用于Content Control类控件与Items Control类控件。在实际应用中可以帮助我们实现许多功能的需求。

我们在进行开发程序的时候,经常会碰到要处理一个图形界面的需求。微软公司根据这一需求,开发了一个叫做WPF的图形界面显示工具。#t#

在WPF中我们可以为自己的数据定制显示方式,也就是说虽然某数据数据是一定的,但我们可以做到让它的表现方式多种多样,比如一个时间,在以前我们一般使用一个字符串(比如“12:03”)来显示,但我们为什么就不能显示一个小时钟呢,其实这更合乎情理,利用WPF数据模板技术随意并轻松地表现你的数据.

WPF数据模板适用于Content Control类控件与Items Control类控件.

我们假设有如下一个类

  1. using System;  
  2. namespace Demo  
  3. {  
  4. public class People  
  5. {  
  6. private string name;  
  7. private string photo;  
  8. public People(string 
    name, string photo)  
  9. {  
  10. this.name = name;  
  11. this.photo = photo;  
  12. }  
  13. public string Name  
  14. {  
  15. get  
  16. {  
  17. return this.name;  
  18. }  
  19. set  
  20. {  
  21. this.name = value;  
  22. }  
  23. }  
  24. public string Photo  
  25. {  
  26. get  
  27. {  
  28. return this.photo;  
  29. }  
  30. set  
  31. {  
  32. this.photo = value;  
  33. }  
  34. }  
  35. }  

这个类很简单地表示了一个人,他的姓名和他的照片(路径)

如果在我们的软件中有一个列表控件ListBox来显示一个由多个人组成的列表,在.net 3.0以前我们可能就只能用文本来列出人的姓名而已,或者花不少的精力来重写列表控件以便在列表中在显示人名的同时显示照片.

参考以下代码:

  1. < ListBox x:Name="ListBox_
    PeopleList"
     ItemTemplate="
    {StaticResource MyTemplate}"
     /> 

我们定义了一个ListBox,并将其ItemTemplate制定为我们自定义的MyTemplate,也就是说列表项将按照MyTemplate制定的方式来显示列表内容。
这样我们就可以发挥我们的想像力来自定义MyTemplate
为了能在XAML中使用我们的People类,我们需要将其名字空间引入,参考以下代码:

  1. xmlns:demo="clr-nam
    espace:Demo"
      

其中Demo是我们的People类所在的名字空间,以后可以使用demo来表示这个名字空间了.

下面的代码来定义我们的MyTemplate的WPF数据模板,以便告诉我们的列表如何来显示他的项目:

  1. < Window.Resources>   
  2. < !--列表模板--> 
  3. < DataTemplate x:Key="MyTemplate"
     DataType="{x:Type demo:People}"> 
  4. < Grid VerticalAlignment="Center" 
    HorizontalAlignment="Center" 
    Margin="4,4,4,4" > 
  5. < Grid.ColumnDefinitions> 
  6. < ColumnDefinition Width="Auto"/> 
  7. < ColumnDefinition Width="Auto"/> 
  8. < /Grid.ColumnDefinitions> 
  9. < Image Source="{Binding Photo}" 
    Width="50" Height="50" Grid.Column=
    "0" Grid.RowSpan="1"/> 
  10. < TextBlock Text="{Binding Name}" 
    Grid.Column="1" Grid.ColumnSpan="1" 
    HorizontalAlignment="Center" Vertical
    Alignment
    ="Center"/> 
  11. < /Grid> 
  12. < /DataTemplate> 
  13. < /Window.Resources> 

我们将WPF数据模板定义为窗口的资源,资源保存在一个资源字典中的,x:Key="MyTemplate" 表示其在资源字典中的键,DataType="{x:Type demo:People}"表示该数据模板针对的数据类型是demo名字空间下的People类,接下来在Gird中我们定义了该数据模板的视觉树,这也是我们的工作重心,即该视觉树定义了如何显示我们的数据。

我们使用了一个Image控件并将其Source绑定到People的Photo属性上,这样以便在该Imag控件上显示照片,然后在Image的右边我们使用一个TextBlock控件来显示人名(将People的Name属性绑定到TextBlock的Text属性上)。

注意到这个数据模板实际上在干什么:它定义了People类型对象的表现方式,在这里是显示People的照片并在照片的右方显示姓名。

以后我们需要People对象按这种方式展示给用户的时候,我们只要将该WPF数据模板指定给要显示People对象的那个控件就可以了。

比如

  1. < ListBox x:Name=
    "ListBox_PeopleList" 
    ItemTemplate="{Static
    Resource MyTemplate}"
     /> 

就告诉我们的列表控件按照MyTemplate定义的方式来显示其项目。

呵呵,这样是不是比以前Code方式来打造一个个性列表控件来得更方便。

责任编辑:曹凯 来源: 博客园
相关推荐

2010-08-05 15:06:19

Flex数据绑定

2011-04-14 10:18:20

数据迁移

2009-12-28 11:14:29

WPF显示文本

2010-09-28 12:59:45

JavaScriptDOM

2009-12-23 18:06:25

WPF模板

2024-01-26 13:23:22

数据分析指标监控型

2010-08-18 09:03:46

jQueryJSONTrimpath

2011-04-13 10:49:53

2009-03-05 10:10:52

饼图数据库JSP

2024-02-05 13:39:00

隐私数据脱敏

2021-02-11 08:27:28

数据

2023-10-07 11:04:58

WPF数据UI

2009-12-24 11:15:59

WPF数据绑定

2023-12-24 12:56:14

C++函数语言

2009-12-23 17:57:22

WPF默认模板

2009-09-11 11:58:00

C# ListBox多

2009-12-23 15:16:52

WPF数据绑定

2016-03-21 09:25:01

2015-10-28 14:03:32

数据迁移数据

2009-12-23 14:30:24

WPF显示动态GIF
点赞
收藏

51CTO技术栈公众号