Question

If you run this code and click on tab 2 and then back on tab 1 the application goes insane and starts bouncing the column widths back and forth. Any suggestions on how to fix this?

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow"
    Height="350"
    Width="525">
<Grid IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Col3" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="Label 1"
               Grid.Row="0"
               Grid.Column="0" />

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

    <TextBlock Text="Label 2"
               Grid.Row="0"
               Grid.Column="2" />

    <TextBox Grid.Column="3"
             Grid.Row="0"
             Text="TextBox 2" />

    <DockPanel Grid.Row="1"
               Grid.Column="2"
               Grid.ColumnSpan="2">

        <TabControl>
            <TabItem Header="Tab 1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="Col3" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBlock Text="Tab 1: Short Text.."
                               Grid.Row="0"
                               Grid.Column="0" />

                </Grid>
            </TabItem>
            <TabItem Header="Tab 2">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="Col3" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBlock Text="Tab 2: Short Text.."
                               Grid.Row="0"
                               Grid.Column="0" />
                    <TextBlock Text="Tab 2: Long Text..................................... "
                               Grid.Row="1"
                               Grid.Column="0" />
                </Grid>
            </TabItem>
        </TabControl>
    </DockPanel>
    </Grid>
</Window>

This is stripped from a similar application and greatly simplified. The root of the problem is the SharedSizeGroup “Col3”. In the actual application there are other items that share that column so I cannot remove SharedSizeGroup unless there is another way to accomplish the desired behavior.

Answer 1

Setting attached property Grid.IsSharedSizeScope to True on parent element (TabControl) should stop size sharing propagation above the hierarchy. Like so:

<TabControl Grid.IsSharedSizeScope="True">

Within TabControl the sizes will be aligned.