How to preserve white-spaces of TextBlock in UWP a

问题:

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

回答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>

回答2:

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

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

回答3:

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.