WPF – GridRows Spacing Confusion

July 3, 2022

I have an Expander control, and the grid inside will have a ListBox with a Label on top of it saying ‘Video Sources’. I am attempting to use Grid Row Definitions to achieve this. My issue however is that the grid rows separate everything evenly. I want the label to be directly on top of the ListBox. Removing the definitons causes the ListBox to fill up the entire grid including covering up the Label (which makes no sense to me as the label is on top).

My current code is below:

<Expander HorizontalAlignment="Left" Height="434" Header="Expander" ExpandDirection="Left" Margin="651,8,0,8">
    <Grid Background="#FF252525" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Label Content="Video Sources" Grid.Row="0"/>

        <ListBox Grid.Row="1" d:ItemsSource="{d:SampleData}">

        </ListBox>
    </Grid>
</Expander>

The code produces this result. You can see there are even gaps between each control. I want the video sources label right above the listbox:

It would be nice if you could set the column name like in a ListView, however as far as I am aware that is not possible. I don’t think it’s worth using a ListView for something that will only have a single column, either

>Solution :

You have to set the rows height ; to auto (ie: minimal value) and * (ie: remaining space).
Also only two rows definition are needed.

<Grid>
    <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Label Grid.Row="0"
           Content="Video Sources" />

    <ListBox Grid.Row="1"
             ItemsSource="{d:SampleData}"
             VerticalAlignement="Top" />
</Grid>