WPF Label
This article demonstrates how to create and use a Label
control in WPF using XAML and C#.
Creating a Label
The Label element
represents a WPF Label control in XAML.
< 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.
<Label Name="Label1"
Content="Hello!
I am Label Control"
Width="200" Height="40"
Canvas.Left="10" Canvas.Top="10"
FontSize="14" FontFamily="Georgia"
FontWeight="Bold"/>
Listing 1
The output looks like Figure 1.
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.
<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.
Figure 2
Adding Contents to a Label Control
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.
<Label Canvas.Left="10"
Canvas.Top="50">
<StackPanel Orientation="Horizontal">
<Ellipse Width="100"
Height="100" Fill="Red"
/>
<Ellipse Width="80"
Height="80" Fill="Orange"
/>
<Ellipse Width="60"
Height="60" Fill="Yellow"
/>
<Ellipse Width="40"
Height="40" Fill="Green"
/>
<Ellipse Width="20"
Height="20" Fill="Blue"
/>
<Ellipse Width="15"
Height="15" Fill="Indigo"
/>
<Ellipse Width="10"
Height="10" Fill="Violet"
/>
</StackPanel>
</Label>
Listing 3
Listing 3 generates an output that looks like Figure 3.
Figure 3
Formatting a 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.
<Label.BorderBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1" >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="1.0" />
</LinearGradientBrush>
</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.
<Label.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1" >
<GradientStop Color="Blue"
Offset="0.1" />
<GradientStop Color="Orange"
Offset="0.25" />
<GradientStop Color="Green"
Offset="0.75" />
<GradientStop Color="Black"
Offset="1.0" />
</LinearGradientBrush>
</Label.Background>
<Label.Foreground>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1" >
<GradientStop Color="Orange"
Offset="0.25" />
<GradientStop Color="Green"
Offset="1.0" />
</LinearGradientBrush>
</Label.Foreground>
The new Label looks like Figure 4.
Figure 4
Setting Image as Background of a 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.
<Label.Background>
<ImageBrush ImageSource="Garden.jpg"
/>
</Label.Background>
The new output looks like Figure 5.
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 you to set an image as the background of a Label.