WPF Difference Between Design View and Running

Question

In my design view I have this:

But when I run, I get this:

This is my code:

<Viewbox Margin="95,49,399.4,246.4">
    <Grid Width="20" Height="20">
        <Ellipse Stroke="Black" HorizontalAlignment="Left" Width="20"/>
        <TextBlock HorizontalAlignment="Center" Text="i" TextAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Viewbox>
<Viewbox Margin="21,43,21,243.4">
    <Grid Height="20">
        <TextBlock FontSize="8" HorizontalAlignment="Center" Text="Lorem ipsum dolor sit amet consecutetur" TextAlignment="Left" VerticalAlignment="Center"/>
    </Grid>
</Viewbox>

Is there a better way for me to achieve what is in the design view; and, why is there any difference at all between the two?

Answer 1

I'm pretty sure its because your window is a different size at runtime, although that's not the real issue.

You are using two different Viewboxes and each is secured into place by using a margin with different offsets from each window edge. If you make the window bigger or smaller then the margins don't change, but the size inside the viewbox does.

Since a viewbox will automatically scale its contents to fit the size of the available area (see http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx) that is what makes your content look different.

If I were trying to layout the above, I'd do something that simply lays out horizontally and centres;

 <StackPanel >
        <TextBlock FontSize="20" Text="Heading" HorizontalAlignment="Center"/>
        <StackPanel Orientation="Horizontal"  HorizontalAlignment="Center">
            <Grid x:Name="iGrid">
                <Ellipse Width="{Binding ElementName=iGrid, Path=ActualHeight}" Stroke="Black"/>
                <TextBlock Text="i" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
            <TextBlock Text="Lorem ipsum"/>
        </StackPanel>
    </StackPanel>