TextBlock with multiple 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)?

Answer 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>

Answer 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>