如何在水平方向的堆叠面板中拉伸第二个元素？

Question

我需要在整个宽度水平方向的stackpanel上拉伸第二个元素（textblock必须在左边，textBox应该获得所有剩余的空间）。我读了很多关于这个主题的内容，但仍然无法找到答案。属性Horizo​​ntalAlignment Horizo​​ntalContentAlignment当然不合适。据我所知，我必须使用除StackPanel之外的其他东西，因为它取决于内容大小。我尝试使用Grid Row-Columns和其他变体，但仍然无法获得我需要的东西。请帮帮我:)代码示例和截图

    <Grid>
        <StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                <TextBlock Text="Login"></TextBlock>
                <TextBox PlaceholderText="login" HorizontalAlignment="Stretch"/>
            </StackPanel>
            ...
            more StackPanels
            ...
        </StackPanel>
    </Grid>

Answer 1

使用网格列定义对我来说似乎是最简单的方法。 这个示例代码应该有所帮助：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.2*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" Text="Login" Background="Red" />
    <TextBox Grid.Column="1" Background="Blue"/>
</Grid>

它将在左侧显示一个带有红色背景的文本块（使用20％的可用空间），在右侧显示一个带有蓝色背景的文本框（在剩余空间上拉伸）。

您可以通过更改第一列定义的宽度来调整文本块的宽度。

希望它有所帮助。