WPF Grid.IsSharedSizeScope across multiple grids

Question

I have a situation where I have buttons in multiple grids and the requirement that all the buttons are the same size. I attempted to use Grid.IsSharedSizeScope but was unsuccessful.

The final layout should look like the following image, except all buttons should be the same size.

The XAML currently looks like this. Does anyone see where I am going wrong?

<UserControl x:Class="UserControls.UserControl2"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <GroupBox Grid.Row="0" Grid.Column="0" Header="Header 1" Grid.IsSharedSizeScope="True">
        <Grid Grid.IsSharedSizeScope="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
            </Grid.ColumnDefinitions>
            <Button Content="A" Grid.Row="0" Grid.Column="0" Margin="2" />
            <Button Content="B" Grid.Row="0" Grid.Column="1" Margin="2" />
            <Button Content="C" Grid.Row="0" Grid.Column="2" Margin="2" />
        </Grid>
    </GroupBox>
    <GroupBox Grid.Row="1" Grid.Column="0" Header="Header 2" Grid.IsSharedSizeScope="True">
        <Grid Grid.IsSharedSizeScope="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
            </Grid.ColumnDefinitions>
            <Button Content="AA" Grid.Row="0" Grid.Column="0" Margin="2" />
            <Button Content="BB" Grid.Row="0" Grid.Column="1" Margin="2" />
        </Grid>
    </GroupBox>
</Grid>

Answer 1

Apply the Grid.IsSharedSizeScope only to top level container. refer below code.

<Grid Grid.IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <GroupBox Grid.Row="0" Grid.Column="0" Header="Header 1" >
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                </Grid.ColumnDefinitions>
                <Button Content="A" Grid.Row="0" Grid.Column="0" Margin="2" />
                <Button Content="B" Grid.Row="0" Grid.Column="1" Margin="2" />
                <Button Content="C" Grid.Row="0" Grid.Column="2" Margin="2" />
            </Grid>
        </GroupBox>
        <GroupBox Grid.Row="1" Grid.Column="0" Header="Header 2" >
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Button" />
                </Grid.ColumnDefinitions>
                <Button Content="AA" Grid.Row="0" Grid.Column="0" Margin="2" />
                <Button Content="BB" Grid.Row="0" Grid.Column="1" Margin="2" />
            </Grid>
        </GroupBox>
    </Grid>