WPF之ContentControl🔥

CZerocheng 1/30/2024 WPF

# 什么是ContentControl

ContentControl 是 WPF 中的一种基础控件类，它为可以包含单个内容的控件提供了一种通用的功能。ContentControl 继承自 Control 类，并且添加了一个 Content 属性，这个属性可以用来设置或获取控件的内容，主要特点如下：

1、单一内容：ContentControl 只能包含一个子元素，但这个子元素可以是任意类型（如字符串、UI元素、数据对象等）。

2、灵活性：ContentControl 可以包含简单的文本、复杂的 UI 结构，甚至是数据绑定对象。

3、数据模板：可以使用 ContentTemplate 属性来指定如何渲染内容，尤其在需要自定义显示复杂数据对象时非常有用。

# 常见的 ContentControl 派生类

许多常用控件都是 ContentControl 的派生类，利用了其单一内容模型和灵活的内容显示能力。例如：

1、Button：表示一个按钮，可以包含文本或其他 UI 元素。

2、Label：表示一个标签，可以包含文本或其他 UI 元素。

3、CheckBox：表示一个复选框，可以包含文本或其他 UI 元素。

4、RadioButton：表示一个单选按钮，可以包含文本或其他 UI 元素。

5、TabItem：表示一个选项卡，可以包含复杂的 UI 结构。

6、GroupBox：表示一个带标题的框，可以包含复杂的 UI 结构。

# 实战

以下是一个简单的 ContentControl 示例，展示了如何设置和显示内容：

<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>
        <!-- 使用 ContentControl 显示简单文本 -->
        <ContentControl Content="Hello, World!" HorizontalAlignment="Center" VerticalAlignment="Center" />

        <!-- 使用 ContentControl 显示复杂 UI 结构 -->
        <ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,50,0,0">
            <ContentControl.Content>
                <StackPanel>
                    <TextBlock Text="Name:" FontWeight="Bold" />
                    <TextBox Width="200" />
                </StackPanel>
            </ContentControl.Content>
        </ContentControl>
    </Grid>
</Window>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ContentControl 也可以使用数据模板来显示复杂的数据对象：

<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>
        <!-- 定义 DataTemplate -->
        <Window.Resources>
            <DataTemplate x:Key="PersonTemplate">
                <StackPanel>
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                    <TextBlock Text="{Binding Age}" />
                </StackPanel>
            </DataTemplate>
        </Window.Resources>

        <!-- 使用 ContentControl 并应用 DataTemplate -->
        <ContentControl Content="{Binding SelectedPerson}" ContentTemplate="{StaticResource PersonTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这个示例中，ContentControl 使用了 DataTemplate 来显示一个 Person 对象，该对象有 Name 和 Age 属性。

# 总结

ContentControl 是 WPF 中一个非常灵活和强大的控件，它为可以包含单个内容的控件提供了通用功能。通过使用 ContentControl，开发者可以轻松地将简单的文本、复杂的 UI 结构或数据绑定对象显示在用户界面中。利用 ContentTemplate 属性，可以自定义内容的呈现方式，从而创建出更加丰富和动态的用户界面。

zerocheng的个人blog

Choose mode