Skip to main content

TextBlock

The TextBlock is a read-only label for the display of text. It can display multiple lines, and features full control over the font used.

Useful Properties​

You will probably use these properties most often:

PropertyDescription
TextThe text to display.
FontSizeThe size of the font.
FontWeightThe weight of the font. Default is normal, options include Bold.
FontStyleA style to apply to the lettering. Default is normal, options include Italic.
TextDecorationsA line decoration to apply to the lettering. Default is none, options include Underline, Strikethrough, Baseline and Overline. To apply more than one at the same time, list the options with spaces between.
xml:spacexml:space="preserve" directs the XML parser to preserve line breaks and whitespace for content assigned to TextBlock else it is stripped by default.

Example​

This example demonstrates using multiple TextBlock controls to show a heading, single line containing extra space, and multi-line displays.

<StackPanel xmlns="https://github.com/avaloniaui" Margin="20">
  <TextBlock Margin="0 5" FontSize="18" FontWeight="Bold">Heading</TextBlock>
  <TextBlock Margin="0 5" FontStyle="Italic" xml:space="preserve">This is  a single line.</TextBlock>
  <TextBlock Margin="0 5" xml:space="preserve">This is a multi-line
  display that has
  returns in it.
  The text block
  respects the line
  breaks set out in XAML.</TextBlock>
</StackPanel>
Preview
Loading Avalonia Preview...

Inlines​

Text inlines allow diverse formatting of text and controls inside of a single TextBlock. While TextBlock.Text is routinely used to display a single uniformly formatted text, its child Content allows for a collection of inlines.

Run​

The Run inline represents a contiguous run of uniformly formatted text.

<Style Selector="Run.activity">
	<Setter Property="Foreground" Value="#C469EE" />
	<Setter Property="FontStyle" Value="Italic" />
	<Setter Property="TextDecorations" Value="Underline" />
</Style>

	<Run Text="Your name is" />
	<Run FontSize="24" FontWeight="Bold" Foreground="Orange" Text="{Binding Name}" />
	<Run Text="and your favorite activity is" />
	<Run Classes="activity" Text="{Binding Activity}" />
</TextBlock>

LineBreak​

The LineBreak inline forces a line break.

<TextBlock xmlns="https://github.com/avaloniaui">
    This is the first line and<LineBreak />here comes the second
</TextBlock>
Preview
Loading Avalonia Preview...

Span​

The Span inline allows grouping of inlines, including non-text inlines. While Span can apply its own text formatting, there are a few predefined formatting inlines derived from Span: Bold, Italic, and Underline. Users may also derive from Span to create their own formatting instead of using styles.

<TextBlock xmlns="https://github.com/avaloniaui"
           TextWrapping="Wrap">
	This text is <Span Foreground="Green"> green with <Bold>bold sections,</Bold>
	<Italic>italic <Span Foreground="Red">red</Span> sections,</Italic>
	some
	<Run FontSize="24"> enlarged font runs,</Run>
	and</Span>
	back to the original formatting
</TextBlock>
Preview
Loading Avalonia Preview...

InlineUIContainer​

The InlineUIContainer allows any Control to be included as an inline.

<TextBlock xmlns="https://github.com/avaloniaui" ClipToBounds="False" FontSize="32" TextWrapping="Wrap">
    🚀 This <Span BaselineAlignment="TextTop">example</Span> shows the <Bold>power</Bold> of
    <InlineUIContainer BaselineAlignment="Baseline">
        <Image Width="32" Height="32" VerticalAlignment="Top" Source="/Assets/avalonia-logo.ico" />
    </InlineUIContainer>
    in creating rich text displays with
    <InlineUIContainer>
        <Button Padding="0,8,0,0">
            <TextBlock ClipToBounds="False" FontSize="24" Text="👍👍🏼👍🏽👍🏾👍🏿" />
        </Button>
    </InlineUIContainer>
    inline controls 📈
</TextBlock>

More Information​

info

For the complete API documentation about this control, see here.

info

View the source code on GitHub TextBlock.cs

Discussion

Have questions or feedback? Join the conversation below.

On this page