Autosizing a grid column to take up remaining space in parent

11
votes

In WPF, I am having a heck of a time trying to get a grid to size properly.

I have the following layout for my grid:

<ItemsControl HorizontalContentAlignment="Stretch">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" />
                    <Label Grid.Column="1"/>
                    <TextBox Grid.Column="2"/>
                    <Button Grid.Column="3"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
</ItemsControl>

The problem is that Width="Auto" seems to be sizing that column to the width of the content, and not filling out the extra space in the parent container. This leaves the rest of the columns all unaligned, and ugly blank space at the end of each row.

I'm probably missing something simple, but I can't seem to find a method to fit the column appropriately.

Or is there a better control for the job?

2
wpfgrid

2 Answers

15
votes

* means fill or share. If you had two with * then they would share the width evenly.

<ColumnDefinition Width="*"/>
0
votes

Seems I found a solution after a bit more tinkering around.

The problem was: <ColumnDefinition Width="Auto"/>

This was causing the column to fit to the content. I changed it to: <ColumnDefinition />

This causes the column to fit to the empty space left in the parent container, regardless of content size.