Spacing in Silverlight

Question

Hi All,

I am brand new to Silverlight and I am having a hard time with spacing. As you can see below, I have two lines of labels each in a Horizontal StackPanel. When they display there is a wide space (about an inch) between them. I can't figure out how to reduce this spacing. The height characteristics does not seem to do it.

Thanks in advance.

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Margin="10">
    <StackPanel x:Name="LayoutRoot" Background="LightGray" Margin="10">
        <StackPanel Orientation="Horizontal" Height="50" Width="500" Margin="10">
            <TextBlock  Height="15" Width="100"  Margin="20"/>
            <TextBlock Text="Heading" Height="15" Width="100"  Margin="10"/>
            <TextBlock Text="PDOF" Height="15" Width="100"  Margin="15"/>
            <TextBlock Text="PDOF" Height="15" Width="100"  Margin="15"/>

        </StackPanel>
        <StackPanel Orientation="Horizontal" Height="50" Width="500" Margin="10">
            <TextBlock  Height="15" Width="100"  Margin="20"/>
            <TextBlock Text="(degrees)" Height="15" Width="60"  Margin="10"/>
            <TextBlock Text="locked" Height="15" Width="40"  Margin="10"/>
            <TextBlock Text="(degrees)" Height="15" Width="100"  Margin="15"/>
            <TextBlock Text="(O'Clock)" Height="15" Width="100"  Margin="15"/>

        </StackPanel>
    </StackPanel>
</UserControl>

Answer 1

By specifying the margin as a single value Margin="10" you are specifying an equal margin of 10 around each edge, left, top, right, bottom.

You'll need to split the margin up to just get it on the left and right say:

Margin="10,0,20,0"

By doing this there's only a margin on the left and right, not the top and bottom. This will need applying to all the elements as margins are cumulative.

There's more information on the MSDN page for Margin:

<frameworkElement Margin="uniform"/>
- or -
<frameworkElement Margin="left+right,top+bottom"/>
- or -
<frameworkElement Margin="left,top,right,bottom"/>

So a single value is a uniform spacing, a pair of values splits the horizontal and vertical margins and having all four values gives you full control over all four.

In your case you could simply have:

Margin="10,0"

to specify a horizontal margin with no vertical margin, or

Margin="15,10"

to specify a horizontal margin but a smaller vertical margin.

This image from the page illustrates how this last one would be applied:

Answer 2

Thanks to ChrisF for his response. I decided to go with a different appraoch. I used Canvas instead of StackPanel.