Working with WPF Label using XAML and C#

WPF Label class represents a Label control in C#. The <Label> element in XAML represents a Label control at design-time. The code examples in this article demonstrate how to use Label in WPF and XAML in C#. WPF Label, WPF Label control.

This article demonstrates how to create and use a Label control in WPF using XAML and C#. 

Creating a WPF Label

The Label element represents a WPF Label control in XAML.

  1. < Label />  

The Width and Height attributes of the Label element represent the width and the height of a Label. The Content property of the Label element sets the text of a Label. The Name attribute represents the name of the control, which is a unique identifier of a control.

The code snippet in Listing 1 creates a Label control and sets the name, height, width, and content of a Label control. The code also sets the font format for the text.

  1. <Label Name="Label1"  
  2.     Content="Hello! I am Label Control"  
  3.     Width="200" Height="40"  
  4.     Canvas.Left="10" Canvas.Top="10"  
  5.     FontSize="14" FontFamily="Georgia"  
  6.  FontWeight="Bold"/>  

Listing 1

The output looks like Figure 1.

WPF Label
Figure 1

The Background and Foreground properties set the background and foreground colors of the Label control. The code snippet in Listing 2 sets the background, foreground, and alignment of a Label control.

  1. <Label Name="Label1" Content="Hello! I am Label Control" Width="200" Height="30" Canvas.Left="10" Canvas.Top="10" FontSize="14" FontFamily="Georgia" FontWeight="Bold" Background="Black" Foreground="Orange" VerticalAlignment="Center" HorizontalAlignment="Center" />  

 Listing 2

The new output looks like Figure 2.

WPF Label
Figure 2
 

Adding Contents to a WPF Label 

The Content property of the Label control allows you to set any other controls as the content of a Label control. The code snippet in Listing 3 adds some ellipse controls to a Label control.

  1. <Label Canvas.Left="10" Canvas.Top="50">  
  2.     <StackPanel Orientation="Horizontal">  
  3.         <Ellipse Width="100" Height="100" Fill="Red" />  
  4.         <Ellipse Width="80" Height="80" Fill="Orange" />  
  5.         <Ellipse Width="60" Height="60" Fill="Yellow" />  
  6.         <Ellipse Width="40" Height="40" Fill="Green" />  
  7.         <Ellipse Width="20" Height="20" Fill="Blue" />  
  8.         <Ellipse Width="15" Height="15" Fill="Indigo" />  
  9.         <Ellipse Width="10" Height="10" Fill="Violet" />  
  10.     </StackPanel>  
  11. </Label>  

Listing 3

Listing 3 generates an output that looks like Figure 3.

Adding Contents to a Label Control
Figure 3
 

Formatting a WPF Label

 
The BorderBrush property of the Label sets a brush to draw the border of a Label. You may use any brush to fill the border. The following code snippet uses a linear gradient brush to draw the border with a combination of red and blue color.

  1. <Label.BorderBrush>  
  2.     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
  3.         <GradientStop Color="Blue" Offset="0" />  
  4.         <GradientStop Color="Red" Offset="1.0" />  
  5.     </LinearGradientBrush>  
  6. </Label.BorderBrush>  

The Background and Foreground properties of the Label set the background and foreground colors of a Label. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a Label.

  1. <Label.Background>  
  2.     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
  3.         <GradientStop Color="Blue" Offset="0.1" />  
  4.         <GradientStop Color="Orange" Offset="0.25" />  
  5.         <GradientStop Color="Green" Offset="0.75" />  
  6.         <GradientStop Color="Black" Offset="1.0" />  
  7.     </LinearGradientBrush>  
  8. </Label.Background>  
  9. <Label.Foreground>  
  10.     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
  11.         <GradientStop Color="Orange" Offset="0.25" />  
  12.         <GradientStop Color="Green" Offset="1.0" />  
  13.     </LinearGradientBrush>  
  14. </Label.Foreground>  

The new Label looks like Figure 4.

Formatting a Label
Figure 4
 

Setting Image as Background of a WPF Label 

To set an image as background of a Label, we can set an image as the Background of the Label. The following code snippet sets the background of a Label to an image. 

  1. <Label.Background>  
  2.     <ImageBrush ImageSource="Garden.jpg" />  
  3. </Label.Background>  

The new output looks like Figure 5.

Setting Image as Background of a Label
Figure 5

Summary

 
In this article, I discussed how we can create a Label control in WPF and C#. We also saw how we can format a Label by setting its border, background, and foreground properties. After that, we saw how to set an image as the background of a Label.