Grid.Row inside of a ScrollViewer isn't Resizing Properly

Question

question

RichardZhang-MSFT asked · Dec 12, 2019 at 09:05 AM

Grid.Row inside of a ScrollViewer isn't Resizing Properly

Source Link: MSDN

I have a grid inside of a scrollviewer with 4 rows. Each row has a height of * (1/4 of the scrollviewer's height) and contains a listview that is supposed to automatically resize with the row. When I increase the height of the screen by pulling down on the window, the height of the grid (and the content inside it) increases as expected. When I increase OR decrease the height of the screen by pulling on the corner of the window, the height of the grid's rows and the content also resizes as expected.

However, if I only decrease the size of the grid by pulling up on the bottom part of the window, the bottom 3 grids do not resize as they are supposed to, and instead look jagged.

How it's supposed to look:

How it looks when I increase height (expected behavior)

How it looks when I decrease only the height (unexpected behavior):

Here is my xaml code:

Imgur

The reason I want to use a ScrollViewer is because I have content that is supposed to appear at the bottom of the ListView group. While I could do away with the ScrollViewer and just use the ones built into each ListView, the content that I want to put at the bottom of the ListView group won't fit if the device is too small (like a phone) without making the minimum height of each ListView far too small.

xaml code

windows-uwp windows-uwp-xaml

xaml-code.txt (3.4 KiB)

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2019-12-12T09:09:47.137Z

RichardZhang-MSFT answered · Dec 12, 2019 at 09:09 AM

Hello,

Welcome to our Microsoft Q&A platform!

There is a way to solve the problem of the height refresh of the Grid in the ScrollViewer.

Listen to the SizeChanged event of the ScrollViewer and assign the height to the Grid:

xaml

Imgur

xaml.cs

 private void mainScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
 {
     mainGrid.Height = e.NewSize.Height;
 }

From your description, you seem to want to put the content on the last row, but this is contradictory to ScrollViewer itself.
That is, the total height of the current Grid will never be higher than the ScrollViewer, so the ScrollViewer will never scroll.

Even if the content of the Grid exceeds the height of the Grid itself, due to the characteristics of the Grid control (full of containers, but not exceeding, unless the Height property is explicitly declared), the content will be truncated.

So I suggest that you do not use adaptive design in the ScrollViewer, but use StackPanel as a container for internal elements.

The height of the StackPanel is determined by the content. Once the content is too high, the ScrollViewer will turn on scrolling, allowing users to scroll to view the content.

Regarding the inability to insert XML Code, check out this linked solution

Thanks

· Share

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question