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

June 19, 2013 1 Comment

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

Advertisement

Filed under Controls Tagged with , , , ,

#844 – The TextBlock Supports Hyphenation

June 18, 2013 Leave a comment

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

Filed under Controls Tagged with , , ,

#843 – Text Justification in a TextBlock

June 17, 2013 1 Comment

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

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 , , ,

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

May 6, 2013 1 Comment

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

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 , , , , , , ,

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

July 11, 2011 1 Comment

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>

Filed under Controls Tagged with , , , , ,

#259 – Setting Typography Properties for Text Rendered with an OpenType Font

March 28, 2011 1 Comment

WPF includes a Typography class, which allows setting various attached properties for textual elements.  These properties only affect text that is rendered using an OpenType font.

The Typography class lets you specify things like:

  • Superscripts and subscripts
  • Use of capitals and spacing between capitals
  • Ligatures (combined glyphs)
  • Swashes (decorative elements)
  • Alternate glyphs
  • Historical glyphs
  • Proportional spacing for numerals
  • Turning kerning off/on

For example, we can specify that some text be rendered using small capitals, as follows.

		<TextBlock Margin="20" Width="250" Height="55"
		    FontFamily="Constantia" FontSize="14"
		    TextWrapping="Wrap">
			We secure our friends not by accepting favors but by doing them.
			<Run Typography.Capitals="SmallCaps">--Thucydides</Run>
		</TextBlock>

Filed under Controls Tagged with , , , ,

#245 – Easily Inline Text Formatting Codes with TextBlock Control

March 14, 2011 1 Comment

You can specify a TextBlock control’s content by defining a series of Run elements.

You can also just specify the text by setting the child element of the TextBlock:

		<TextBlock>
			Henry V was here.
		</TextBlock>

Finally, you can include some formatting tags directly in the body of the text:

		<TextBlock Margin="10" Height="100" FontSize="14" Width="290" TextWrapping="Wrap">
			We <Bold>few</Bold>, we happy <Bold>few</Bold>, we band of <Underline>brothers</Underline>;
For he to-day that sheds his <Italic>blood</Italic> with me
Shall be my <Underline>brother</Underline>; be he ne'er so <Italic>vile</Italic>,
This day shall <Bold>gentle</Bold> his <Italic>condition</Italic>;"
		</TextBlock>

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 , , ,