Spanning grid column width inside UserControl to parent grid column width

Question

I have a WPF Grid with two rows. The first row contains 4 columns, and each column contains a button. The second row contains a user control with a column count of 3. User control contains another table with two columns.

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

I tried with ElementName, but that did not work. Any ideas how to do this?

<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> 

The 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> 

Thanks!

Answer 1

You can do this using SharedSizeGroup. This allows you to relate the width of selected columns in multiple grids. (It also works for line height!)

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

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

Then set the SharedSizeGroup property in the columns that 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 UserControl:

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

Now the widths of all Grid columns with the same name SharedSizeGroup are connected, effectively tied to the width of the column for which the largest space is required (in this case, column 1 in YeahGrid).

Answer 2

In your UserControl Xaml, you mentioned both ColumnDefinition width = "Auto". At this point, add the MinWidth attribute to suit your requirements.

For your scenario, you can add ---

 <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" MinWidth="180"/> <ColumnDefinition Width="Auto" MinWidth="115"/> </Grid.ColumnDefinitions> 

Because you use in mainwindow like this

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