WPF之数据模板（DataTemplate）

简介

和控件模板一样，数据模板（DataTemplate）就是用来自定义数据的表现形式，对itemscontrol类的控件十分的有用，可以改变列表项的外观和，更有表现能力

使用

本示例一样采用两种方式演示，第一种是放在资源文件，第二种则直接使用
xaml部分

    <Window.Resources>
        <DataTemplate x:Key="XTree">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"></TextBlock>
                <TextBlock Text="---"></TextBlock>
                <TextBlock Text="{Binding Age}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>


    <Grid>
        <ComboBox x:Name="cbo" Width="100" Height="20">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock Text="---"></TextBlock>
                        <TextBlock Text="{Binding Age}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <ComboBox x:Name="cbo2" Width="100" Height="20" HorizontalAlignment="Left" ItemTemplate="{StaticResource XTree}">

        </ComboBox>
    </Grid>

cs部分

namespace WpfAppLearn
{
    /// <summary>
    /// DataTemplateWin.xaml 的交互逻辑
    /// </summary>
    public partial class DataTemplateWin : Window
    {
        public DataTemplateWin()
        {
            InitializeComponent();
            List<Student> list = new List<Student>();
            for (int i = 0; i < 10; i++)
            {
                list.Add(new Student() { Name = $"NAME{i}", Age = i });
            }
            cbo.ItemsSource = list;


            List<Student> list2 = new List<Student>();
            for (int i = 0; i < 10; i++)
            {
                list2.Add(new Student() { Name = $"名字{i}", Age = i });
            }
            cbo2.ItemsSource = list2;
        }
    }
    public class Student()
    {
        public string? Name { get; set; }
        public int? Age { get; set; }
    }
}

最终表现分别问：

image.png
image.png