The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

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

  • Question

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

    <ScrollViewer x:Name="mainScrollViewer" Height="Auto">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
    
                    <ListView x:Name="lstOne" Margin="10,10,10,0" Background="White" Grid.Row="0" MinHeight="120" BorderBrush="Gray" BorderThickness="1" Header="Breakfast" Visibility="Visible">
                        <ListView.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Background="AliceBlue">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text=" List 1" FontSize="25"/>
                                    </StackPanel>
                                    <Border BorderBrush="Gray" BorderThickness=".5"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.HeaderTemplate>
                    </ListView>
    
                    <ListView x:Name="lstTwo" Margin="10,10,10,0" Grid.Row="1" MinHeight="120" BorderBrush="Gray" Background="White" BorderThickness="1" VariableSizedWrapGrid.ColumnSpan="3" Visibility="Visible">
                        <ListView.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Background="AliceBlue">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text=" List 2" FontSize="25"/>
                                    </StackPanel>
                                    <Border BorderBrush="Gray" BorderThickness=".5"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.HeaderTemplate>
                    </ListView>
    
                    <ListView x:Name="lstThree" Grid.Row="2" Margin="10,15,10,0" MinHeight="120" BorderBrush="Gray" Background="White" BorderThickness="1">
                        <ListView.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Background="AliceBlue">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text=" List 3" FontSize="25"/>
                                    </StackPanel>
                                    <Border BorderBrush="Gray" BorderThickness=".5"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.HeaderTemplate>
                    </ListView>
    
                    <ListView x:Name="lstFour" Grid.Row="3" Margin="10,15,10,0" BorderBrush="Gray" MinHeight="120" Background="White" BorderThickness="1">
                        <ListView.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Background="AliceBlue">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text=" List 4" FontSize="25"/>
                                    </StackPanel>
                                    <Border BorderBrush="Gray" BorderThickness=".5"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.HeaderTemplate>
                    </ListView>
                </Grid>
            </ScrollViewer>

    Wednesday, November 27, 2019 1:30 AM

All replies

  • Hi,

    This is the internal design of ScrollViewer, ScrollViewer is "insensitive" to size changes.

    Usually, the view size of the ScrollViewer is not affected by the size of the ScrollViewer's view port. When the view port size is smaller than the content size, ScollViewer will show a scroll bar.

    This is not a recommended practice if you use an adaptive ListView group inside the ScrollViewer. If you need adaptive ListView group, please use Grid instead of ScrollViewer.

    If you must use ScrollViewer, you can explain why, maybe we can discuss a better solution.

    By the way, We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!

    Best regards.


    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Wednesday, November 27, 2019 7:48 AM
  • Thank you for your response.  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.

    How do you recommend I should go about this? I don't see a solution without using a ScrollViewer, but it seems like that doesn't work well with adaptive ListView groups.

    Wednesday, November 27, 2019 7:53 PM
  • Hi,

    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

    <ScrollViewer x:Name="mainScrollViewer" SizeChanged="mainScrollViewer_SizeChanged">
        <Grid x:Name="mainGrid">
            ...
        </Grid>
    </ScrollViewer>
    
    

    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.

    Best regards.


    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Thursday, November 28, 2019 7:41 AM
  • I'm using a grid because it allows for the ListView's width and height to expand dynamically.  Is there a way for me to change the width and height of a UI element dynamically with a StackPanel?

    Thanks

    Saturday, November 30, 2019 1:49 AM
  • Hi,

    StackPanel and Grid calculate the content height differently.

    When the height changes, the Grid can adaptively change based on the height change, but the StackPanel does not.

    I mean, even if the height of the StackPanel changes, it will not affect the actual height of the internal elements. If you really need adaptive height, use Grid. If you just want to scroll the window, select ScrollViewer + StackPanel.

    Best regards.


    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Monday, December 2, 2019 1:18 AM
  • Hi,

    Does my reply solve your problem? Do you have any other questions you want to clarify?

    The UWP section of MSDN is about to be locked down. If you have other questions, please come to Microsoft Q&A to ask questions, and we will continue to answer your questions there.

    Best regards.


    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Tuesday, December 3, 2019 8:10 AM
  • Hi,

    Sorry to disturb you again, we are confirming the status of the question. Did my response resolve your issue?

    Since the UWP section of the MSDN Forum will be locked down in the near future, after that, if you have new questions, welcome to our new community: Microsoft Q&A, where we will continue to answer your questions.

    Best regards.


    "Developing Universal Windows apps" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Friday, December 6, 2019 6:24 AM