在 WPF 中使用 ItemsControl 时正确对齐控件

Question

有人可以告诉我在使用ItemsControl.

我想在左侧有一个描述，TextBox在右侧有一个在 an 中定义的多个字段的描述，ObservableCollection最终得到如下内容：

First Name:    [FirstNameTextBox]
Last Name:     [LastNameTextBox]
Date of Birth: [DobTextBox]

但我得到的是这个：

First Name: [FirstNameTextBox]
Last Name: [LastNameTextBox]
Date of Birth: [DobTextBox]

我希望所有文本框都根据最大的<TextBlock>. 如果这是直接在控件中完成的<Grid>，那么这将是直接的，因为所有控件都直接在网格中，并且您只需定义以下列定义

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

I thought I could use the SharedSizeGroup property in the <Grid> but it still doesn't resize correctly. Instead it only displays the <TextBlock> stretch across the <Grid>.

Here's my code:

<Grid Grid.IsSharedSizeScope="True" Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" SharedSizeGroup="Labels" />
        <ColumnDefinition Width="*" SharedSizeGroup="InputControls" />
    </Grid.ColumnDefinitions>
    <ItemsControl Grid.Row="1" ItemsSource="{Binding SelectedTemplate.Fields}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="Labels"/>
                        <ColumnDefinition SharedSizeGroup="InputControls"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Path=Label}" Grid.Column="0" Margin="5" 
                     VerticalAlignment="Center" Background="Red" />
                    <TextBox Text="{Binding Path=Value}"  Grid.Column="1" Margin="5" 
                     VerticalAlignment="Center" Background="Blue" />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Any idea how I can resolve this?

Thanks.

UPDATE1: I cannot get this to work as I need it to. This is what I've got so far:

<Grid Grid.Row="1" Background="Purple">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" SharedSizeGroup="Overall" />
    </Grid.ColumnDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="Labels" Width="Auto" />
            <ColumnDefinition SharedSizeGroup="InputControls" Width="*" />
        </Grid.ColumnDefinitions>
        <ItemsControl ItemsSource="{Binding SelectedTemplate.Fields}"                               
                  Background="Yellow" 
                  Grid.IsSharedSizeScope="True">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Green">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="Labels"/>
                            <ColumnDefinition SharedSizeGroup="InputControls"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=Label}" 
                               Grid.Column="0" 
                               Margin="5"
                               VerticalAlignment="Center"/>
                        <TextBox Text="{Binding Path=Name}"  
                             Grid.Column="1" 
                             Margin="5"
                             VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

This ends up displaying my layout this way:

As you can see, my TextBox are correctly aligned based on the largest TextBlock but my ItemsControls is not stretched all the way across. I guess that makes sense as it is within the same grid where the ColumnDefinitions are defined.

Now, if I move the ColumnDefinitions' out this grid to the outer grid and remove all instances ofGrid.IsSharedSizeScope`, I guess the following:

这再一次更接近我所需要的，因为我的 ItemsControl 现在一直拉伸，因为我已经设置了它，Grid.ColumnSpan="2"并且我的TextBox仍然与 对齐TextBlock并且一直拉伸，但现在的问题是，应该TextBlock更小，因为列设置为，Auto但它们的行为就像列设置为一样*，我想我失去了使用的目的IsSharedSizeScope，因为它已被删除。

现在，如果我添加IsSharedSizeScope="True"到外部网格，我会得到以下结果：

同样，这接近我想要的，因为我的 ItemsControl 被拉伸，我的文本框也被拉伸，但它们不再与最大的TextBlock.

最后，如果我按照@mm8最初的建议Grid.IsSharedSizeScope="True"添加，ItemsControl

<Grid Grid.Row="1" Background="Purple" Grid.IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="Labels" Width="Auto" />
        <ColumnDefinition SharedSizeGroup="InputControls" Width="*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.ColumnSpan="2" >
        <ItemsControl ItemsSource="{Binding SelectedTemplate.Fields}"                               
                      Background="Yellow" 
                      Grid.IsSharedSizeScope="True">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Green">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="Labels"/>
                            <ColumnDefinition SharedSizeGroup="InputControls"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=Label}" 
                               Grid.Column="0" 
                               Margin="5"
                               VerticalAlignment="Center"/>
                        <TextBox Text="{Binding Path=Name}"  
                             Grid.Column="1" 
                             Margin="5"
                             VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

    <!--<TextBlock Text="Invoice Number" Grid.Column="0" Margin="5" VerticalAlignment="Center"/>
        <TextBox Text="InvoiceNumber" Grid.Column="1" Margin="5" VerticalAlignment="Center"/>-->
</Grid>

我得到以下信息：

尽管定义不同，但这又让我回到了第一个方面？

我需要实现以下目标：

我究竟做错了什么？？

谢谢。

Answer 1

尝试设置Grid.IsSharedSizeScope自身的属性ItemsControl：

<ItemsControl Grid.Row="1" ItemsSource="{Binding SelectedBarcodeTemplate.Fields}" 
              Grid.IsSharedSizeScope="True">

同步 ItemsControl 中元素的宽度： https://joshsmithonwpf.wordpress.com/2008/09/06/synchronizing-the-width-of-elements-in-an-itemscontrol/