Scrollviewer not working on a grid

Question

Hi I am learning UWP in windows 10, I need to scroll through a grid. They have two pieces of code are very similar, my intent is to scroll in grid2, the first piece of code:

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <CommandBar VerticalAlignment="Top" Grid.Row="0">
            <CommandBar.Content>
                <TextBlock Name="CurrentDateText" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="22" FontStretch="ExtraExpanded"/>
            </CommandBar.Content>
            <CommandBar.PrimaryCommands>
                <AppBarButton Name="button1" Icon="Forward" Label="button" Click="NextButton_Click_1"/>
            </CommandBar.PrimaryCommands>
        </CommandBar>

           <Grid Grid.Row="1" Grid.ColumnSpan="3"  Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
        </Grid>

                <ScrollViewer x:Name="Scroll" Grid.Row="2" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Enabled">
            <Grid Grid.ColumnSpan="3" Name="Grid2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
        </Grid>
        </ScrollViewer>
    </Grid>

in the second piece of code:

 <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Header -->
        <Rectangle Grid.Row="0" Grid.ColumnSpan="3"/>
        <TextBlock Grid.Column="1" Name="CurrentDateText"  />


            <Button Name="NextButton" Grid.Column="2" Content="&gt;" 
                    HorizontalAlignment="Right" Margin="20" 
                    Click="NextButton_Click_1"/>

                           <ScrollViewer x:Name="Scroll" VerticalAlignment="Top" Grid.Row="1" VerticalScrollBarVisibility="Hidden">
                <Grid Grid.ColumnSpan="3" Name="Grid2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ScrollViewer>

        </Grid>

the first piece of code does not work, the second works. I can not understand what is wrong, I do not understand why it does not work in the first. thank you

Answer 1

This is a common mistake for beginners and you should not feel bad about it. The thing to remember about the scroll viewer is that it MUST have a height and width. Sometimes you set the height and width. Sometimes you let the height and width be set by the size of the container. Right?

Look at this:

<ScrollViewer>
    <Grid Height="1000" />
</ScrollViewer>

In that sample, the scroll viewer would act like it is not even there. Why? Because it does not have a height and width. It would just be the same size as its content in that case. That's basically what you are seeing.

Look at this:

<ScrollViewer Height="100">
    <Grid Height="1000" />
</ScrollViewer>

This would scroll just fine vertically but it would never scroll horizontally. Can you see why? It's because there is not width. Sometimes this is the perfect scenario. But it's another thing that can catch a developer off guard.

Look at this:

<StackPanel>
    <ScrollViewer>
        <Grid Height="1000" />
    </ScrollViewer>
<StackPanel>

This is another scenario that catches a lot of developers. Why? Because the height of a stack panel is infinite. Since the height and the width are basically inherited by the container, the scroll viewer never has a reason to scroll as it is already allows to grow to infinite size.

Look at this:

<Grid>
    <ScrollViewer>
        <Grid Height="1000" />
    </ScrollViewer>
<Grid>

Perfect. Now the scroll viewer will scroll just like you want it to because the height and the width of the scroll viewer are inherited by the height and the width of its container, the grid. And because a grid constraints itself to the size of the window, you are in great shape.

You can spoil the behavior of the grid, of course, by putting it in a stack panel! Don't do that unless you know what you are doing and causing. If you are new to XAML you might enjoy this free course on Microsoft Virtual Academy.

I hope this helps.

Best of luck!