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.

That property doesn't exist in UWP. I think it's only for WPF — Andrew Stevens, May 20 '17 at 18:01
http://stackoverflow.com/questions/30982576/scrollviewer-cancontentscroll-property-not-found-windows-8-1-universal-app — Ali Yousefi, May 20 '17 at 18:35
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, May 20 '17 at 20:28
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, May 20 '17 at 21:53
I mentioned in my question that removing `HorizontalScrollBarVisibility` would fix the issue, but I can't do that for my use case. Essentially I need two even columns that stretch with the window until a minimum grid size is met, and then scrollbars show if the window is smaller than that. My layout works fine unless one of the grid columns contains a TextBox. — Andrew Stevens, May 21 '17 at 02:46
When scrollbar shows, the `*` layout of your columns basically breaks thus you will have unexpected behaviors. You should be able to work the math out and manually update the column width to `Auto` in this case. — Justin XL, May 21 '17 at 22:35

score 2 · Answer 1 · answered Sep 26 '17 at 13:31

2

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

answered Sep 26 '17 at 13:31

Mykyta Bondarenko

552
2
16

score 1 · Answer 2 · answered Sep 22 '17 at 11:16

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.

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

2 Answers2