Shared Size

Columns in separate grids agreeing on one width, so a list of rows lines up.

Try in Playground

Overview

A key column beside a description column is one of the most common shapes in a terminal UI, and the obvious way to build it — one Grid per row — does not line up, because each grid sizes its Auto column to its own content alone. The usual workaround is to pad the text to a guessed width in code, which then has to be re-guessed every time the longest entry changes.

SharedSizeGroup names a row or column definition; every definition sharing that name takes the width of the widest of them. Grid.IsSharedSizeScope on an ancestor is what bounds the name, so two screens can both call a group "keys" without one setting the other's width.

A definition in a group is sized from its content whatever its Width says. Sharing a proportional width between grids means nothing, so a * in a group behaves like Auto and is left out of the star distribution.

Properties

PropertyTypeDefaultDescription
ColumnDefinition.SharedSizeGroupstring?nullName of the group this column belongs to.
RowDefinition.SharedSizeGroupstring?nullName of the group this row belongs to.
Grid.IsSharedSizeScopebool (attached)falseMarks an element as the boundary within which group names are matched. Set it on any ancestor.

A group with no scope above it falls back to sizing on its own content, which is what Auto would have done — rather than silently doing nothing at all.

Auto sizing

Shared sizing is built on Auto, which measures the largest preferred size among the children in that row or column, floored by MinWidth/MinHeight. Only children spanning a single row or column contribute: a spanned child cannot be attributed to one definition without deciding how to split it. Children with Visibility="Collapsed" contribute nothing. 

<!-- The scope bounds the group name -->
<Border Grid.IsSharedSizeScope="True">
    <StackPanel>

        <!-- Each row is its own Grid, yet the key columns agree -->
        <Grid ColumnSpacing="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" SharedSizeGroup="keys" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="enter" />
            <TextBlock Grid.Column="1" Text="open the selected row" />
        </Grid>

        <Grid ColumnSpacing="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" SharedSizeGroup="keys" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="backspace" />
            <TextBlock Grid.Column="1" Text="back to the previous centre" />
        </Grid>

    </StackPanel>
</Border>

Key Concepts