#846 – Including an Underscore Character in a Label

June 20, 2013 1 Comment

When you include an underline ‘_’ character in the Content property of a Label, the underline character will be used to determine the access key for the label.  If you want to actually have a underline character show up in your user interface, you need to use a double underline ‘__’ sequence for the underline character.

    <StackPanel Orientation="Horizontal">
        <Label Content="Enter Your Super__Cool _Nickname"
               Target="{Binding ElementName=txtName}"
               VerticalAlignment="Center"/>
        <TextBox Name="txtName" Width="150"
                 VerticalAlignment="Center"/>
    </StackPanel>

846-001

Filed under Controls Tagged with , , , ,

#842 – The Differences Between Label and TextBlock

June 14, 2013 1 Comment

You can use either Label or TextBlock elements to display text in an application.

        <Label Content="I'm a Label"/>
        <TextBlock Text="I'm a TextBlock"/>

842-001
The two elements appear to behave similarly, but there are a few differences:

  • A Label
    • Can have an access key (mnemonic), allowing the user to give focus to a related control
    • Has a built-in border (BorderBrush, BorderThickness)
    • Has a Content property that can be set to some other element
    • Can use templates to customize the entire control or the content area of the control
    • Can align its content with HorizontalContentAlignment and VerticalContentAlignment
    • Will render as grey when IsEnabled is false
  • A TextBlock
    • Can have richer text formatting, using inline formatting
    • Can wrap its text to multiple lines
    • Can hyphenate words
    • Allows specifying space between lines
    • Allows left/right/center justification using the TextAlignment property
    • Supports text decorations (e.g. underline, baseline)
    • Allows setting typography properties

Filed under Controls Tagged with , , ,

#838 – Using a Label’s Access Key to Give Focus to Another Control

June 10, 2013 1 Comment

An access key is a character that the user can press, in combination with the Alt key, in order to activate or give a control focus.

Controls that the user can interact with and that have their own label typically can define their own access keys.  (E.g. A Button).  Controls that don’t have their own label can be activated or receive focus by using the access key of a nearby Label.

To pair a Label’s access key with another control, you:

  • Define the access key using an underscore in the Label’s Content property
  • Associate the related control using the Label’s Target property
    <StackPanel Orientation="Horizontal">
        <Label Content="Your _Name" VerticalAlignment="Center"
               Target="{Binding ElementName=txtName}"/>
        <TextBox Name="txtName" VerticalAlignment="Center"
                 Width="120"/>
    </StackPanel>

When the user presses Alt+N, the TextBox gains focus (and the user can then begin typing to enter their name).

838-001

Filed under Controls Tagged with , , , , ,

#539 – Adding Text-Based Elements in Blend

April 18, 2012 1 Comment

You can add text-based controls to your user interface by clicking on one of the related icons on the tools panel in Blend.

If you left-click and hold on the TextBlock icon on the tools panel, or right-click, you’ll see a series of controls that you can insert by clicking on the icon at this location in the tools panel.

  • TextBlock – Displays a small amount of text.  Similar to Label, but more lightweight (e.g. can’t customize with templates)
  • TextBox – Displays some user-editable text
  • RichTextBox – Displays user-editable text and allows for more rich formatting
  • PasswordBox – Allows user to enter a password, hiding the characters entered
  • Label – Displays a small amount of text
  • FlowDocumentScrollViewer – Host a FlowDocument to display an entire document, with support for scrolling

Select the control from this list that you want and then double-click the icon on the tools panel to insert an instance into your user interface.

Filed under Blend Tagged with , , , , , , ,

#317 – Label Basics

June 9, 2011 1 Comment

The Label control in WPF typically contains text and serves to provide information to the user.  The text in a label might change dynamically, depending on the state of the application, or it might always be the same.

Users don’t typically interact with a Label control.  By default, clicking on a label doesn’t do anything and a user can’t change the text of a label.

You set the value of the text in a Label using the Content property.

        <Label Content="I'm Henry VIII, I am."/>

Filed under Controls Tagged with , ,

#244 – Use a TextBlock Element for Richer Formatting

March 13, 2011 1 Comment

The Label control allows setting font properties like size and weight, but the settings apply to all of the text in the label.  Also, it’s difficult to embed line breaks without introducing cryptic characters.

The TextBlock control allows formatting subsets of its textual content by adding a series of Run elements and formatting each one separately.

Here’s an example.  Here’s a Label control:

		<Label Background="DarkGray" Margin="10" Height="50" FontSize="14"
			Content="Lancaster / York Richard, Duke of York Henry VI Warwick Somerset" />


And here’s an example of a TextBlock control, showing the same content:

		<TextBlock Background="DarkGray" Margin="10" Height="100" FontSize="14">
			<Run Text="Lancaster" Foreground="Red" TextDecorations="Underline"/><Run Text=" / "/>
			<Run Text="York" Foreground="White" TextDecorations="Underline"/>
			<LineBreak/>
			<Run Text="Richard, Duke of York" Foreground="White" FontSize="16" FontWeight="Bold"/>
			<LineBreak/>
			<Run Text="Henry VI" Foreground="Red" FontSize="16" FontWeight="Bold"/>
			<LineBreak/>
			<Run Text="Warwick" Foreground="White" FontStyle="Italic"/>
			<LineBreak/>
			<Run Text="Somerset" Foreground="Red" FontStyle="Italic"/>
		</TextBlock>

Filed under Controls Tagged with , , ,

#243 – Display Text Using a Label Control

March 12, 2011 Leave a comment

We saw how to use the DrawText and DrawGlyphRun methods to draw text into a visual element at a very low-level.  A much easier way to display text in a user interface is to use the Label control.

Because Label inherits from UIElement, you can include it in XAML as child of a Panel control.

You set the text for the Label using its Content property.

Here are some examples of Label controls.

	<StackPanel Orientation="Vertical">
		<Label Content="Miss Barkley was quite tall."/>
		<Label Content="A man is never lost at sea." FontFamily="Verdana" FontSize="16" FontWeight="Bold"/>
		<Label Content="Listen, Robert, going to another country doesn't make any difference." Foreground="Blue" Background="Pink"/>
	</StackPanel>

Filed under Controls Tagged with , , , ,