How to create ScrollView in my layout

Question

I want my ScrollView to join my StackLayout and my list so I can scroll it down, an example I saw that worked out was the one below but I was not able to implement it at my command

The way it is now it's from a scrowview in the List

This example worked out

 <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         NavigationPage.TitleIcon="logoD">
<ScrollView>
    <StackLayout x:Name="topo">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Image Grid.RowSpan="2" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250">
                <Image.Source>
                    <UriImageSource Uri="{Binding img}" CacheValidity="5" CachingEnabled="True"/>
                </Image.Source>
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OnTapped" />
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </StackLayout>

    <ListView x:Name="list" ItemsSource="{Binding list}">
             <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell >
                    <Grid Padding="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition Width="5"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <StackLayout Grid.Column="2" Spacing="4"  VerticalOptions="Center">
                            <Label Text="{Binding Categoria}" TextColor="#38B6AB"  FontSize="Small" LineBreakMode="NoWrap"/>
                            <Label Text="{Binding Data}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
                            <Label Text="{Binding hora}" TextColor="#474747" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollView>

You can't have an ListView inside a ScrollView, the scroll event handled in one of they hides the another handler as you can see here: https://stackoverflow.com/questions/6210895/listview-inside-scrollview-is-not-scrolling-on-android/6211286#6211286 — Diego Rafael Souza, Aug 21 '17 at 16:19
Possible duplicate of [ListView inside ScrollView is not scrolling on Android](https://stackoverflow.com/questions/6210895/listview-inside-scrollview-is-not-scrolling-on-android) — Diego Rafael Souza, Aug 21 '17 at 16:41

Timo Salomäki · Accepted Answer · 2017-08-21T14:00:31.480

You shouldn't put a ListView inside a ScrollView as they both implement scrolling. What you should do is use the Header template of the ListView to put your Grid there. That way it will scroll with the ListView.

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    NavigationPage.TitleIcon="logoD">
    <ListView x:Name="list" ItemsSource="{Binding list}">
      <ListView.HeaderTemplate>
        <DataTemplate>
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image Grid.RowSpan="2" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250">
              <Image.Source>
                <UriImageSource Uri="{Binding img}" CacheValidity="5" CachingEnabled="True"/>
              </Image.Source>
              <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnTapped" />
              </Image.GestureRecognizers>
            </Image>
          </Grid>
        </DataTemplate
      </ListView.HeaderTemplate>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <Grid Padding="5">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                  <ColumnDefinition Width="5"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
              <StackLayout Grid.Column="2" Spacing="4"  VerticalOptions="Center">
                <Label Text="{Binding Categoria}" TextColor="#38B6AB"  FontSize="Small" LineBreakMode="NoWrap"/>
                <Label Text="{Binding Data}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
                <Label Text="{Binding hora}" TextColor="#474747" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
              </StackLayout>
            </Grid>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </ContentPage>

So the listview overlays the stacklayout, page is only with the listview — José, Aug 21 '17 at 13:58
@José The StackLayout you had there was irrelevant and I removed it. Try again with the current code. — Timo Salomäki, Aug 21 '17 at 14:00

score 0 · Answer 2 · answered Aug 21 '17 at 14:25

I was able to implement with this same example command

<ContentPage.Content>
  <ListView ItemsSource="{Binding MonkeysGrouped}"
            ItemTapped="Handle_ItemTapped"
            ItemSelected="Handle_ItemSelected"
            HasUnevenRows="true"
            GroupShortNameBinding = "{Binding Key}"
            IsGroupingEnabled = "true"
            GroupDisplayBinding = "{Binding Key}">
     <ListView.Header>
      <cv:CarouselView x:Name="CarouselZoos" ItemsSource="{Binding Path=BindingContext.Zoos, Source={x:Reference MonkeysPage}}" HeightRequest="200">
        <cv:CarouselView.ItemTemplate>
          <DataTemplate>
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
              </Grid.RowDefinitions>
              <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
              <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
                  <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
              </StackLayout>
            </Grid>
          </DataTemplate>
        </cv:CarouselView.ItemTemplate>
      </cv:CarouselView>
    </ListView.Header>
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <controls:CircleImage
                   BorderColor="Aqua"
                   BorderThickness="3"
                   HeightRequest="66"
                   HorizontalOptions="CenterAndExpand"
                   VerticalOptions="CenterAndExpand"
                   Aspect="AspectFill"
                   WidthRequest="66"
                   Grid.RowSpan="2"
                   Source="{Binding Image}"/>
            <Label Grid.Column="1"
                   Text="{Binding Name}"
                   VerticalOptions="End"/>
            <Label Grid.Column="1"
                   Grid.Row="1"
                   VerticalOptions="Start"
                   Text="{Binding Location}"/>
          </Grid>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

How to create ScrollView in my layout

2 Answers2