WPF Text Controls

WPF Supports several types of text controls for displaying text on your WPF Windows. First is the TextBlock. The text block is very simple, it just displays whatever text you enter on the window. A very basic control for display of titles and what not.

Next up the food chain is the Label. The Label has several advantages over the TextBlock. First, you can change the contents of a label at run time. Let’s take this simple example. First, let’s add a Label to the Button window we created yesterday. In case you missed it, here’s the XAML:

<Window x:Class=WPFSample001.ButtonWindow

    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

    Title=Buttons Height=83 Width=194

    >

  <StackPanel>

    <StackPanel>

      <Button Click=Baby_Click>Click Me Baby!</Button>

      <Label Name=lblMyLabel>Before the click</Label>

    </StackPanel>

  </StackPanel>

</Window>

Notice we’ve added a Name property to the Label. This is so we can address it by a specific name within our C# code. After you add the Label here’s an important step: build the application (Build, Build Solution on the menus). You need to do the build so the control will show up in intellisense once you get to the C# window. You can still write the code and make it work, but the intellisense makes it so much easier it’s worth the few seconds to run a build.

OK, you’ve built the app, go to the C# code behind. Locate the event handler for Baby_Click and insert a line to alter the content of the label:

    private void Baby_Click(object sender, RoutedEventArgs e)

    {

      MessageBox.Show(“Hi There!”,“Baby was clicked!”);

    }

If you’ve done traditional WinForms coding in the past, this syntax should look pretty familiar to you. Running the app will produce the expected result. Here’s the before you click:

wpf024

And here’s shot after you click the button:

wpf025 

If you remember the “old days” of WinForms program, you may remember it was possible to use a label as an access key for a textbox. You can still do this with WPF, it just takes a little code. Let’s create a new form, call it LabelForm.

To the LabelForm, add a grid with two rows and two columns, then add two labels and two text boxes. Here’s a sample:

<Window x:Class=WPFSample001.LabelWindow

    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

    Title=Label Window Height=95 Width=252

    >

  <Grid>

    <Grid.RowDefinitions>

      <RowDefinition></RowDefinition>

      <RowDefinition></RowDefinition>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width=*></ColumnDefinition>

      <ColumnDefinition Width=2*></ColumnDefinition>

    </Grid.ColumnDefinitions>

    <Label Target={Binding ElementName=FirstBox} Grid.Row=0 Grid.Column=0>_First Box</Label>

    <Label Target={Binding ElementName=SecondBox} Grid.Row=1 Grid.Column=0>_Second Box</Label>

    <TextBox Name=FirstBox Grid.Row=0 Grid.Column=1 />

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1>

    </TextBox>

  </Grid>

</Window>

Notice two things. First, we had to give our textboxes a name, via the Name property. Second is the Target property. Inside the property you see curly braces with the word Binding. This is an example of a Markup Extension. Markup Extensions are special WPF classes that are created by the XAML Parser and bound to the item (in this case a Label) we are creating. The items with equal signs, such as ElementName in this example, are named parameters for the Binding class.

I realize that’s a lot of concept in a little space, it might be easier to simply thing of the items in curly braces as a way to define special functionality within WPF.

In this example, the Binding extension binds the label to the textbox passed in the ElementName. When you run the above example, and press the alt key you will see the F (in First) and S (in Second) become underlined.

wpf026 

Pressing F or S will jump you between the text boxes. It’s a bit hard to visualize, but try running the code yourself and you’ll see what I mean.

There’s one more text control I want to mention, the ToolTip. The easy way to create a ToolTip is to simply add it as an item when you create a control. Let’s add a ToolTip to the text boxes.

    <TextBox Name=FirstBox Grid.Row=0 Grid.Column=1 ToolTip=The First Box/>

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1 ToolTip=Second Box />

As you can see all I had to do is add a ToolTip= and it’s added.

wpf027 

You can also declare the tooltip as a content item of the main control, using this syntax:

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1 >

      <TextBox.ToolTip>

        Second Box

      </TextBox.ToolTip>

    </TextBox>

Why use this second way? Well remember, since it’s content you can get pretty complex with what you declare. Try this out:

    <TextBox Name=SecondBox Grid.Row=1 Grid.Column=1 >

      <TextBox.ToolTip>

        <StackPanel>

          <Label Background=Red Foreground=White>Help Title</Label>

          <TextBlock>This is some descriptive text for the tooltip that tells what it does.</TextBlock>

        </StackPanel>

      </TextBox.ToolTip>

    </TextBox>

Run the app and hover over the second box, and you should see something like this:

wpf028 

Now you begin to gleam a little of the power of WPF, the ability to combine controls and create complex interfaces quickly and easily.

The TextBlock, Label, and ToolTip are the three text controls you can use to display info to your users.

Advertisements

3 Responses to “WPF Text Controls”

  1. roncli Says:

    There’s a typo in this article…

    “OK, you’ve built the app, go to the C# code behind. Locate the event handler for Baby_Click and insert a line to alter the content of the label:

    private void Baby_Click(object sender, RoutedEventArgs e)
    {
    MessageBox.Show(“Hi There!”,“Baby was clicked!”);
    }”

    MessageBox.Show does not alter the content of a label.

  2. Darren Says:

    I believe it should be the following:

    private void Baby_Click(object sender, RoutedEventArgs e)
    {
    lblMyLabel.Content = “After click”;
    }

    • pashute Says:

      That was funny! The whole article is about setting the label text, and the most important line is missing!

      Yes, lblMyLabel.Content = “After click”; works.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: