DataTemplate顾名思义,就是数据模板,用来指定数据的表现形式。这对于ItemsControl类的控件尤其有用,可以改变列表项的外观,更具有表现能力。
例如
<Grid>
<Grid.Resources>
<src:Customers x:Key=”customers”/>
</Grid.Resources>
<ListBox ItemsSource=”{StaticResource customers}” Width=”350″ Margin=”0,5,0,10″>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation=”Horizontal”>
<TextBlock Padding=”5,0,5,0″
Text=”{Binding FirstName}” />
<TextBlock Text=”{Binding LastName}” />
<TextBlock Text=”, ” />
<TextBlock Text=”{Binding Address}” />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
上例中通过指定ListBox.ItemTemplate属性来定义子项的显示格式,如果不是列表项,可以通过控件的ContentTemplate属性来指定应用哪个数据模板。
使用起来比较简单,大概分为三步:
1.如果有些属性不是可以直接使用,需要转换的,写转换器,实现IValueConverter接口
2.定义好转换器之后,需要实例化,指定给需要的绑定
3.定义模板,也就是需要的显示格式
4.应用模板,把定义好的模板指定到目标控件的ContentTemplate或者ItemTemplate
看一个完整的例子
1.用来封装的实体类和转换器
class Car
{
public string Automaker { get; set; }
public string Name { get; set; }
public string Year { get; set; }
public string TopSpeed { get; set; }
}
//厂商名称转化为Logo图片
public class AutomakerToLogoPathConverter:IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string uriStr = string.Format(@”images/{0}.jpg”,value.ToString());
return new BitmapImage(new Uri(uriStr, UriKind.Relative));
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
//汽车名称转化为图像
public class NameToPhotoPathConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string uriStr = string.Format(@”images/{0}.jpg”, value.ToString());
return new BitmapImage(new Uri(uriStr, UriKind.Relative));
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
2.模板及窗体
<Window x:Class=”TempaletPractise.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”clr-namespace:TempaletPractise”
Title=”汽车展览” Height=”350″ Width=”623″>
<Window.Resources>
<!–Converter–>
<local:AutomakerToLogoPathConverter x:Key=”a2l”></local:AutomakerToLogoPathConverter>
<local:NameToPhotoPathConverter x:Key=”n2p”></local:NameToPhotoPathConverter>
<!–Data Template for Detail View–>
<DataTemplate x:Key=”carDetailViewTemplate”>
<Border BorderBrush=”Black” BorderThickness=”1″ CornerRadius=”6″>
<StackPanel Margin=”5″>
<Image Width=”400″ Height=”250″ Source=”{Binding Name, Converter={StaticResource n2p}}”></Image>
<StackPanel Orientation=”Horizontal” Margin=”5,0″>
<TextBlock Text=”Name:” FontWeight=”Bold” FontSize=”20″></TextBlock>
<TextBlock Text=”{Binding Name}” FontSize=”20″ Margin=”5,0″></TextBlock>
</StackPanel>
<StackPanel Orientation=”Horizontal” Margin=”5,0″>
<TextBlock Text=”Automaker” FontWeight=”Bold”></TextBlock>
<TextBlock Text=”{Binding Automaker}” Margin=”5,0″></TextBlock>
<TextBlock Text=”Year” FontWeight=”Bold”></TextBlock>
<TextBlock Text=”{Binding Year}” Margin=”5,0″></TextBlock>
<TextBlock Text=”Top Speed” FontWeight=”Bold”></TextBlock>
<TextBlock Text=”{Binding TopSpeed}” Margin=”5,0″></TextBlock>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
<!–DataTemplate for Item View–>
<DataTemplate x:Key=”carListItemViewTemplate”>
<Grid Margin=”2″>
<StackPanel Orientation=”Horizontal”>
<Image Source=”{Binding Automaker,Converter={StaticResource a2l}}”
Grid.RowSpan=”3″ Width=”64″ Height=”64″></Image>
<StackPanel Margin=”5,0″>
<TextBlock Text=”{Binding Name}” FontSize=”16″ FontWeight=”Bold”></TextBlock>
<TextBlock Text=”{Binding Year}” FontSize=”14″></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</Window.Resources>
<!–窗体的内容–>
<StackPanel Orientation=”Horizontal” Margin=”5″>
<UserControl ContentTemplate=”{StaticResource carDetailViewTemplate}”
Content=”{Binding SelectedItem, ElementName=listBoxCars}”></UserControl>
<ListBox x:Name=”listBoxCars” Width=”180″ Margin=”5,0″ ItemTemplate=”{StaticResource carListItemViewTemplate}”></ListBox>
</StackPanel>
</Window>
3.指定数据源
private void InitialCarList()
{
List<Car> cars = new List<Car>()
{
new Car(){ Automaker=”CADILLAC”,Name=”CADILLAC1″,Year=”1990″,TopSpeed=”340″},
new Car(){ Automaker=”Ferrari”,Name=”Ferrari1″,Year=”1991″,TopSpeed=”350″},
new Car(){ Automaker=”LAMBORGHINI”,Name=”LAMBORGHINI1″,Year=”1992″,TopSpeed=”360″},
new Car(){ Automaker=”PORSCHE”,Name=”PORSCHE1″,Year=”1993″,TopSpeed=”370″}
};
this.listBoxCars.ItemsSource = cars;