How can I make my Grid Columns always be the same width?

Question

If I set the Column's width to *, they're the same width initially but if an item is larger than the amount allowed then it will stretch the column width.

How can I force my Grid to keep it's columns the same size with explicitly defining a size?

I cannot use a UniformGrid because this Grid is being used in an ItemsControl, and the Items need to be placed in specific Grid.Row/Grid.Column spots

Edit Here's a sample of my current code.

<DockPanel>

    <!-- Not showing code here for simplicity -->
    <local:ColumnHeaderControl DockPanel.Dock="Top" />
    <local:RowHeaderControl DockPanel.Dock="Left" />

    <ItemsControl ItemsSource="{Binding Events}">
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Grid.Column" 
                        Value="{Binding DueDate.DayOfWeek, 
                            Converter={StaticResource EnumToIntConverter}}" />
            </Style>
        </ItemsControl.ItemContainerStyle>

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsPanel>
    </ItemsControl>

</DockPanel>

Edit #2 Here's my final solution. It makes the columns the correct size, and it keeps the size correct when the application gets resized.

<ColumnDefinition Width="{Binding 
    ElementName=RootControl, 
    Path=ActualWidth, 
    Converter={StaticResource MathConverter}, 
    ConverterParameter=(@VALUE-150)/7}" />

150 is the width of the Row Headers + all margins and borders. I'm actually in the process of updating my MathConverter to an IMultiValueConverter so I can bind both parameters (If you're interested in the Converter code it can be found here, although it's only the single-value converter)

score 16 · Answer 1 · answered Sep 26 '11 at 17:30

16

You could:

1) Hardcode a size in DIP:

<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
...

2) Use SharedSizeGroup, it takes a char

<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="A" />
...

You can read more about it here

answered Sep 26 '11 at 17:30

Louis Kottmann

16,268
4
64
88

1

I don't want to hard-code the width because the grid is meant to take up all available space, and the SharedSizeGroup makes all items the same width as the largest item – Rachel Sep 26 '11 at 17:37
Could you post some code? the behavior is odd. Star sized columns should only resize when the container is resized, content doesn't play a role. – Louis Kottmann Sep 26 '11 at 17:38
6

For option 2 you have to set `````` for the surrounding grid – PeterB Jun 13 '18 at 06:32

score 5 · Accepted Answer · answered Sep 26 '11 at 17:30

5

You could try binding the width of your columns to a property that divides the total width of the window by the number of columns

answered Sep 26 '11 at 17:30

msmucker0527

5,164
2
22
36

I am working with trying that out now, but my problem I am running into is the grid doesn't take up the full space so I also have to calculate margins, other control widths, etc before I can calculate the size to divide by 7. My base panel is a DockPanel, with the headers being dynamically drawn as needed, then the ItemsControl with the content taking up all remaining space. – Rachel Sep 26 '11 at 17:38

score 3 · Answer 3 · answered Dec 19 '15 at 20:45

3

The cleanest way is to use a UniformGrid like this:

<UniformGrid Rows="1">
    <Rectangle Fill="Blue" />
    <Rectangle Fill="Yellow" />
    <Rectangle Fill="Red" />
</UniformGrid>

Extra nice when used as ItemsPanel.

answered Dec 19 '15 at 20:45

Johan Larsson

17,112
9
74
88

As I said in my question, I cannot use a UniformGrid because the Items need to be placed in specific `Grid.Row`/`Grid.Column` spots, and do not populate every square in the grid. – Rachel Dec 20 '15 at 19:03

score 1 · Answer 4 · answered Jul 11 '18 at 15:35

Try the IsSharedSizeScope working of the Grid:

<StackPanel Margin="15" Grid.IsSharedSizeScope="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Text="Col 1"/>
        <TextBox Grid.Column="1" />
        <TextBlock Grid.Column="2" Text="3rd column here"/>
    </Grid>

    <Separator Margin="0,20"/>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
            <ColumnDefinition />
            <ColumnDefinition SharedSizeGroup="B"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Text="1"/>
        <TextBox Grid.Column="1"/>
    </Grid>
</StackPanel>

I hope it helps.

For the detail description check this link: https://wpf.2000things.com/tag/sharedsizegroup/

score 0 · Answer 5 · answered Sep 26 '11 at 17:57

0

I have not tried it, but I think this should work:

XAML:

<ColumnDefinition Width="*" Loaded="ColumnDefinition_Loaded"/>

C#:

private void ColumnDefinition_Loaded(object sender, RoutedEventArgs e)
        {
            ((ColumnDefinition)sender).MaxWidth = ((ColumnDefinition)sender).ActualWidth;
        }

answered Sep 26 '11 at 17:57

loxxy

12,990
2
25
56

The problem is that if an item is wider than what `*` allows, it stretches the column beyond that size. The code you posted will just make all columns equal to the largest column width, and I don't want that. – Rachel Sep 26 '11 at 18:02
Did you actually try setting all the ColumnDefinations with the same handler - ColumnDefinition_Loaded?? The code should set all the max widths to whatever they are (allowed by *). After that, any item put inside should not alter the size. – loxxy Sep 26 '11 at 18:08
Yes I did, it made all columns as wide as the largest item, which made part of the Grid not show since I don't have a horizontal scrollbar. Also, the header no longer lined up and it doesn't automatically resize if the user resizes the application. – Rachel Sep 26 '11 at 18:11
Well I tried by adding items manually, which is why I guess it didn't show up to me that way. Sorry, but I guess the only solution is manually calculating as suggested by msmucker0527. – loxxy Sep 26 '11 at 18:15

How can I make my Grid Columns always be the same width?

5 Answers5

Linked