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

Question

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

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

希望对您有所帮助。

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

How to stretch second element in horizontal-oriented stack panel?

c#

controls

stretch

win-universal-app