datatemplate

datatemplate

ControlTemplate 和 DataTemplate 是两个非常重要的概念，它们分别用于定义控件的外观和数据对象的显示方式。

TemplateBinding 用来绑定使用当前模板的控件的属性值

   <!-- 定义自定义按钮模板 -->
        <ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    CornerRadius="10">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
        </ControlTemplate>

DataTemplate

• 自定义数据对象的显示形式。
• 用于 ItemsControl（如 ListBox、ComboBox 等）中，定义每个数据项的外观。
• 提供一种方式将数据模型与视图分离。
• DataType：指定模板适用的数据类型。
• {Binding}：将数据对象的属性绑定到 UI 元素。
• DataTemplate 的自动应用：当数据对象与 DataType 匹配时，WPF 会自动应用对应的 DataTemplate。

示例：

/// <summary>
/// Car数据类型 -- 必须定义成属性{ get; set; }
/// </summary>
public class Car
{
    public string Name { get; set; }
    public string ImagePath { get; set; }
    public string Automarker { get; set; }
    public string Year { get; set; }
}
//汽车厂商和名称不能直接拿来作为图片路径，这时就要使用Converter:

/// <summary>
    /// 路径转图片
    /// </summary>
    public class PathToImage:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string url = (string)value;
            return(new BitmapImage(new Uri(url, UriKind.Relative)));
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

完整 XAML代码

<Window x:Class="WpfApplication11.wnd112"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication11" //本地namespace
        Title="DataTemplate" Height="350" Width="623">
    <Window.Resources>
        <!--Convert-->
        <local:PathToImage x:Key="_path2Image"></local:PathToImage> //使用converter
        <!--DataTemplate for Detail View -->
        <DataTemplate x:Key="_carDetailViewTemplate">
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
                <StackPanel Margin="5">
                    <Image Width="400" Height="250" Source="{Binding Path=ImagePath, Converter={StaticResource _path2Image}}"></Image>
                    <StackPanel Orientation="Horizontal" Margin="5, 0">
                        <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"></TextBlock>
                        <TextBlock Text="{Binding Path=Name}" FontSize="20" 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 Path=Automarker, Converter={StaticResource _path2Image}}" Grid.RowSpan="3"
                           Width="64" Height="64"></Image>
                    <StackPanel Margin="5,10">
                        <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 Path=SelectedItem, ElementName=_listBoxCars}"></UserControl>
        <ListBox x:Name="_listBoxCars" Width="180" Margin="5,0" ItemTemplate="{StaticResource _carListItemViewTemplate}"></ListBox>
    </StackPanel>
</Window>

关键点：
DataTemplate 的 DataType 指定了模板适用的数据类型（这里是 Person）。
使用 {Binding} 将数据对象的属性（如 Name 和 Age）绑定到 TextBlock 的 Text 属性。
ListBox 会自动应用 DataTemplate 来显示每个 Person 对象.

ContentTemplate=“{StaticResource _carDatialViewTemplate}”，相当于给一个普通的UserControl穿上了一件外衣、让Car数据以图文并茂的方式展现出来。这件外衣就是x:Key=“_carDatialViewTemplate"标记的DataTemplate资源。
ItemTemplate=”{StaticResource _listBoxCars}“，把每一件数据的外衣交给ListBox，当ListBox的ItemSource被赋值的时候，ListBox就会为每个条目穿上这件外衣。这件外衣是以x:Key=”_listBoxCars"标记的DataTemplate资源。
因为不再使用事件驱动，而且为数据穿衣服的事也已经自动完成，所以后台的C#代码就非常的简单。窗体的C#代码就只剩下这些

    /// <summary>
    /// wnd112.xaml 的交互逻辑
    /// </summary>
    public partial class wnd112 : Window
    {
        List<Car> _carList;
        public wnd112()
        {
            InitializeComponent();
 
            _carList = new List<Car>()
            {
                new Car(){Name = "Aodi1", ImagePath=@"/Resources/Images/Aodi.jpg", Automarker=@"/Resources/Images/01077_1.png", Year="1990"},
                new Car(){Name = "Aodi2", ImagePath=@"/Resources/Images/Aodi.png", Automarker=@"/Resources/Images/01077_1.png", Year="2001"},
            };
 
            _listBoxCars.ItemsSource = _carList;
        }
    }