Scrollviewer not working on grid

Question

Hi, I am learning UWP on Windows 10, I need to scroll the grid. The two parts of the code are very similar in them, I intend to scroll in grid2, the first part of the 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 code snippet:

  <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 part of the code does not work, the second works. I can’t understand what’s wrong, I don’t understand why it doesn’t work in the first. thanks

Answer 1

This is a common mistake for beginners, and you should not feel bad. The thing to keep in mind about the scroll viewer is that it SHOULD have height and width. Sometimes you set the height and width. Sometimes you allow you to set the height and width to fit the container. Correctly?

Look at this:

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

In this example, the scroll viewer will act as if it does not even exist. What for? Because it has no height and width. In this case, it will be the same size as its contents. This is basically what you see.

Look at this:

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

It will scroll only vertically, but will never scroll horizontally. Can you understand why? This is because there is no width. This is sometimes the perfect scenario. But this is another thing that can distract the developer from fear.

Look at this:

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

This is another scenario that catches a lot of developers. What for? Since the height of the stack panel is infinite. Since the height and width are mainly inherited by the container, the scroll viewer never has a reason to scroll, since it already allows you to zoom to infinite size.

Look at this:

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

Perfect. Now the scroll viewer will scroll the way you want, because the height and width of the scroll viewer are inherited by the height and width of its container, the grid. And since the grid limits the size of the window, you are in great shape.

You can ruin the behavior of the grid, of course, by putting it on the stack panel! Do not do this if you do not know what you are doing and calling. If you are new to XAML, you can enjoy this free course at Microsoft Virtual Academy.

Hope this helps.

Good luck