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

Question

我需要在整个宽度水平方向的堆栈面板上拉伸第二个元素（文本块必须在左侧，文本框应该获得所有剩余空间）。我读了很多关于这个话题的文章，但仍然找不到答案。属性 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% 的可用空间），在右侧显示一个带有蓝色背景的文本框（在剩余空间上拉伸）。

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

希望对你有帮助。