zerocheng的个人blog

WPF之模板🔥

1/29/2024 WPF

# 什么是模板

WPF的模板（Templates）是一个强大的功能，允许开发者自定义控件的外观和行为。WPF 提供了三种主要类型的模板：ControlTemplate、DataTemplate 和 ItemsPanelTemplate。每种模板都有其独特的用途和应用场景。下面详细介绍这三种模板。

# ControlTemplate

ControlTemplate 用于定义控件的结构和外观。通过自定义ControlTemplate，可以完全改变控件的默认视觉表现，并可以添加或删除视觉元素和行为，主要用途如下：

1、完全改变控件的外观和布局

2、自定义控件的视觉效果

3、为控件添加复杂的视觉元素和行为

以下示例展示了如何自定义 Button 控件的模板：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Click Me" Width="100" Height="50">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Background="LightBlue" BorderBrush="Gray" BorderThickness="1" CornerRadius="5">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</Window>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# DataTemplate

DataTemplate 用于定义数据对象的呈现方式。它通常用于数据绑定场景，如在 ListBox、ComboBox 等控件中显示数据项时，通过 DataTemplate 可以控制每个数据项的显示方式，主要用途如下：

1、定义数据项的外观和布局

2、在数据绑定控件中使用，展示复杂数据结构

以下示例展示了如何自定义 ListBox 控件中数据项的模板：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox ItemsSource="{Binding Items}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Age}" Margin="10,0,0,0"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# ItemsPanelTemplate

ItemsPanelTemplate 用于定义 ItemsControl（如 ListBox, ComboBox, ListView 等）内部的布局面板。通过 ItemsPanelTemplate 可以指定如何排列这些控件的子项，主要用途如下：

1、自定义 ItemsControl 子项的布局方式

2、替换默认的布局面板（如 StackPanel, WrapPanel 等）

以下示例展示了如何使用 WrapPanel 来自定义 ListBox 的布局：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox ItemsSource="{Binding Items}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</Window>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 总结

1、ControlTemplate：用于自定义控件的结构和外观，允许完全改变控件的默认视觉表现。适用于需要定制控件整体外观的场景。

2、DataTemplate：用于定义数据对象的呈现方式，通常用于数据绑定控件，适合展示复杂数据结构的场景。

3、ItemsPanelTemplate：用于定义 ItemsControl 内部的布局面板，可以自定义子项的排列方式，适合需要改变子项布局的场景。

通过使用这些模板，开发者可以在 WPF 中实现高度可定制和丰富的用户界面，满足各种复杂的设计需求。