.NET 4.0+

WPF Information Controls - Label

by Richard Carr, published at http://www.blackwasp.co.uk/WPFLabel.aspx

The thirty-ninth part of the Windows Presentation Foundation Fundamentals tutorial begins an examination of the user information controls. These controls display information for the user to see but not interact with. This article looks at Labels.

Label

Over the next few articles we'll move away from the WPF layout controls and start to look at the user information controls. These are WPF controls that help the user understand the interface and give feedback about the status of the application. The first of these that we will consider is the Label control.

In many cases Labels are used to display simple text within a window. They generally provide a label for another control, which is usually a control with which the user can interact. The Label for a secondary control allows the user to easily understand its purpose. Additionally, you can add a mnemonic to a Label. This is where you mark one of the characters in the Label's text with an underline. When the user presses the corresponding key, along with Alt, the linked control is focussed.

Label inherits functionality from ContentControl. This means that you are not limited to plain text within the label. You can add any content, including visual controls, or layout controls with multiple children. In this article we'll just work with simple text.

To demonstrate the use of Labels, create a new WPF application project in Visual Studio. Name the project, "LabelDemo". Once the solution is initialised, replace the XAML in the main window with the code shown below.

<Window x:Class="LabelDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Label Demo"
        Width="250"
        Height="150">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Label Content="First Name" Margin="4"/>
        <TextBox Grid.Column="1" x:Name="FirstName" Margin="4"/>
        <Label Grid.Row="1" Content="Last Name" Margin="4"/>
        <TextBox Grid.Row="1" Grid.Column="1" x:Name="LastName" Margin="4"/>
        <StackPanel Grid.Row="2" Grid.ColumnSpan="2"
                    Orientation="Horizontal"
                    HorizontalAlignment="Right" VerticalAlignment="Bottom">
            <Button Content="OK" Width="60" Margin="4"/>
            <Button Content="Cancel" Width="60" Margin="4"/>
        </StackPanel>
    </Grid>
</Window>

The XAML creates a very basic form for requesting a person's name. The key controls are the two Labels and the corresponding TextBoxes, which the user would use to enter the first and last names. The rendered window appears as shown below. You can see that setting up basic Labels is quite simple.

Access Keys

Adding a mnemonic to a Label allows users that prefer to use the keyboard to quickly focus a linked control. To add a shortcut key you need to make two changes to a Label. Firstly, you must identify the key that can be pressed. To do this, you add an underscore character to the Label's text. The underscore should appear immediately before the character that will be the mnemonic. It will not be displayed as an underscore. Instead, the character it precedes will be underlined. Depending upon the user's configuration, the underline might always be visible or may only appear when Alt is pressed.

The second change that you must make to the Label is to reference the linked control. This is achieved by setting the Target property. You use WPF's binding syntax for this. We will examine binding in later instalments of the WPF tutorial. For the purposes of this article, I'll just show an example for each label.

To set the mnemonic for the First Name label to 'F' and link the Label to the first name TextBox, change its XAML as shown below. Note the position of the underscore and the binding for the Target property. This references the name of the targeted TextBox control.

<Label Content="_First Name" Margin="4" Target="{Binding ElementName=FirstName}"/>

Modify the second label in a similar manner:

<Label Grid.Row="1" Content="_Last Name" Margin="4" Target="{Binding ElementName=LastName}"/>

You can now run the program to see the results. The window should appear as shown below. If the underlined letters in the Labels are not visible, press the Alt key and they should appear. Try switching the focus to the TextBoxes by pressing Alt-F and Alt-L.

Using an underscore to identify the mnemonic character means that you must use a different technique if you want an underscore to be displayed in the Label. If you want the underscore to appear after the mnemonic character, you can add it as normal. If you want it to appear before the mnemonic, or if you do not want to define a shortcut key, you should use two adjacent underscores. Only one will be displayed. For example, the code below creates a Label with the mnemonic, 'e' and the text, "Last_Name":

<Label Grid.Row="1" Content="Last__Nam_e" Margin="4" Target="{Binding ElementName=LastName}"/>