#1,052 – Making Two Columns in a Grid the Same Size

April 16, 2014 Leave a comment

You can force two columns (or rows) in a Grid to always be the same size using the SharedSizeGroup property when defining the columns (or rows).

Below, we specify that the third column should auto-size and that the first and third columns should be the same size.  The first column will be sized to match the auto-sized third column.  We do the following:

  • Set Grid.IsSharedSizeScope property of the Grid to true
  • Set SharedSizeGroup property in the first and third ColumnDefinition elements to the same value (in this case it’s “A”)
        <Grid Name="myGrid" Grid.IsSharedSizeScope="True">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="A"/>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>

            <Label Content="0,0" Background="Azure" />
            <Label Content="1,0" Background="Moccasin" Grid.Row="1" />
            <Label Content="Row 0 Col 2" Background="Lavender" Grid.Column="1" />
            <Label Content="Row 1 Col 2" Background="Honeydew" Grid.Row="1" Grid.Column="1" />
            <Label Content="Row 0 Col 3" Background="LightSalmon" Grid.Column="2" />
            <Label Content="Row 1 Col 3" Background="GreenYellow" Grid.Row="1" Grid.Column="2" />
        </Grid>

1052-001

Filed under Layout Tagged with , , , ,

#424 – Getting Data-Bound Items in a ListBox to Be a Consistent Size

November 7, 2011 4 Comments

I demonstrated earlier how to add some rich content to a ListBox using data binding.

The problem with this is that the items don’t line up vertically.  We use several StackPanel elements in the data template, which autosize to fit their content.  We’d like them to autosize, but to use that same size across all rows, for each column.

We can share sizes between entries using the Grid.IsSharedSizeScope and SharedSizeGroup properties.

        <ListBox ItemsSource="{Binding MovieList}" SnapsToDevicePixels="True"
                 Grid.IsSharedSizeScope="True">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,5">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="Col1"/>
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding Image}" />
                        </Grid>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="Col2"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Vertical">
                                <Label Content="{Binding Title}" FontWeight="Bold"/>
                                <Label Content="{Binding Year}"/>
                            </StackPanel>
                        </Grid>

                        <Border BorderBrush="Black" BorderThickness="0.5"/>

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="Col3"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Vertical">
                                <Label Content="Actors:"/>
                                <Label Content="{Binding ActorLead}" Margin="10,0"/>
                                <Label Content="{Binding ActressLead}" Margin="10,0"/>
                            </StackPanel>
                        </Grid>

                        <Border BorderBrush="Black" BorderThickness="0.5"/>

                        <StackPanel Orientation="Vertical">
                            <Label Content="Director:"/>
                            <Label Content="{Binding Director}" Margin="10,0"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Filed under Layout Tagged with , , , ,