在ItemsControl的项目中的网格之间共享列宽 [英] Share column width between Grids in items of an ItemsControl

问题描述

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

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.

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

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>

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

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:

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

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.

有什么主意吗?

N.B .:我不想为第一列分配固定宽度...

推荐答案

不幸的是，我无法访问我的Visual Studio环境，所以我无法检查以下提示...

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

1. 将 Grid.IsSharedSizeScope ="True" 分配给 FormDataView 本身，而不分配给 ItemsPanel .您是否真的需要 StackPanel 作为项目面板?你不能没有那生活吗?

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. 如果没有，则修改您的商品级别代码，并在 FormDataView 的商品数据模板中分配 SharedSizeGroup ="headerColumn" ，而不是在 ControlTemplate 中分配 SharedSizeGroup ="headerColumn" 各个 FormField 的code>.

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

这篇关于在ItemsControl的项目中的网格之间共享列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！