WPF之Label控件详解

可以根据Github拉取示例程序运行
GitHub程序演示地址（点击直达）
也可以在本文资源中下载

1. 引言

在WPF应用程序开发中，Label控件是最基础的UI元素之一，用于显示文本和其他内容。作为内容展示的基本组件，Label控件不仅提供了简单的文本显示功能，还能通过丰富的自定义选项创建出各种视觉效果。本文将深入解析WPF中Label控件的特性、用法以及高级应用，帮助开发者全面理解并充分利用这一基础控件。

与其他UI框架中的标签控件相比，WPF的Label控件具有更强的灵活性和更丰富的功能。通过XAML声明式编程和WPF强大的样式系统，Label可以实现从简单文本展示到复杂内容呈现的各种需求。

本文将从Label控件的基础属性开始，逐步深入到样式定制、内容设置、布局控制以及与其他控件的交互等方面，为读者提供全面的Label控件使用指南。

2. Label控件基础

2.1 类继承结构

Label控件继承自ContentControl，可以包含任何类型的内容。在类继承层次上，Label的位置如下：

2.2 Label类定义

在.NET中，Label类的基本定义如下：

public class Label : ContentControl
{// 构造函数public Label();// 依赖属性public static readonly DependencyProperty TargetProperty;  // 定义标签关联的目标控件// 属性public UIElement Target { get; set; }  // 获取或设置标签关联的目标控件，通常用于访问键功能// 方法protected override void OnInitialized(EventArgs e);  // 初始化时调用protected override AutomationPeer OnCreateAutomationPeer();  // 创建自动化对等体用于辅助功能// 其他成员...
}

3. Label控件的核心属性

3.1 Content属性

由于Label继承自ContentControl，它拥有Content属性，可以设置为任何对象，包括字符串、图像、面板等：

<!-- 简单文本标签 -->
<Label Content="用户名：" /><!-- 复杂内容标签 -->
<Label><StackPanel Orientation="Horizontal"><Image Source="/Images/user_icon.png" Width="16" Height="16" Margin="0,0,5,0"/><TextBlock Text="用户名："/></StackPanel>
</Label>

在C#代码中设置：

// 文本内容
myLabel.Content = "用户名：";// 复杂内容
StackPanel panel = new StackPanel { Orientation = Orientation.Horizontal };  // 创建水平方向的StackPanel作为标签内容容器
panel.Children.Add(new Image 
{ Source = new BitmapImage(new Uri("/Images/user_icon.png", UriKind.Relative)),  // 设置图像源（相对路径）Width = 16,      // 设置图像宽度为16像素Height = 16,     // 设置图像高度为16像素Margin = new Thickness(0, 0, 5, 0)  // 设置图像右侧边距为5像素，使图像与文本有间隔
});
panel.Children.Add(new TextBlock { Text = "用户名：" });  // 添加文本块作为标签的文字部分
myLabel.Content = panel;  // 将整个面板设置为标签的内容

3.2 Target属性

Target属性是Label特有的，用于将标签与其他控件关联起来。当标签中定义了访问键（使用下划线_字符），并且设置了Target属性，按下Alt+访问键会将焦点移动到目标控件：

<Label Content="_用户名：" Target="{Binding ElementName=txtUsername}" />
<TextBox x:Name="txtUsername" />

// 在代码中设置Target
Label usernameLabel = new Label();
usernameLabel.Content = "_u用户名：";  // 下划线表示'u'是访问键
usernameLabel.Target = txtUsername;   // 设置目标为用户名文本框

Target属性使Label成为一个可以通过键盘快速访问关联控件的工具，这对于提高表单的可访问性和用户体验非常重要。

3.3 其他常用属性

除了上述特有属性外，Label还继承了许多来自父类的重要属性：

属性名	描述	示例
Background	设置标签背景	<Label Background="LightBlue" />
Foreground	设置标签前景（通常是文本颜色）	<Label Foreground="Navy" />
FontSize	设置标签文本大小	<Label FontSize="14" />
FontWeight	设置文本粗细	<Label FontWeight="Bold" />
FontFamily	设置字体	<Label FontFamily="Segoe UI" />
Padding	设置标签内容的内边距	<Label Padding="10,5" />
Margin	设置标签的外边距	<Label Margin="5" />
HorizontalAlignment	设置标签在容器中的水平对齐方式	<Label HorizontalAlignment="Center" />
VerticalAlignment	设置标签在容器中的垂直对齐方式	<Label VerticalAlignment="Center" />
HorizontalContentAlignment	设置标签内容的水平对齐方式	<Label HorizontalContentAlignment="Right" />
VerticalContentAlignment	设置标签内容的垂直对齐方式	<Label VerticalContentAlignment="Top" />
Width/Height	设置标签的宽度/高度	<Label Width="100" Height="30" />
IsEnabled	设置标签是否启用	<Label IsEnabled="False" />
Visibility	设置标签的可见性	<Label Visibility="Collapsed" />

4. 标签样式与模板自定义

WPF强大的样式系统允许我们从简单到复杂地自定义Label的外观。

4.1 简单样式设置

最基本的样式设置可以直接通过设置标签属性完成：

<Label Content="样式化标签" Background="LightYellow" Foreground="DarkGreen"FontWeight="Bold"FontStyle="Italic"Padding="10,5"BorderBrush="DarkGreen"BorderThickness="1" />

4.2 使用Style对象

更系统的方式是创建Style对象：

<Window.Resources><Style x:Key="GreenLabel" TargetType="Label"><Setter Property="Background" Value="LightYellow" /><Setter Property="Foreground" Value="DarkGreen" /><Setter Property="FontWeight" Value="Bold" /><Setter Property="Padding" Value="10,5" /><Setter Property="BorderBrush" Value="DarkGreen" /><Setter Property="BorderThickness" Value="1" /></Style>
</Window.Resources><Label Content="样式化标签" Style="{StaticResource GreenLabel}" />

在C#中动态应用样式：

Style greenLabelStyle = (Style)FindResource("GreenLabel");  // 从资源字典中查找命名为"GreenLabel"的样式
myLabel.Style = greenLabelStyle;  // 将样式应用到标签控件

4.3 触发器使用

触发器允许标签在不同状态下有不同的外观：

<Style x:Key="AnimatedLabel" TargetType="Label"><Setter Property="Background" Value="LightYellow" /><Setter Property="Foreground" Value="DarkGreen" /><Setter Property="FontWeight" Value="Normal" /><Setter Property="Padding" Value="10,5" /><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="LightGreen" /><Setter Property="Foreground" Value="DarkBlue" /><Setter Property="FontWeight" Value="Bold" /></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Opacity" Value="0.5" /><Setter Property="Foreground" Value="Gray" /></Trigger></Style.Triggers>
</Style>

4.4 使用ControlTemplate完全自定义

要彻底改变标签的外观，我们需要使用ControlTemplate：

<Style x:Key="FancyLabel" TargetType="Label"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Label"><Border CornerRadius="5" BorderThickness="1" BorderBrush="#CCCCCC"Background="{TemplateBinding Background}"><Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Border Grid.Row="0" Background="#E0E0E0" Padding="5,2"><TextBlock Text="{TemplateBinding Tag}" FontSize="10" Foreground="Gray"/></Border><ContentPresenter Grid.Row="1" Margin="{TemplateBinding Padding}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="BorderBrush" Value="#999999"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>

上面的代码创建了一个带有标题栏的花式标签模板，标题内容来自Tag属性，主要内容使用ContentPresenter显示。

使用这个模板的标签示例：

<Label Content="详细信息" Tag="信息" Style="{StaticResource FancyLabel}" Background="White"Padding="10,5" />

5. Label与表单控件交互

Label控件最常见的应用场景是与表单控件配合使用，例如TextBox、ComboBox等。

5.1 基本关联

最简单的关联方式是通过布局来实现视觉上的关联：

<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Label Grid.Row="0" Grid.Column="0" Content="用户名:"/><TextBox Grid.Row="0" Grid.Column="1" Margin="5"/><Label Grid.Row="1" Grid.Column="0" Content="密码:"/><PasswordBox Grid.Row="1" Grid.Column="1" Margin="5"/><Label Grid.Row="2" Grid.Column="0" Content="部门:"/><ComboBox Grid.Row="2" Grid.Column="1" Margin="5"/>
</Grid>

5.2 使用访问键

通过Target属性和访问键，可以使用键盘快捷键直接激活相关控件：

<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Label Grid.Row="0" Grid.Column="0" Content="_U用户名:" Target="{Binding ElementName=txtUsername}"/><TextBox x:Name="txtUsername" Grid.Row="0" Grid.Column="1" Margin="5"/><Label Grid.Row="1" Grid.Column="0" Content="_P密码:" Target="{Binding ElementName=txtPassword}"/><PasswordBox x:Name="txtPassword" Grid.Row="1" Grid.Column="1" Margin="5"/><Label Grid.Row="2" Grid.Column="0" Content="_D部门:" Target="{Binding ElementName=cboDepartment}"/><ComboBox x:Name="cboDepartment" Grid.Row="2" Grid.Column="1" Margin="5"/>
</Grid>

在上面的示例中，用户可以（或Alt+U）直接将焦点移动到用户名文本框，（或Alt+P）移动到密码框，（或Alt+D）移动到部门下拉框。

5.3 代码实现Label与控件关联

在代码中通过C#实现Label与控件的关联：

private void InitializeForm()
{// 创建用户名标签和文本框Label lblUsername = new Label();lblUsername.Content = "_U用户名:";  // 下划线定义访问键TextBox txtUsername = new TextBox();lblUsername.Target = txtUsername;  // 设置标签目标为文本框// 创建密码标签和密码框Label lblPassword = new Label();lblPassword.Content = "_P密码:";PasswordBox txtPassword = new PasswordBox();lblPassword.Target = txtPassword;// 将控件添加到布局容器Grid grid = new Grid();// 设置列定义grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });// 设置行定义grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });// 添加用户名控件到GridGrid.SetRow(lblUsername, 0);Grid.SetColumn(lblUsername, 0);grid.Children.Add(lblUsername);Grid.SetRow(txtUsername, 0);Grid.SetColumn(txtUsername, 1);txtUsername.Margin = new Thickness(5);grid.Children.Add(txtUsername);// 添加密码控件到GridGrid.SetRow(lblPassword, 1);Grid.SetColumn(lblPassword, 0);grid.Children.Add(lblPassword);Grid.SetRow(txtPassword, 1);Grid.SetColumn(txtPassword, 1);txtPassword.Margin = new Thickness(5);grid.Children.Add(txtPassword);// 将Grid添加到窗口内容this.Content = grid;
}

6. Label的高级用法

6.1 动态内容与绑定

Label控件可以通过数据绑定动态显示内容：

<Label Content="{Binding UserName}" ContentStringFormat="用户名: {0}"/>

在ViewModel中：

public class UserViewModel : INotifyPropertyChanged
{private string _userName;public string UserName{get { return _userName; }set {if (_userName != value){_userName = value;OnPropertyChanged(nameof(UserName));  // 通知UI该属性已更改}}}public event PropertyChangedEventHandler PropertyChanged;protected void OnPropertyChanged(string propertyName){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  // 触发属性更改事件}
}

6.2 使用ContentStringFormat格式化显示

ContentStringFormat属性允许对显示内容进行格式化：

<Label Content="{Binding Price}" ContentStringFormat="价格: {0:C}"/>

这将使Price值按货币格式显示，例如"价格: ¥123.45"。

6.3 多语言支持

使用资源文件和绑定可以实现Label内容的多语言支持：

<Label Content="{Binding Source={StaticResource Resources}, Path=UsernameLabel}" />

在资源文件中定义不同语言的标签内容：

<!-- 中文资源文件 -->
<system:String x:Key="UsernameLabel">用户名:</system:String><!-- 英文资源文件 -->
<system:String x:Key="UsernameLabel">Username:</system:String>

6.4 创建自定义Label控件

为特定需求创建自定义Label控件：

public class RequiredFieldLabel : Label
{static RequiredFieldLabel(){// 覆盖默认样式DefaultStyleKeyProperty.OverrideMetadata(typeof(RequiredFieldLabel),new FrameworkPropertyMetadata(typeof(RequiredFieldLabel)));  // 设置默认样式键类型为RequiredFieldLabel}public RequiredFieldLabel(){// 在构造函数中初始化this.Loaded += RequiredFieldLabel_Loaded;  // 注册Loaded事件处理程序}private void RequiredFieldLabel_Loaded(object sender, RoutedEventArgs e){// 创建一个StackPanel来布局内容StackPanel panel = new StackPanel { Orientation = Orientation.Horizontal  // 设置为水平方向};// 保存原始内容object originalContent = this.Content;  // 保存标签原有内容this.Content = null;  // 清除内容，将用新的面板替代// 添加原始内容到面板if (originalContent != null){ContentPresenter cp = new ContentPresenter{Content = originalContent  // 设置内容为标签原有内容};panel.Children.Add(cp);  // 添加到面板中}// 添加红色星号TextBlock asterisk = new TextBlock{Text = " *",  // 星号前有一个空格Foreground = Brushes.Red,  // 设置为红色FontWeight = FontWeights.Bold,  // 设置为粗体VerticalAlignment = VerticalAlignment.Top  // 设置垂直对齐为顶部};panel.Children.Add(asterisk);  // 添加到面板中// 将新的面板设置为Label的内容this.Content = panel;  // 将整个面板设置为标签的新内容}
}

在XAML中使用自定义Label：

<local:RequiredFieldLabel Content="用户名"/>

然后在Generic.xaml中定义样式：

<Style TargetType="{x:Type local:RequiredFieldLabel}"><Setter Property="Foreground" Value="Navy"/><Setter Property="FontWeight" Value="Bold"/>
</Style>

6.5 Label中使用HTML样式的富文本

虽然Label不直接支持HTML，但可以使用TextBlock配合Run和其他内联元素来实现类似富文本效果：

<Label><TextBlock><Run Text="普通文本" /><Run Text="粗体文本" FontWeight="Bold" /><Run Text="颜色文本" Foreground="Red" /><Hyperlink NavigateUri="https://www.example.com" RequestNavigate="Hyperlink_RequestNavigate">点击链接</Hyperlink></TextBlock>
</Label>

对应的事件处理代码：

private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{// 使用默认浏览器打开链接Process.Start(new ProcessStartInfo{FileName = e.Uri.AbsoluteUri,UseShellExecute = true});e.Handled = true;  // 标记事件已处理
}

7. Label控件的事件处理

虽然Label主要是显示控件，但它仍然继承了许多交互事件。

7.1 鼠标事件

Label支持标准的鼠标事件，可用于创建交互式标签：

<Label Content="点击查看详情" MouseLeftButtonDown="Label_MouseLeftButtonDown"Cursor="Hand"Foreground="Blue"TextDecorations="Underline"/>

private void Label_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{// 显示详细信息窗口或执行其他操作MessageBox.Show("这里是详细信息内容");e.Handled = true;  // 标记事件已处理，防止事件继续传播
}

7.2 创建可点击标签

结合样式和事件处理，可以创建类似超链接的可点击标签：

<Style x:Key="HyperlinkLabel" TargetType="Label"><Setter Property="Foreground" Value="Blue"/><Setter Property="Cursor" Value="Hand"/><Setter Property="TextDecorations" Value="Underline"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="DarkBlue"/></Trigger></Style.Triggers>
</Style><Label Content="查看更多..." Style="{StaticResource HyperlinkLabel}" MouseLeftButtonDown="ViewMoreLabel_Click"/>

private void ViewMoreLabel_Click(object sender, MouseButtonEventArgs e)
{// 处理点击事件// 例如导航到新页面或打开对话框NavigationService.Navigate(new Uri("DetailsPage.xaml", UriKind.Relative));
}

7.3 使用Command绑定

在MVVM模式中，可以结合InputBindings使Label支持命令绑定：

<Label Content="执行操作" Cursor="Hand"><Label.InputBindings><MouseBinding MouseAction="LeftClick" Command="{Binding ExecuteCommand}"/></Label.InputBindings>
</Label>

在ViewModel中定义命令：

public class MainViewModel
{private ICommand _executeCommand;public ICommand ExecuteCommand{get{return _executeCommand ?? (_executeCommand = new RelayCommand(param => ExecuteAction(),param => CanExecuteAction()));}}private bool CanExecuteAction(){// 判断命令是否可执行的逻辑return true;  // 总是可执行}private void ExecuteAction(){// 执行命令的具体逻辑MessageBox.Show("命令已执行");}
}

8. Label的辅助功能与可访问性

8.1 基本可访问性考虑

为提高应用程序的可访问性，使用Label时应注意：

1. 确保Label与控件正确关联（使用Target属性）
2. 提供有意义的访问键
3. 设置适当的AutomationProperties信息

<Label Content="_用户名:" Target="{Binding ElementName=txtUsername}" AutomationProperties.HelpText="输入您的登录用户名"AutomationProperties.Name="用户名标签"/>

8.2 使用Label提高表单可访问性

结合Label的Target和访问键功能，可以大幅提高表单的键盘可访问性。在表单设计中，每个输入控件都应有一个关联的Label：

<StackPanel><Label Content="_名字:" Target="{Binding ElementName=txtFirstName}"/><TextBox x:Name="txtFirstName"/><Label Content="_姓氏:" Target="{Binding ElementName=txtLastName}"/><TextBox x:Name="txtLastName"/><Label Content="_电子邮件:" Target="{Binding ElementName=txtEmail}"/><TextBox x:Name="txtEmail"/><Label Content="_电话号码:" Target="{Binding ElementName=txtPhone}"/><TextBox x:Name="txtPhone"/>
</StackPanel>

8.3 屏幕阅读器优化(Win+Ctrl+Enter快捷键进入讲述人模式)

为了使标签与屏幕阅读器更好地配合，应确保：

1. 使用明确的文本描述
2. 设置AutomationProperties.LabeledBy属性关联控件与标签
3. 在适当情况下设置AccessText属性

<Label x:Name="lblPhone" Content="电话号码:"/>
<TextBox x:Name="txtPhone" AutomationProperties.LabeledBy="{Binding ElementName=lblPhone}"AutomationProperties.HelpText="请输入您的联系电话，格式为：XXX-XXXX-XXXX"/>

9. 性能和最佳实践

9.1 Label性能优化

• 避免过度使用Label：当只需要显示静态文本时，考虑使用TextBlock代替Label，因为TextBlock更轻量。
• 适当缓存：对于复杂内容的Label，考虑使用BitmapCache提高性能。

<Label Content="复杂内容标签" FontSize="18"><Label.CacheMode><BitmapCache /></Label.CacheMode>
</Label>

9.2 Label使用的最佳实践

1. 选择合适的控件：

   • 用于表单标签时，使用Label并设置Target属性
   • 仅显示文本时，优先考虑TextBlock
   • 需要富文本时，考虑使用TextBlock配合多个Run或其他内联元素

2. 恰当设置访问键：选择有意义且容易记住的字符作为访问键。

3. 保持一致的样式：在整个应用程序中保持标签样式的一致性。

4. 布局考虑：

   • 在表单中，使标签与关联控件的对齐方式保持一致
   • 对于右对齐的标签，设置HorizontalContentAlignment="Right"
   • 表单内的所有标签宽度应保持一致

5. 多语言支持：使用资源文件和绑定，避免硬编码标签内容。

9.3 Label与TextBlock选择

Label和TextBlock是WPF中两个可以显示文本的控件，但它们有明显区别：

特性	Label	TextBlock
继承层次	ContentControl	FrameworkElement
内容类型	任意内容	仅文本和内联元素
Target属性	支持	不支持
访问键	支持	不支持
模板支持	完全支持	有限支持
控件模型	完整控件	轻量级框架元素
性能	较重	轻量
适用场景	表单标签、需要模板化的文本	静态文本显示、富文本显示

选择原则：

• 如果需要关联到另一个控件（使用访问键），选择Label
• 如果只是显示文本且不需要控件特性，选择TextBlock
• 如果需要丰富的文本格式化，选择TextBlock配合内联元素

10. 总结

WPF中的Label控件是一个功能丰富的文本显示组件，它不仅提供基本的文本显示功能，还支持复杂内容、控件关联和各种样式定制。通过Label的Target属性和访问键功能，可以显著提高应用程序的可访问性和用户体验。

Label控件的主要特点和优势包括：

1. 作为ContentControl，可以容纳任何类型的内容
2. 通过Target属性和访问键提供键盘导航支持
3. 强大的样式和模板自定义能力
4. 与其他表单控件的良好整合

通过本文的详细介绍，我们了解了Label控件的核心属性、样式自定义、与表单控件的交互、高级用法以及性能优化等方面。掌握这些知识，可以帮助开发者在WPF应用程序中更有效地使用Label控件，创建出更友好、更易用的用户界面。

学习资源

以下是一些深入学习WPF Label控件的优质资源：

1. 微软官方文档：Label类
2. WPF控件深入详解系列 - MSDN
3. WPF UI设计最佳实践指南
4. WPF示例代码库
5. WPF数据绑定深入解析
6. Stack Overflow上的WPF标签问题集

通过系统学习和不断实践，你将能够充分利用WPF Label控件的强大功能，创建出更加直观、易用的用户界面。