UWP XAML resizing issue with TextBox in StackPanel in ScrollViewer with horizontal scroll

Question

I'm running into some strange resizing behavior when putting a TextBox in a StackPanel inside of a ScrollViewer with horizontal scroll.

The items in the StackPanel are supposed to stretch to the full width of the grid column. The grid column should take up half of the window.

All of the siblings that come after the TextBox don't resize correctly when changing the window size.

Here is a simplified version of my code that reproduces the issue:

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid>
        <StackPanel Background="Gray" Grid.Column="0">
            <Border Background="Blue" Height="40"/>
            <TextBox/>
            <Border Background="RoyalBlue" Height="40"/>
            <Border Background="Red" Height="40"/>
        </StackPanel>

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

This is what the xaml properly renders in Windows 10:

If I resize the window, the elements that come after TextBox don't properly resize. If you keep trying a few times they fix themselves.

If I remove the TextBox control and leave the Border elements, they all resize properly. The TextBox control is somehow breaking the Borders that come after it. I'm also able to reproduce with a Number control.

If I remove HorizontalScrollBarVisibility="Auto" from ScrollViewer, it fixes the problem. I need this view to be able to auto scroll horizontally so that won't work for me. If I remove the ScrollViewer it also fixes it.

Answer 1

Try to use Grid and rows instead of StackPanel because Grid takes up as much space as it is available, but StackPanel - as much space as he needs

Answer 2

If set text into, it will work properly. Xaml specific issue of TextBox.

You can replace TextBox with RichEditBox as possible workaround. It will work with current page layout. Or you can think how reorganize page layout, so TextBox will out of ScrollViewer.