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

0
votes

I need to stretch second element on the entire width horizontal-oriented stackpanel (textblock must be on the left, textBox should get all remaining space). I read a lot about this topic but still can not find an answer. Properties HorizontalAlignment HorizontalContentAlignment unsuitable of course. As I understand I must use something another than StackPanel cause it depend on content size. I tried to use Grid Row-Columns and other variants but still can't get what I need. Help me please :) samples of code and screenshot

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

enter image description here

1
c#controlswin-universal-appstretch

1 Answers

2
votes

Use grid columns definition seems the easiest way for me. This example code should help:

<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>

It will display a textblock to the left with a red background (using 20% of the available space), and a textbox to the right with a blue background (stretching on the remaining space).

You can adjust the width of your textblock by changing the width of the first column definition.

Hope it helps.