在 ItemsControl 的项目中的网格之间共享列宽答案

【问题标题】：Share column width between Grids in items of an ItemsControl在 ItemsControl 的项目中的网格之间共享列宽
【发布时间】：2011-07-30 17:05:50
【问题描述】：

我正在编写一个控件来显示和编辑表单中的对象。控件 (FormDataView) 是一个ItemsControl，其中每个项目都是一个FormField 控件，由Grid 组成，字段名称在左列，编辑器（例如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 是如何设置在FormDataView 的ItemsPanel 中的，而SharedSizeGroup 是如何设置在FormField 的模板中的。这正确地表达了我想要做的事情：每个FormField 应该对第一列使用相同的宽度。不过，根据SharedSizeGroup属性的documentation，不支持这种场景：

如果将 IsSharedSizeScope 设置为 true，网格大小共享将不起作用在资源模板中，您将 SharedSizeGroup 定义为外部那个模板。

好的，所以我可以理解为什么它不起作用......但我不知道如何解决这个限制。

有什么想法吗？

注意：我当然不想为第一列分配固定宽度...

【问题讨论】：

你为什么不直接使用 GridView（带有列的列表视图）？
@Wallstreet 程序员，如果我能找到隐藏列标题的方法，我可以试试看……但我更喜欢基于网格的干净解决方案。对于我的需求来说，使用 GridView 似乎有点矫枉过正

标签： wpf grid sharedsizegroup

【解决方案1】：

遗憾的是，我无法访问我的 Visual Studio 环境，因此无法查看以下提示...

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

先看看上面的改动是否有效...

如果不是，则修改您的商品级别代码并在您的 FormDataView 的商品数据模板中分配 SharedSizeGroup="headerColumn"，而不是在个人 FormField 的 ControlTemplate 中分配。

如果这有帮助，请告诉我......

【讨论】：