WPF中的数据模板(DataTemplate)(转)

原文地址 http://www.cnblogs.com/zhouyinhui/archive/2007/03/30/694388.html

WPF中的数据模板(DataTemplate)
                                                                                                                          周银辉

在WPF中咱们能够为本身的数据定制显示方式，也就是说虽然某数据数据是必定的，但咱们能够作到让它的表现方式多种多样，好比一个时间，在之前咱们通常使用一个字符串（好比“12：03”）来显示，但咱们为何就不能显示一个小时钟呢，其实这更合乎情理，利用WPF中的数据模板技术随意并轻松地表现你的数据.

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

咱们假设有以下一个类

using System;

namespace Demo
{
    public class People
    {
        private string name;

        private string photo;

        public People(string name, string photo)
        {
            this.name = name;
            this.photo = photo;
        }

        public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                this.name = value;
            }
        }

        public string Photo
        {
            get
            {
                return this.photo;
            }
            set
            {
                this.photo = value;
            }
        }
    }
}

这个类很简单地表示了一我的，他的姓名和他的照片（路径）

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

参考如下代码:

<ListBox x:Name="ListBox_PeopleList" ItemTemplate="{StaticResource  MyTemplate}" />

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

xmlns:demo="clr-namespace:Demo" 

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

下面的代码来定义咱们的MyTemplate模板，以便告诉咱们的列表如何来显示他的项目：

<Window.Resources>        
    <!--列表模板-->
    <DataTemplate x:Key="MyTemplate" DataType="{x:Type demo:People}">
      <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="4,4,4,4" >
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Photo}" Width="50" Height="50" Grid.Column="0" Grid.RowSpan="1"/>
        <TextBlock Text="{Binding Name}" Grid.Column="1" Grid.ColumnSpan="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Grid>
    </DataTemplate>
</Window.Resources>

咱们将模板定义为窗口的资源，资源保存在一个资源字典中的，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对象按这种方式展现给用户的时候，咱们只要将该数据模板指定给要显示People对象的那个控件就能够了。
好比

<ListBox x:Name="ListBox_PeopleList" ItemTemplate="{StaticResource  MyTemplate}" />

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

呵呵，这样是否是比之前Code方式来打造一个个性列表控件来得更方便。