UWP - How to add a new line to a TextBlock

UWP - Add a new line to a TextBlock

The TextBlock is the primary control for displaying read-only text in UWP apps. The UWP app developers can use it to display single-line or multi-line text, inline hyperlinks, and text with formatting like bold, italic, or underlined. The TextBlock is designed to display a single paragraph and it does not support text indentation.

The following Universal Windows Platform application development tutorial demonstrates how we can add a new line to a TextBlock. Here we will add a new line to three TextBlock instances.

We will add a new line using the XAML language to the first TextBlock control. And we will add a new line to the second TextBlock control programmatically using c# language. And we will add a new line to the third TextBlock control by using the new line character.

For the first TextBlock control, we will use the inline LineBreak elements to add new lines to it. And for the second TextBlock control, we will create and apply the Run and LineBreak elements programmatically.

The Run class represents a discrete section of formatted or unformatted text. The UWP developers can use a Run instance in a TextBlock or RichTextBlock. The UWP app developers can even place multiple Run elements inside a Span. The UWP developers should typically use the Run element only when they want to format a discrete section of text within the TextBlock.

The Run class Text property gets or sets the text contents of the Run.

The LineBreak class represents an inline element that causes a new line to begin in content when rendered in a text container.

The TextBlock class Inlines property gets the collection of inline text elements within a TextBlock. This property value is an InlineCollectionWhich is a collection that holds all inline text elements from the TextBlock. The default value of this property is an empty collection.

In the last TextBlock control, we add a new line using the new line characters (\n). Here we inserted a new line in a string by placing (\n) within TextBlock text. So finally, the UWP developers can add a new line to the TextBlock control using the LineBreak element or new lines characters.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel 
        x:Name="StackPanel1" 
        Margin="50" 
        Orientation="Vertical"
        Background="AliceBlue"
        Padding="50"
        >
        <Border Background="Navy" Margin="10">
            <TextBlock
                x:Name="TextBlock1"
                Margin="50"
                FontSize="25"
                Foreground="White"
                FontFamily="Consolas"
                >
                This is first line.
                <LineBreak/>
                This is second line.
                <LineBreak/>
                This is third line.
            </TextBlock>
        </Border>
        <Border Background="Violet" Margin="10">
            <TextBlock
                x:Name="TextBlock2"
                Margin="50"
                FontSize="30"
                FontFamily="MV Boli"
                Text="First line. "
                Foreground="Snow"
                />
        </Border>
        <Border Background="Yellow" Margin="10">
            <TextBlock
                x:Name="TextBlock3"
                Margin="50"
                FontSize="30"
                Foreground="Crimson"

                />
        </Border>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Documents;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Put a line break on second text block
            TextBlock2.Inlines.Add(new LineBreak());

            // Initialize a new Run instance
            Run run = new Run();

            // Set the text for run
            run.Text = "New line programmatically.";

            // Finally, show the new text on second line
            TextBlock2.Inlines.Add(run);

            // Another way to add new line on text block
            TextBlock3.Text = "First Line.\nSecond line.";
        }
    }
}