Creating scrollable layouts

One of the obvious techniques to add more elements to a screen such that they fit within it is to create a scrollable layout, using the ScrollView element. As always, even basic elements can cause issues when misused. To help you avoid pitfalls, we will create vertical and horizontal scrollable layouts and discuss their specifics in the How it works… and There’s more… sections.

Getting ready

To follow the steps described in this recipe, we just need to create a blank .NET MAUI application. The default template includes sample code in the MainPage.xaml and MainPage.xaml.cs files, but you can remove it and leave only a blank ContentPage in XAML and a constructor with the InitializeComponent method in CS.

The code for this recipe is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter01/c1-ScrollableLayout.

How to do it…

To learn how to use scrollable layouts most efficiently and avoid issues, let’s create simple vertical and horizontal layouts and discuss them in further sections:

1. To create a vertical scrollable layout, it’s sufficient to wrap the part you would like to scroll in the ScrollView element:

   MainPage.xaml

   <ScrollView>
       <VerticalStackLayout>
           <Button Text="Tall Button 1"
               HeightRequest="500"/>
           <Button Text="Tall Button 2"
               HeightRequest="500"/>
       </VerticalStackLayout>
   </ScrollView>

   Run the project to see the result.

2. To enable horizontal scrolling, set ScrollView.Orientation to "Horizontal". Replace VerticalStackLayout with HorizontalStackLayout to arrange elements horizontally:

   <ScrollView Orientation="Horizontal">
       <HorizontalStackLayout>
           <Button Text="Tall Button 1"
               WidthRequest="500"/>
           <Button Text="Tall Button 2"
           WidthRequest="500"/>
       </HorizontalStackLayout>
   </ScrollView>

   Run the project to see the result.

How it works…

Similar to VerticalStackLayout and HorizontalStackLayout, the ScrollView element lets its child element occupy as much space as it requests. As such, it measures it by infinite height or width (depending on the orientation). When the desired size of a child element is greater than the space available in ScrollView, scrolling functionality is activated.

Setting ScrollView.Orientation to Horizontal or Vertical determines the direction of scrolling. You can also set Orientation to Both, to scroll in both directions.

There’s more…

This is probably the most useful section in this recipe, since adding scrolling is straightforward, but ScrollView has its specifics, which should be taken into account to avoid issues. Let’s take a look at a few patterns that you should avoid when working with ScrollView:

• Adding ScrollView with an undefined height to VerticalStackLayout:

  <VerticalStackLayout>
      <ScrollView>
          <VerticalStackLayout>
             <Button Text="Tall Button 1"
                     HeightRequest="500"/>
             <Button Text="Tall Button 2"
                     HeightRequest="500"/>
             <Button Text="Tall Button 3"
                     HeightRequest="500"/>
             <Button Text="Tall Button 4"
                     HeightRequest="500"/>
          </VerticalStackLayout>
      </ScrollView>
  </VerticalStackLayout>

  You won’t be able to scroll your view with this layout because, as we know from the Creating horizontal/vertical layouts recipe, VerticalStackLayout provides its children with infinite height. As a result, ScrollView thinks that it has infinite height, and ScrollView doesn’t need to activate scrolling because its children can fit the parent panel.

• Adding CollectionView with an undefined height to ScrollView:

  <ScrollView>
      <CollectionView>
          <!--...-->
      </CollectionView>
  </ScrollView>

  Here, you will encounter the same infinite height issue as with CollectionView in VerticalStackLayout or Grid, whose row is set to Auto. In all these scenarios, parent containers measure CollectionView by an infinite height. As a result, CollectionView is virtually increased to fit all its items.