WPF grid layout and cell content margins

Question

Hey guys, I am working on a WPF control whose content is a grid. I am relatively new to WPF so I am wondering if the below is the right way to go about this.

I placed two labels in the grid, both in the same column but adjacent rows:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledProject8.Window1"
x:Name="Window"
Title="Window1"
Width="200" Height="200">

<Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"/>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Content="1.23" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
    <Label Grid.Row="1" Content="45" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Grid>

I set the labels' vertical alignment so that the label on row zero is aligned to the bottom and the label on row 1 is aligned to the top.

Now, this is close to what I want but I need the actual text of the label in row 1 to be closer to the text of label in row zero. To do this I set the margin of the label in row 1 to a negative value:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledProject8.Window1"
x:Name="Window"
Title="Window1"
Width="200" Height="200">

<Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"/>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Content="1.23" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
    <Label Grid.Row="1" Content="45" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,-20,0,0"/>
</Grid>

Is that the right way to do it? Granted that my examples above are simplistic but as the grid contents grow and get more complicated (such as including other layout containers) is setting different values for control margins the correct way to make adjacent cells closer or farther apart?

I am just a little concerned since I am trying my best to avoid hard coding any types of "designer" values like I did when working with WinForms (such as setting exact coords for location and values for sizes) and would like to let the layout manager just take care of it. However, it looks like setting the margin is the only way to go.

Thanks for the help :)

Answer 1

That looks good! The only thing I was caught a little off guard with was the -20 for the top margin (instead of 20 for the bottom which should do the same thing), but I would only change that for clarity.

The main thing to note is the container of choice, which Grid will definitely work for you. Another feature of this is that as you stretch the Grid, the distance between your elements will proportionally grow (probably what you want anyway). The only weakness of the Grid is that it's not the most efficient. Mainly because you can do so much with it.

You could accomplish the same thing as above with a canvas (with the stretching feature) or if you didn't want the distance to stretch you might try a stackpanel, which is also going to be more efficient than the Grid. There are a few other panels as well, but becoming acquainted with what they can do (and how well they perform) is really helpful, especially when having to create more complex layouts.

As for the Margin, yeah that, along with setting width and height, are standard ways of setting spacing.