How to preserve white-spaces of TextBlock in UWP apps

Question

If you simply set the value of Text property in a TextBlock as "Example   " (Note that there 3 whitespaces at the end of this string),what TextBlock shows in UI is just "Example".

And after searching for solutions on the Internet, I found that there is a way to solve this issue:

<Border BorderThickness="1" 
        BorderBrush="#FFFF0202" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center">
    <TextBlock x:Name="t1">
        <Run Text="Example&#160;&#160;&#160;"/>
    </TextBlock>
</Border>

The above code shows the use of Inline Property of TextBlock and   in Run's Text displays the whitespace correctly.

However, im my case I need to set the Text property of TextBlock in Code-behind(or via DataBinding), the trick above doesn't work and it shows Example    in UI.

I tried to set the value of Run's Text property by data binding, which I think can displays the escape character correctly, but Run's Text property is NOT a dependency property so I have no better way to solve this.

(However I think use padding property of TextBlock is also a trick to do this, and it should work. But there is any better way to do ?)

Answer 1

First, Run.Text does support data binding.

The reason that   doesn't print correctly inside data binding is because it's using XML escape characters.

Try using (char)160 instead -

public string TestString { get; set; } = "Example" + (char)160 + (char)160 + (char)160;

<TextBlock>
    <Run Text="{x:Bind TestString}" />
</TextBlock>

Answer 2

You can try setting the xml:space property to preserve in your XAML

<TextBox Name="t1"
         xml:space="preserve"
         Text="Example   " />

Answer 3

The zero width no-break space is treated as a non-printing character instead of whitespace, so adding  to the end of your value in XAML will preserve trailing spaces:

<Run Text="Example&#160;&#160;&#160;&#xfeff;"/>