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方式來打造一個個性列表控件來得更方便。