Make GridColumns align in two different Grids in WPF XAML

In XAML UI, some times we want to make GridColumn Width synchronized with other GridColumns in other Grids.

WPF provided a property called  SharedSizeGroup  which allows sizing properties shared between ColumnDefinition or RowDefinition.

And remeber to set  Grid.IsSharedSizeScope="True".

However , when we want one column take up all the available space, like the example above. You will find out that even you write Width="*" still doesn't work as SharedSizeGroup will make it as short as possible.

My solution is , Shared all the columns size except the one contain TextBox.


            <Grid  Grid.IsSharedSizeScope="True">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Grid Name="Grid1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" SharedSizeGroup="a" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="auto" SharedSizeGroup="c"/>
                        <ColumnDefinition Width="auto"  SharedSizeGroup="d"/>

                    </Grid.ColumnDefinitions>

                 ....

                </Grid>

                <Grid Name="Grid2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" SharedSizeGroup="a" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="auto" SharedSizeGroup="c"/>
                        <ColumnDefinition Width="auto"  SharedSizeGroup="d"/>

                    </Grid.ColumnDefinitions>

                 .........

                </Grid>

WPF XAML GridSplitter Style

<Style x:Key="gridSplitterStyle" TargetType="{x:Type GridSplitter}">
    <Setter Property="FrameworkElement.Height" Value="6"/>
    <Setter Property="TextElement.Foreground" Value="#FF204D89" />
    <Setter Property="Border.BorderThickness" Value="0,0,0,0" />
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True" />
    <Setter Property="UIElement.Focusable" Value="False" />
    <Setter Property="FrameworkElement.Cursor" Value="SizeNS" />
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                    <Border BorderThickness="0,0,0,0" >
                        <Canvas Width="19" Height="3">
                            <Rectangle Fill="{TemplateBinding TextElement.Foreground}" Width="2" Height="2" Canvas.Left="0" Canvas.Top="0" />
                            <Rectangle Fill="{TemplateBinding TextElement.Foreground}" Width="2" Height="2" Canvas.Left="4" Canvas.Top="0" />
                            <Rectangle Fill="{TemplateBinding TextElement.Foreground}" Width="2" Height="2" Canvas.Left="8" Canvas.Top="0" />
                            <Rectangle Fill="{TemplateBinding TextElement.Foreground}" Width="2" Height="2" Canvas.Left="12" Canvas.Top="0" />
                            <Rectangle Fill="{TemplateBinding TextElement.Foreground}" Width="2" Height="2" Canvas.Left="16" Canvas.Top="0" />
                        </Canvas>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>