Binding Grid Column Width inside UserControl to parent Grid Column Width

Question

I have a WPF Grid with two rows. First row contains 4 columns and each column contains a Button. Second row contains user control with colspan of 3. The custom control contains another Grid with two columns.

I would like to set the width of the first column in UserControl's grid to the width of the second column in the MainWindow's grid. In the example below "nested column 0"'s width should be the same as "Column 1"'s width.

I tried with ElementName but it did not work out. Any ideas how to do it?

<Window x:Class="TestElementName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
        xmlns:local="clr-namespace:TestElementName" 
        Title="MainWindow" Height="200" Width="600">
    <Grid Tag="YeahGrid" Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button Grid.Column="0" Grid.Row="0">Column 0</Button>
        <Button Grid.Column="1" Grid.Row="0" MinWidth="180">Column 1</Button>
        <Button Grid.Column="2" Grid.Row="0" MinWidth="115">Column 2</Button>
        <Button Grid.Column="3" Grid.Row="0">Column 3</Button>

        <local:ucButton Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" BorderBrush="Red" BorderThickness="1" />
    </Grid>
</Window>

User control is as follows:

<UserControl x:Class="TestElementName.ucButton"
             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" 
             xmlns:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0">nested column 0</Button>
        <Button Grid.Column="1">nested column 1</Button>
    </Grid>
</UserControl>

Thank you!

Answer 1

You can do this using a SharedSizeGroup. This allows you to link the width of designated columns in multiple Grids. (It also works for row height!)

First you need to define a SharedSizeScope on a control that encompasses all of the columns that will share widths. You can use your YeahGrid for this:

<Grid Tag="YeahGrid" Name="grid" Grid.IsSharedSizeScope="True">

Then set the SharedSizeGroup property on the columns you want to align. In the Window:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2" SharedSizeGroup="HallelujahSSG" />
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

And in the UserControl:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" SharedSizeGroup="HallelujahSSG"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

Now the widths of all Grid columns with the same SharedSizeGroup name are linked, effectively bound to the width of the column that requires the most space (in this case Column 1 in YeahGrid).