在ItemsControl项中的网格之间共享列宽度

Question

我正在编写一个控件来显示和编辑表单中的对象。控件(FormDataView)是一个ItemsControl，其中每个项都是由Grid组成的FormField控件，字段名位于左列，编辑器(例如TextBox)位于右侧列。为了对齐编辑器，我希望每个Grid中的第一列共享相同的宽度。

所以我尝试使用IsSharedSizeScope和SharedSizeGroup，但是它不起作用，第一列在每个FormField中都有不同的宽度。

以下是这些控件的样式：

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

注意Grid.IsSharedSizeScope是如何在ItemsPanel of FormDataView中设置的，而SharedSizeGroup是如何在FormField模板中设置的。这正确地表达了我想要做的事情:每个FormField应该对第一列使用相同的宽度。但是，根据文档属性的SharedSizeGroup，不支持此场景：

如果在资源模板中将IsSharedSizeScope设置为true，并且将SharedSizeGroup定义为该模板的外部，则网格大小共享不起作用。

好吧，所以我能理解为什么它不起作用.但我不知道如何克服这个限制。

有什么想法吗？

注:当然，我不想给第一列指定固定宽度.

Answer 1

遗憾的是，我无法访问我的Visual环境，所以我无法检查以下提示.

1. 将Grid.IsSharedSizeScope="True"分配给FormDataView本身，而不是分配给ItemsPanel。您真的需要StackPanel作为项目面板吗？没有那个你就活不下去吗？

先看看上面的改变是否有效..。

1. 如果没有，则修改项目级别的代码，并在FormDataView的项数据模板中分配FormDataView，而不是在单个FormField的ControlTemplate中分配。

如果这对我有帮助..。