CODEWITHSUNDEEP
c#xamlwindows-10win-universal-appuwp
JuniperPhoton
JuniperPhoton

Reputation: 746

How to preserve white-spaces of TextBlock in UWP apps

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 &#160; 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&#160;&#160;&#160; 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 ?)

Upvotes: 8

Views: 2884

Answers (4)

Emperor XLII
Emperor XLII

Reputation: 13432

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

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

Upvotes: 6

unknow27
unknow27

Reputation: 81

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.

Upvotes: 0

Justin XL
Justin XL

Reputation: 39006

First, Run.Text does support data binding.

The reason that &#160; 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>

Upvotes: 6

Mohit S
Mohit S

Reputation: 14044

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

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

Upvotes: 3

Related Questions