WPF - 两列对齐右列

时间:2017-03-30 09:19:40

标签: wpf xaml

我有以下XAML,我试图简化并删除不相关的代码,如名称,内容,绑定等。

问题是右边的文本框没有很好地对齐。我希望文本框能够对齐,所以宽度相等。

enter image description here

XAML代码:

<StackPanel Grid.Row="1" Grid.RowSpan="2" Grid.Column="1" MinWidth="200" HorizontalAlignment="Right">
<GroupBox >
    <GroupBox.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
            </Grid>
        </DataTemplate>
    </GroupBox.HeaderTemplate>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="69"/>
            <ColumnDefinition Width="6"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
        <TextBox Grid.Column="2" Grid.Row="0" Margin="5,7" VerticalAlignment="Center"/>

        <Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
        <TextBox Grid.Column="2" Grid.Row="1" Margin="5,7" VerticalAlignment="Center"/>

        <ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
                        <TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</GroupBox>
</StackPanel>

我尝试了很多不同的组合但是无法按照我的目标来实现目标。

1 个答案:

答案 0 :(得分:1)

您可以在Itemscontrol上方的Grid上指定:Grid.IsSharedSizeScope ='True'。 然后,在DataTemplate for item中,指定第一个ColumnDefinition: SharedSizeGroup ='LabelsColumn(或您喜欢的任何名称)'。 这将自动重新计算第一列的宽度,与最长的文本/标签一样长(在此方案中)。 例如:

<StackPanel Grid.Row="1"
                Grid.RowSpan="2"
                Grid.Column="1"
                MinWidth="200"
                HorizontalAlignment="Right">
        <GroupBox>
            <GroupBox.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Row="0"
                                   Grid.Column="1"
                                   Margin="5" />
                    </Grid>
                </DataTemplate>
            </GroupBox.HeaderTemplate>
            <Grid Grid.IsSharedSizeScope="True">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" 
                                      SharedSizeGroup="Labels"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0"
                       Grid.Row="0"
                       Margin="5"
                       VerticalAlignment="Center"
                       Grid.ColumnSpan="2" />
                <TextBox Grid.Column="1"
                         Grid.Row="0"
                         Margin="5,7"
                         VerticalAlignment="Center" />

                <Label Grid.Column="0"
                       Grid.Row="1"
                       Margin="5"
                       VerticalAlignment="Center"
                       Grid.ColumnSpan="2" />
                <TextBox Grid.Column="1"
                         Grid.Row="1"
                         Margin="5,7"
                         VerticalAlignment="Center" />

                <ItemsControl Grid.Row="2"
                              Grid.Column="0"
                              Grid.ColumnSpan="3">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"
                                                      SharedSizeGroup="Labels"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Label Grid.Column="0"
                                       Grid.Row="0"
                                       Margin="5"
                                       VerticalAlignment="Center" />
                                <TextBox Grid.Column="1"
                                         Grid.Row="0"
                                         Margin="5"
                                         VerticalAlignment="Center" />
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </GroupBox>
    </StackPanel>