Share column width between Grids in items of an ItemsControl

Question

I'm writing a control to display and edit objects in a form. The control (FormDataView) is an ItemsControl where each item is a FormField control made of a Grid, with the field name in the left column and the editor (e.g. TextBox) in the right column. In order to align the editors, I want the first column in each Grid to share the same width.

So I tried to use IsSharedSizeScope and SharedSizeGroup, but it doesn't work, the first column has a different width in each FormField.

Here are the styles for these controls:

<Style TargetType="{x:Type ctl:FormDataView}" BasedOn="{StaticResource ResourceKey={x:Type ItemsControl}}">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"
                            Grid.IsSharedSizeScope="True"
                            IsItemsHost="True" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type ctl:FormField}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ctl:FormField}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="headerColumn" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Grid.Column="0"
                                      Content="{TemplateBinding Header}"
                                      Margin="3"
                                      TextElement.FontWeight="Bold" />
                    <ContentPresenter Grid.Column="1"
                                      Name="PART_Display"
                                      ContentTemplate="{TemplateBinding DisplayTemplate}"
                                      Margin="2"/>
                    <ContentPresenter Grid.Column="1"
                                      Name="PART_Editor"
                                      ContentTemplate="{TemplateBinding EditorTemplate}"
                                      Margin="2"
                                      Visibility="Collapsed" />
                </Grid>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsInEditMode, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ctl:FormDataView}}}"
                                 Value="True">
                        <Setter TargetName="PART_Display" Property="Visibility" Value="Collapsed" />
                        <Setter TargetName="PART_Editor" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Notice how Grid.IsSharedSizeScope is set in the ItemsPanel of FormDataView, while SharedSizeGroup is set in the template of FormField. This correctly expresses what I want to do: each FormField should use the same width for the first column. However, according to the documentation for the SharedSizeGroup property, this scenario is not supported:

Grid size-sharing does not work if you set IsSharedSizeScope to true within a resource template and you define SharedSizeGroup as outside that template.

OK, so I can understand why it doesn't work... but I don't know how to work around this limitation.

Any idea?

N.B.: I don't want to assign a fixed width to the first column of course...

Answer 1

Sadly I have no access to my Visual Studio Enviroment so I couldnt check the following tips...

1. Assign Grid.IsSharedSizeScope="True" to FormDataView itself and not to the ItemsPanel. Do you really need StackPanel as the items panel? cant you live without that?

See if the above change works first...

1. if not then revamp your item level code and assign SharedSizeGroup="headerColumn" in your item data template of your FormDataView and not in the ControlTemplate of individual FormField.

Let me know if this helps....