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:
Property | Description |
---|---|
Text | The text to display. |
FontSize | The size of the font. |
FontWeight | The weight of the font. Default is normal, options include Bold . |
FontStyle | A style to apply to the lettering. Default is normal, options include Italic . |
TextDecorations | A 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:space | xml: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 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
as set out in XAML.</TextBlock>
</StackPanel>
The styling works in the preview pane:
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>
<TextBlock>
<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>
This is the first line and<LineBreak />here comes the second
</TextBlock>
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>
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>
InlineUIContainer
The InlineUIContainer
allows any Control
to be included as an inline.
<TextBlock 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>
![](/zh-Hans/assets/images/textblock-uicontainer-e363a88a6b5cea1f7b83d111949181d8.png)
More Information
For the complete API documentation about this control, see here.
View the source code on GitHub TextBlock.cs