WPF Label in VB.NET

This article demonstrates how to create and use a Label control in WPF using XAML and VB.NET.
  • 2224

WPF Label

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

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.

LabelImg1.jpg
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.

 

LabelImg2.jpg

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.

LabelImg3.jpg
 
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.

 

LabelImg4.jpg

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.

 

LabelImg5.jpg

Figure 5

Summary

In this article, I discussed how we can create a Label control in WPF and VB.NET.  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.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.