| -api-id | -api-type |
|---|---|
T:Microsoft.UI.Xaml.Controls.TextBlock |
winrt class |
Provides a lightweight control for displaying small amounts of text.
<TextBlock ...>text</TextBlock>
-or-
<TextBlock>
oneOrMoreInlineElements
</TextBlock>
-or-
<TextBlock .../>Tip
For more info, design guidance, and code examples, see Text block.
TextBlock is the primary control for displaying read-only text in apps. You can use it to display single-line or multi-line text, inline hyperlinks, and text with formatting like bold, italic, or underlined.
TextBlock is typically easier to use and provides better text rendering performance than RichTextBlock, so it's preferred for most app UI text. It also provides many of the same formatting options for customizing how your text is rendered. Although you can put line breaks in the text, TextBlock is designed to display a single paragraph and doesn't support text indentation. Consider a RichTextBlock if you need support for multiple paragraphs, multi-column text, or inline UI elements like images.
Starting in Windows 10, performance improvements were made to TextBlock that decrease overall memory use and greatly reduce the CPU time to do text measuring and arranging. To find out more about these performance improvements and how to make sure you are using them, see the Performance considerations section of the TextBlock control guide.
You can use Windows 10 text styles that ship with the platform to align the style of your text with the text used in the system. Here's how to use built-in styles to align with the Windows 10 type ramp. For more info, see XAML theme resources.
<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>The rendered text looks like this:
By default TextBlock supports display color fonts. The default color font on the system is Segoe UI Emoji and the TextBlock will fall back to this font to display the glyphs in color. For more info, see the IsColorFontEnabled property.
<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>The rendered text looks like this:
Tip
For more info, design guidance, and code examples, see Text block.
[!div class="nextstepaction"] Open the WinUI 3 Gallery app and see the TextBlock in action
The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub
This example demonstrates a TextBlock with text selection enabled and text wrapping enabled.
Important
If using a keyboard for text selection within a TextBlock, the user must first activate Caret Browsing (with the app in the foreground, press F7).
The rendered text looks like this:
<TextBlock Text="This text demonstrates the wrapping behavior of a TextBlock." Width="240"
IsTextSelectionEnabled="True" TextWrapping="Wrap"/>TextBlock textBlock = new TextBlock();
textBlock.Text = "This text demonstrates the wrapping behavior of a TextBlock.";
textBlock.Width = 240;
textBlock.IsTextSelectionEnabled = true;
textBlock.TextWrapping = TextWrapping.Wrap;
// Add TextBlock to the visual tree.
rootPanel.Children.Add(textBlock);This example shows how to customize the appearance of a TextBlock with a single Run of text. The FontWeight, FontFamily, FontStyle, Foreground color, and SelectionHighlightColor properties are customized.
The rendered text looks like this:
<TextBlock Text="This text demonstrates some TextBlock properties."
IsTextSelectionEnabled="True"
SelectionHighlightColor="Green"
Foreground="Blue"
FontWeight="Light"
FontFamily="Arial"
FontStyle="Italic"/>TextBlock textBlock = new TextBlock();
textBlock.Text = "This text demonstrates some TextBlock properties.";
textBlock.IsTextSelectionEnabled = true;
textBlock.SelectionHighlightColor = new SolidColorBrush(Windows.UI.Colors.Green);
textBlock.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
textBlock.FontWeight = Windows.UI.Text.FontWeights.Light;
textBlock.FontFamily = new FontFamily("Arial");
textBlock.FontStyle = Windows.UI.Text.FontStyle.Italic;
// Add TextBlock to the visual tree.
rootPanel.Children.Add(textBlock);This example demonstrates customizing different inline elements within a TextBlock.
The rendered text looks like this:
<TextBlock IsTextSelectionEnabled="True" SelectionHighlightColor="Green" FontFamily="Arial">
<Run Foreground="Blue" FontWeight="Light" Text="This text demonstrates "></Run>
<Span FontWeight="SemiBold">
<Run FontStyle="Italic">the use of inlines </Run>
<Run Foreground="Red">with formatting.</Run>
</Span>
</TextBlock>TextBlock textBlock = new TextBlock();
textBlock.IsTextSelectionEnabled = true;
textBlock.SelectionHighlightColor = new SolidColorBrush(Windows.UI.Colors.Green);
textBlock.FontFamily = new FontFamily("Arial");
// For Run and Span, add 'using Windows.UI.Xaml.Documents;'
Windows.UI.Xaml.Documents.Run run = new Run();
run.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
run.FontWeight = Windows.UI.Text.FontWeights.Light;
run.Text = "This text demonstrates ";
Windows.UI.Xaml.Documents.Span span = new Span();
span.FontWeight = Windows.UI.Text.FontWeights.SemiBold;
Run run1 = new Run();
run1.FontStyle = Windows.UI.Text.FontStyle.Italic;
run1.Text = "the use of inlines ";
Run run2 = new Run();
run2.Foreground = new SolidColorBrush(Windows.UI.Colors.Red);
run2.Text = "with formatting.";
span.Inlines.Add(run1);
span.Inlines.Add(run2);
textBlock.Inlines.Add(run);
textBlock.Inlines.Add(span);
// Add TextBlock to the visual tree.
rootPanel.Children.Add(textBlock);This example shows how to use an inline hyperlink. For more info, see Hyperlink.
<TextBlock><Hyperlink xml:space="preserve" NavigateUri="http://www.bing.com"> Hyperlink to Bing </Hyperlink></TextBlock>// Create a TextBlock this is needed to put the hyperlink inside
TextBlock textBlock = new TextBlock();
// Create a Hyperlink and a Run.
// The Run is used as the visible content of the hyperlink.
Hyperlink hyperlink = new Hyperlink();
Run run = new Run();
// Set the Text property on the run.
// This is the visible text of the hyperlink.
run.Text = " Hyperlink to Bing ";
// Add the Run to the Hyperlink.
hyperlink.Inlines.Add(run);
// Set the URI for the Hyperlink.
hyperlink.NavigateUri = new Uri("http://www.bing.com");
// Add the Hyperlink to the TextBlock.
textBlock.Inlines.Add(hyperlink);
// Add TextBlock to the visual tree.
rootPanel.Children.Add(textBlock);The following example shows how to use the LineStackingStrategy property to determine how the line boxes are created for text lines of a TextBlock. The first TextBlock has a LineStackingStrategy value of MaxHeight,the second TextBlock has a value of BlockLineHeight, and the third TextBlock has a value of BaselineToBaseline.
The rendered text looks like this:
[!code-xamlLineStackingStrategyExampleWholePage]