#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

#841 – Display Underlines for Access Keys at All Times

Normally, the underline characters that are used to indicate access keys for controls are displayed only after you press the Alt key.

For example, before you press the Alt key, you won’t see any underlines:

841-001

But once you press the Alt key, you’ll see underlines indicating access keys for all controls:

841-002

 

You can, however, change a setting in the Control Panel so that the underlines are always visible.

In Control Panel, click on Ease of Access.  (Instructions below apply to Windows 8).

841-003

 

Click on Ease of Access Center.

841-004

 

Click on the Make the keyboard easier to use option.

841-005

 

Enable the option Underline keyboard shortcuts and access keys.

841-006

 

The underlines indicating access keys will now be displayed immediately when you start your application.

 

#840 – Access Keys Should Be Unique within A Window

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.  Because a user’s key press is associated with a particular control, you should ensure that each access key is unique within the parent window.

If you do happen to define the same access key for multiple controls within a window, pressing the access key will toggle the focus between the controls, rather than activating them.  In the example below, press Alt+T will toggle the focus back and forth between the two buttons.  If you then change the second access key to something different, pressing Alt+T will activate (press) the first button.

        <Button Content="_This" VerticalAlignment="Top"
                Padding="10,5" Margin="5"
                Click="DoThis_Click"/>
        <Button Content="_That" VerticalAlignment="Top"
                Padding="10,5" Margin="5"
                Click="DoThat_Click"/>

#839 – A Label’s Target Could Have Its Own Label

You typically set the Target of a Label to a control that doesn’t have its own label.  The purpose is that when the user presses the Label’s access key, the target control will receive focus.

There’s nothing preventing you, however, from specifying the Target as a control that would normally have its own caption.

For example, you normally set a Button’s access key to one of the characters in its Content property–i.e. the text that appears on the face of the button.  In the example below, however, we use a Label to specify an access key for the Button, since the button’s content is just an asterisk character.  When you press the Label’s access key, the Button will activate.

    <StackPanel Orientation="Horizontal">
        <Label Content="_Calculate" VerticalAlignment="Center"
               Target="{Binding ElementName=btnCalc}"/>
        <Button Name="btnCalc" Content="*" VerticalAlignment="Center"
                Padding="10,5" Click="btnCalc_Click"/>
    </StackPanel>

839-001
839-002