如何保持动态大小的控件对齐？答案

【问题标题】：How can I keep dynamic sized controls aligned?如何保持动态大小的控件对齐？
【发布时间】：2013-10-28 16:19:17
【问题描述】：

我有一个 WPF 应用程序，我正在寻找一种方法来对齐一些 Label 和 TextBox 控件，以便 TextBox 控件始终是内联的，但也允许 Label 内容是动态的（应根据需要移动 TextBox） .

这有点难以解释，所以这里有几个屏幕截图应该可以显示我的要求...

之前：

之后：

请注意第一个 TextBox 如何向右移动以便为较长的文本腾出空间，而第二个 TextBox 也移动以与第一个保持内联。（我想要的行为类似于 HTML 表格，每行有两个单元格）

请记住，我对 WPF 还很陌生（所以我可能完全走错了路），我使用了几个 StackPanel 来满足动态大小的标签。但是，问题当然是两个 StackPanel 互不了解。

这是我当前的代码：

<StackPanel Orientation="Horizontal">
    <Label Content="Label 1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="200"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
    <Label Content="Label 2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="200"/>
</StackPanel>

有没有办法通过使用 StackPanels 来获得我想要的东西？如果不是，我可以使用哪些其他控件或方法来满足我的要求？

【问题讨论】：

@Jonesy 设置 HorizontalAlignment 在水平方向的 StackPanel 中是无用的。 @musefan 你可能正在寻找Grid。

标签： c# wpf layout

【解决方案1】：

如果您希望所有控件的列大小相同，只需使用Grid。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="23"/>
        <RowDefinition Height="23"/>
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Grid.Column="0" Content="Longer Label 1"/>
    <TextBox Grid.Row="0" Grid.Column="1" TextWrapping="Wrap"/>
    <Label Grid.Row="1" Grid.Column="0" Content="Label 2" />
    <TextBox Grid.Row="1" Grid.Column="1" TextWrapping="Wrap"/>    
</Grid>

使用此设置，第一列的大小将适合最宽的标签，第二列将占据其余部分。

【讨论】：

【解决方案2】：

只需使用Grid：

<Grid Grid.Row="2" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        ...
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" Grid.Column="0" Text="Name" Style="{StaticResource 
    LabelStyle}" />
    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Name, 
    UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource TextBoxStyle}" />
    <TextBox Grid.Row="1" Grid.Column="0" Text="Age" Style="{StaticResource 
    LabelStyle}" />
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Age, 
    UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource TextBoxStyle}" />
    ...
</Grid>

【讨论】：

SharedSizeGroup 属性将为每行中的列保持相同的宽度。
Grid 中的列在所有行中的大小始终相同，这就是网格的全部点。
您可以使用SharedSizeGroup 让多列具有相同的宽度，或者让列的宽度与另一个网格中的列的宽度匹配。
啊，感谢您指出...这就是复制和粘贴的问题。我从我的一个观点中复制了它。我将编辑我的答案。