TextBlock with multiple <Run> spacing

Question

Given a formatted text block in Windows Phone 7.1 project:

<StackPanel Orientation="Horizontal">
    <TextBlock Foreground="DarkGray" VerticalAlignment="Bottom" Margin="0,0,0,8">
            <Run Text="total length "/>
            <Run Text="{Binding TotalHours}" FontSize="48"/>
            <Run Text="h "/>
            <Run Text=":" FontSize="48"/>
            <Run Text="{Binding TotalMinutes}" FontSize="48"/>
            <Run Text="m "/>
    </TextBlock>
</StackPanel>

It is being previewed correctly in VS designer:

It is already looking not the way I want in Blend:

It looks just as in Blend (good job Blend team) in emulator and a real device.

What adds those spaces before and after big 8 and 45?

How can I force my layout to look correctly (like in VS designer)?

Solution 1

if you write all your Runs in the same line, the empty space will go away. Basically a new line here is one empty space on the UI.

<TextBlock Foreground="DarkGray" VerticalAlignment="Bottom" Margin="0,0,0,8"><Run Text="total length "/><Run Text="{Binding TotalHours}" FontSize="48"/><Run Text="h "/><Run Text=":" FontSize="48"/><Run Text="{Binding TotalMinutes}" FontSize="48"/><Run Text="m "/></TextBlock>

Solution 2

To build off Justin XL's answer, the important part is that you can't have whitespace between the run tags, but whitespace in the tags themselves does't matter...

So you can get creative to place runs on separate lines, but not add spaces to the result:

<!-- Formatted to prevent adding spaces between runs -->
<TextBlock Foreground="DarkGray" VerticalAlignment="Bottom" Margin="0,0,0,8"
    ><Run Text="total length "
    /><Run Text="{Binding TotalHours}" FontSize="48"
    /><Run Text="h "
    /><Run Text=":" FontSize="48"
    /><Run Text="{Binding TotalMinutes}" FontSize="48"
    /><Run Text="m "
/></TextBlock>

Comments

[Valentin Kuzub]

great reply. Like seriously, we got those Runs who are child elements of TextBlock, why the hell it matters for how TextBlock is displayed whether or not we place whitespaces between them. And why newlines + a lot of spaces are interpreted as single space??

[Agent_L]

@ValentinKuzub Because you can enter plain text between the runs and it will be rendered. Collapsing consecutive whitespaces (tabs, enters) to one single space is common XML behaviour most of us are already familiar with in HTML.

[Valentin Kuzub]

yeah, as if that is a great example of HTML greatness over XML? allowing mixing text between Runs, Runs and treating whitespaces with special case handling is cleary not a good thing and a weird choice. Your swapping problem and the cause. Problem is weird treatment of child XML elements of TextBlock. It includes weird whitespace treatment and weird raw text in between elements treatment.

[aruno]

reluctant +1 - I always hated this. one editor tries to put them on one line, another tries to separate them. such a mess

[Jerry]

Works great! Great tip! In my case, my first Run tag bound value might be blank, no spaces, but there was always a space at start of string regardless. Having Run tags on same line in XAML fixes this issue.

[George Birbilis]

why not use Spans instead of Runs then? (or are they not supported on Windows Phone?)

[Josh Stribling]

I think the problem here has more to do with the whitespace between the tags being treated as a space rather than an issue with the tags themselves. From what I understand, a Span is used to add non text elements to a textblock, where Run is for text only, so I doubt using a Span in place of a Run would fix the issue with the extra spaces being added.