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

5
votes

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:

Example 1

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.

Example 2

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.

2
xamluwpwin-universal-appuwp-xaml
use ScrollViewer.CanContentScroll="true" in your grid - Ali Yousefi
That property doesn't exist in UWP. I think it's only for WPF - Andrew Stevens
stackoverflow.com/questions/30982576/… - Ali Yousefi
ScrollViewer.VerticalSnapPointsType isn't available as a property the grid. I tried both VerticalSnapPointsType and HorizontalSnapPointsType on the parent ScrollViewer with both Mandatory and Optional and it didn't affect it. - Andrew Stevens
Try removing HorizontalScrollBarVisibility="Auto" and the issue should go away. But I don't understand your layout setup though, why do you need a ScrollViewer with inner Grid setting "*" as column width? - Justin XL

2 Answers

2
votes

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

1
votes

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.