原文地址 http://www.rzrgm.cn/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方式來打造一個個性列表控件來得更方便。
浙公網安備 33010602011771號