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 ?)

Hardison

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>

Sodomite

Answer 2

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;"/>

Alyce

Answer 3

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

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

Aneto

If you do <TextBlock><Run>Hello</Run><Run xml:space="preserve"> world!</Run></TextBlock> the space between Hello and world is preserved if and only if the xml:space attribute is set. So xml:space="preserve" does work in UWP but it is indeed not propagated from the TextBlock to Run as expected. I guess the most relevant documentation on this is MSDN's Whitespace Processing in XAML. – Coaptation

I have recently installed Visual Studio 2017 and noticed that the bug was fixed and now xml:space="preserve" works as documented: you can have it specified on any parent of the <Run> element such as <TextBlock> or even <Page ...> and this will stop white space trimming and collapsing inside the <Run>. – Coaptation

Answer 4

I have a solution for a Listview.ItemTemplate in UWP.

<ListBox.ItemTemplate>
     <DataTemplate>
          <StackPanel Orientation="Horizontal">
               <TextBlock xml:space="preserve"><Run Text="{Binding ID}"></Run><Run> </Run><Run Text="{Binding name}"></Run><Run> </Run><Run Text="{Binding ipAdress}"></Run></TextBlock>
           </StackPanel>
      </DataTemplate>
</ListBox.ItemTemplate>

• Please note that the text block has the attribute xml:space="preserve".
  
• The spaces are set with run elements <Run> </Run>.
  
• With this solution you have to make sure that the and the elements are defined on once line in the code editor, otherwise the free space contained in there, will be taken over.

Neighbors