Question

In this simple example, I have 5 GroupBoxes, directly under a Grid. I try to declare 1 column and 5 rows, so that they get stacked vertically. I didn’t use a StackPanel, as I want to be able to size these group boxes intelligently later on (I’d like the 4 first ones to be minimally sized, to let the last GroupBox take up all the space that is left).

As shown below, everything appears in the same “cell”. However, in the designer mode of Blend 4, it seems like my grid shows 5 cells (4 empty)… Removing rows and column declaration doesn’t change a thing.

<UserControl
    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"
    x:Class="WpfControlLibrary1.MainControl"
    x:Name="MultiVol" MinHeight="520.12">

    <Grid>
        <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0.966"/>
                    <GradientStop Color="#FFD7D4FF"/>
                </LinearGradientBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <Label Content="General" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />    
                </WrapPanel>
            </GroupBox.Header>

            <UniformGrid Columns="2">
                <Label Content="RICs" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Preference" />
                <UniformGrid VerticalAlignment="Center" Columns="2" Rows="1">
                    <RadioButton GroupName="preference" Content="Exotic" IsChecked="False" />
                    <RadioButton GroupName="preference" Content="Flow" IsChecked="True" />
                </UniformGrid>
                <Label Content="Live updates" />
                <CheckBox IsChecked="False" VerticalAlignment="Center"/>
            </UniformGrid>  
        </GroupBox>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <CheckBox IsChecked="True" VerticalAlignment="Center" />
                <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> 
                </WrapPanel>
            </GroupBox.Header>
            <UniformGrid Columns="2">
                <Label Content="Spots"></Label>
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Hist. references" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Tenors" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
            </UniformGrid>
        </GroupBox>

        <GroupBox  Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <CheckBox IsChecked="True" VerticalAlignment="Center" />
                <Label Content="Skew" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />   
                </WrapPanel>
            </GroupBox.Header>
            <UniformGrid Columns="2">
                <Label Content="Spot Intervals"></Label>
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Hist. references" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Tenors" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Compute 'Power'" />
                <CheckBox IsChecked="False" VerticalAlignment="Center"/>
            </UniformGrid>
        </GroupBox>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <CheckBox IsChecked="True" VerticalAlignment="Center" />
                <Label Content="Term structure" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> 
                </WrapPanel>
            </GroupBox.Header>
            <UniformGrid Columns="2">
                <Label Content="Spots" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Tenors" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
            </UniformGrid>
        </GroupBox>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <Label Content="Live updates" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />   
                </WrapPanel>
            </GroupBox.Header>
            <ListView MinHeight="100" Background="{x:Null}">
                <ListView.View>
                    <GridView AllowsColumnReorder="False">
                        <GridViewColumn Header="RIC" />
                        <GridViewColumn Header="Last tick" />
                    </GridView>
                </ListView.View>
            </ListView>
        </GroupBox>         
    </Grid>
</UserControl>

Answer 1

You need to specify the Grid.Row property of your GroupBox controls. The Grid won’t automatically align them. In your image, all of your controls are in the first grid row. Add the attached property Grid.Row="0" to each GroupBox to specify the row. Note that the row index is zero-based.

Also, if you are wanting the last row to fill the remaining space, you will want to either set specific heights on the rest of the RowDefinitions, or set them all to auto (using Height="auto"). Using the latter will mean each row will size to it’s contents. Leaving the final RowDefinition as having no explicit height set will cause it to stretch and fill the remaining available space. Currently, since none of your RowDefinitions have a height set, they will all be sized equally within the available space.

Here is a tutorial that explains how the layout of the Grid control works.