#845 – Display Ellipsis in TextBlock to Indicate that Content Doesn’t Fit

By default, when the text in a TextBlock does not fit the available space, the text is simply clipped against the boundaries of the available space.

849-001

You can, however, use the TextTrimming property to cause an ellipsis (three dots) to be displayed when the TextBlock contains more text than can be displayed.

Possible values for TextTrimming area:

  • None – no ellipsis, text is clipped  (the default)
  • CharacterEllipsis – display as many characters as possible, followed by an ellipsis
  • WordEllipsis – display as many words as possible, followed by an ellipsis
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock Text="{StaticResource someText}"
                    TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
                    Margin="10"/>
        <StackPanel Grid.Row="1" Background="AliceBlue"/>
    </Grid>

849-002

#844 – The TextBlock Supports Hyphenation

If a TextBlock is set to wrap text automatically, you can also tell it to automatically hyphenate by setting its IsHyphenationEnabled property to true.

In the example below, the first two blocks of text are left justified, but the second block has hyphenation enabled.

The third block enables hyphenation for a justified block of text.

        <TextBlock Text="{StaticResource someText}"
                   TextWrapping="Wrap"
                   TextAlignment="Left"
                   Margin="10"/>
        <TextBlock Text="{StaticResource someText}"
                   TextWrapping="Wrap"
                   IsHyphenationEnabled="True"
                   TextAlignment="Left"
                   Margin="10"/>
        <TextBlock Text="{StaticResource someText}"
                   TextWrapping="Wrap"
                   TextAlignment="Justify"
                   IsHyphenationEnabled="True"
                   Margin="10"/>

844-001

#843 – Text Justification in a TextBlock

In typography, justification is the alignment of the edges of a block of text.  Text can be “flush left”, indicating that the left edges of the lines are aligned with each other and the right edges are ragged–i.e. not aligned.  Text can also be “flush right” (right ends of lines are aligned), “justified” (both edges line up), or centered (both edges ragged).

WPF allows justification of text using the TextBlock element.  You specify justification in a TextBlock using the TextAlignment property, setting it to one of: Left, Right, Center or Justify.

        <TextBlock Text="{StaticResource someText}"
                   TextWrapping="Wrap"
                   TextAlignment="Left"
                   Margin="10"/>
        <TextBlock Text="{StaticResource someText}"
                   TextWrapping="Wrap"
                   TextAlignment="Right"
                   Margin="10"/>
        <TextBlock Text="{StaticResource someText}"
                   TextWrapping="Wrap"
                   TextAlignment="Center"
                   Margin="10"/>
        <TextBlock Text="{StaticResource someText}"
                   TextWrapping="Wrap"
                   TextAlignment="Justify"
                   Margin="10"/>

843-001

#842 – The Differences Between Label and TextBlock

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:

  • Label
    • Can have an access key (mnemonic), allowing the user to give focus to a related control
    • Has a built-in border (BorderBrushBorderThickness)
    • 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
  • 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

#813 – Applying TextDecorations in the Middle of a Block of Text

You can apply one of several different text decorations to a block of text by using the TextDecorations property for a TextBlock control.  But setting this property means that the decoration chosen applies to all text contained within the TextBlock.

Alternatively, you can apply one of the four text decorations (Underline, Baseline, StrikeThrough or Overline) to a subset of the text by using a Run element.  (Note: In the example below, we use an Underline tag directly, rather than setting the TextDecorations property on a Run element).

        <TextBlock Padding="20,10" FontSize="16"
                   TextWrapping="Wrap">
            We <Underline>few</Underline>,
            we <Run TextDecorations="Baseline">happy</Run> few,
            we band of <Run TextDecorations="StrikeThrough">guys</Run> brothers;
            For he to-day that sheds his <Run TextDecorations="Overline">blood</Run> with me
            Shall be my brother; be he ne'er so vile,
            This day shall gentle his condition;"
        </TextBlock>

813-001

#539 – Adding Text-Based Elements in Blend

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.

#339 – Wrapping a Button’s Text Content to Multiple Lines

When a Button control automatically sizes to fit its content, it will grow to fit the text in the Content property.  However, the text will always remain on a single line.

        <Button Content="Click me if you want to see something cool.  In fact, click as many times as you like."
                HorizontalAlignment="Center" VerticalAlignment="Center"


If you constrain the button’s Width, however, the text will be clipped.

To get the text on a face of a Button to wrap, you can use a TextBlock as the button’s Content, rather than a simple text string.  You also set the TextWrapping property on the TextBlock.

        <Button HorizontalAlignment="Center" VerticalAlignment="Center"
                Margin="10" Width="120">
            <TextBlock Text="Click me if you want to see something cool.  In fact, click as many times as you like."
                       TextWrapping="Wrap"/>
        </Button>