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

Question

有人可以告诉我在使用 ItemsControl 时如何正确对齐和调整控件大小吗？ .

我想在左边有一个描述和一个 TextBox在 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>

我以为我可以使用 SharedSizeGroup <Grid> 中的属性(property)但它仍然无法正确调整大小。相反，它只显示 <TextBlock>横跨<Grid> .

这是我的代码:

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

知道如何解决这个问题吗？

谢谢。

更新1:我无法按照我的需要让它工作。这是我到目前为止所得到的:

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

这最终以这种方式显示我的布局:



如您所见，我的TextBox根据最大 TextBlock 正确对齐但我的 ItemsControls 并没有一直延伸。我想这是有道理的，因为它位于 ColumnDefinitions 所在的同一网格内。被定义。

现在，如果我移动 ColumnDefinitions' out this grid to the outer grid and remove all instances of Grid.IsSharedSizeScope`，我猜如下:



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

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



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

最后，如果我添加 Grid.IsSharedSizeScope="True"至ItemsControl正如@mm8 最初建议的那样，

<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 的属性(property)本身:

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