WPF入门教程系列004-WPF的模板

WPF入门教程系列004-WPF的模板

一、前言

WPF模板是一种用于定义控件外观和行为的工具。它使用XAML语法，允许你完全自定义控件的样式和布局。模板由一系列嵌套的标记组成，用于描述控件的结构、样式和内容。通过创建自定义模板，你可以改变控件的外观，添加交互行为以及实现各种创意和设计要求。

二、数据的外衣DataTemplate

1.介绍

在WPF（Windows Presentation Foundation）中，DataTemplate是一种用于定义数据对象的外观呈现方式的模板。它允许你将数据对象绑定到用户界面元素，并定义如何显示和呈现这些数据。

DataTemplate 常用的地方有 3 处，分别是:

• ContentControl的 ContentTemplate 属性，相当于给 ContentControl的内容穿衣服.

• ItemsControl的 ItemTemplate 属性，相当于给 ItemsControl的数据条目穿衣服.

• GridViewColumn 的CellTemplate 属性，相当于给 GridViewColumn 单元格里的数据穿衣服.

2.示例

需求是这样的:有一列汽车的数据，这列数据显示在一个 ListBox 里，要求 ListBox 的条目显示汽车的厂商图标和简要参数，单击某个条目后在窗体的详细内容区域显示汽车的照片和详细参数

①先像项目中添加图片资源

②添加Car这个数据类型

    public class Car
    {
        public string Automaker { get; set; }
        public string Name { get; set; }
        public string Year { get; set; }
        public string TopSpeed { get; set; }
    }

③新增用户控件 CarListItem，用于在ListBox里面显示Car类型数据

    <Grid Margin="2">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="imageLogo" Grid.RowSpan="3" Width="64" Height="64"/>
            <StackPanel Margin="5,10">
                <TextBlock x:Name="textBlockName" FontSize="16" FontWeight="Bold"/>
                <TextBlock x:Name="textBlockYear" FontSize="14"/>
            </StackPanel>
        </StackPanel>
    </Grid>

    public partial class CarListItem : UserControl
    {

        private Car car;

        public Car Car
        {
            get { return car; }
            set
            {
                car = value;
                this.textBlockName.Text = car.Name;
                this.textBlockYear.Text = car.Year;

                ///模板/log/log.jpg
                string uriStr = string.Format(@"/模板/log/log.jpg", car.Automaker);
                this.imageLogo.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
            }
        }
        public CarListItem()
        {
            InitializeComponent();
        }
    }

④添加用户控件CarDetail,用于为Car类型数据准备一个详细的视图

  <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6" >
        <StackPanel Margin="5">
            <Image x:Name="imagePhoto" Width="400" Height="250"/>
            <StackPanel Orientation="Horizontal" Margin="5,0">
                <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
                <TextBlock x:Name="textBlockName" FontSize="20" Margin="5,0"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5,0">
                <TextBlock Text="Automaker:" FontWeight="Bold"/>
                <TextBlock x:Name="textBlockAutomaker" Margin="5,0" />
                <TextBlock Text="Year:" FontWeight="Bold" />
                <TextBlock x:Name="textBlockYear" Margin="5,0"/>
                <TextBlock Text="Top Speed:" FontWeight="Bold"/>
                <TextBlock x:Name="textBlockTopSpeed" Margin="5,0"/>
            </StackPanel>
        </StackPanel>

    </Border>

  public partial class CarDetail : UserControl
    {
        private Car car;

        public Car Car
        {
            get { return car; }
            set
            {
                car = value;
                this.textBlockName.Text = car.Name;
                this.textBlockYear.Text = car.Year;
                this.textBlockTopSpeed.Text = car.TopSpeed;
                this.textBlockAutomaker.Text = car.Automaker;
                string uriStr = string.Format(@"/模板/Image/{0}.jpg", car.Name);
                this.imagePhoto.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
            }
        }
        public CarDetail()
        {
            InitializeComponent();
        }
    }

⑤最后把它们组装到主窗体中

    <StackPanel Orientation="Horizontal" Margin="5">
        <local:CarDetail x:Name="detailView"/>
        <ListBox x:Name="listBoxCars" Width="180" Margin="5,0"
                 SelectionChanged="listBoxCars_SelectionChanged"/>
    </StackPanel>

    public partial class main : Window
    {
        public main()
        {
            InitializeComponent();
            InitialCarList();
        }

        // 初始化ListBox
        private void InitialCarList()
        {
            List<Car> carList = new List<Car>()
            {
                  new Car(){ Automaker = "Lamborghini", Name = "1", Year ="1990", TopSpeed ="340" },
                  new Car(){ Automaker = "Lamborghini", Name = "2", Year ="1990", TopSpeed ="340" },
                  new Car(){ Automaker = "Lamborghini", Name = "3", Year ="1990", TopSpeed ="340" },
                  new Car(){ Automaker = "Lamborghini", Name = "4", Year ="1990", TopSpeed ="340" }
            };
            foreach(Car car in carList)
            {
                CarListItem view = new CarListItem();
                view.Car = car;
                this.listBoxCars.Items.Add(view); 
            }
        }

        private void listBoxCars_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            CarListItem view = e.AddedItems[0] as CarListItem;
            if (view != null)
            {
                this.detailView.Car = view.Car;
            }
        }
    }

最终运行结果：

三、数据外衣ControlTemplate

1.介绍

ControlTemplate是WPF（Windows Presentation Foundation）中用于定义控件外观和行为的模板。它允许你完全自定义控件的样式、布局和交互方式。

2.示例

<Button Content="Click me">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="LightBlue" BorderBrush="DarkBlue" BorderThickness="2" CornerRadius="5">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

运行结果：