title: Xamarin.Forms - ListView change height at runtime
body: <p>I'm developing a cross-platform app using Xamarin.Forms. In one of the pages I've an avatar image, some info, and then a <code>ListView</code>. The thing is that I've all this wrapped in a <code>ScrollView</code>, so I'm able to scroll all over the content. The issue with this is that I'm losing the <code>ListView</code> scroll behaviour. This're some screenshots:</p>
  
  <p><a href="https://i.stack.imgur.com/2Tigb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Tigb.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/2RMDg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2RMDg.png" alt="enter image description here"></a></p>
  
  <p>As you can see the XAML view is basically, the avatar <code>Image</code> (the firetruck image), then the "Last check step" info, and then we've the <code>ListView</code>. I hardcoded a <code>HeightRequest</code> in the <code>ListView</code> so It has a bigger height. But the thing is that when I scroll to the bottom of the page I can't keep scrolling through the <code>ListView</code> because the <code>ScrollView</code> messes with that behaviour. I <strong>need</strong> to use a <code>ListView</code> because the list of check reports that I'm showing there is populated from a webservice, and I update that list when I enter and exit the page. This is the XAML code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:checkReport="clr-namespace:HalliganTL.View;assembly=HalliganTL"
                xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
               x:Class="HalliganTL.View.ApparatusDetailPage" BackgroundColor="#FFFFFFFF"&gt;
    &lt;StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
      &lt;ScrollView x:Name="GeneralScrollView"  
                  Orientation="Vertical" VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand"&gt;
        &lt;Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
          &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height="180"&gt;&lt;/RowDefinition&gt;
            &lt;RowDefinition Height="40"&gt;&lt;/RowDefinition&gt;
            &lt;RowDefinition Height="80"&gt;&lt;/RowDefinition&gt;
            &lt;RowDefinition Height="40"&gt;&lt;/RowDefinition&gt;
            &lt;RowDefinition Height="360"&gt;&lt;/RowDefinition&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
            &lt;ColumnDefinition Width="*"&gt;&lt;/ColumnDefinition&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;!-- Top Image --&gt;
          &lt;ContentView Grid.Column="0" Grid.Row="0" Padding="15"&gt;
            &lt;controls:CircleImage x:Name="ApparatusImage"
              HeightRequest="150" WidthRequest="150"
              VerticalOptions="Center"
              BorderColor="#3B5685"
              BorderThickness="2"
              HorizontalOptions="Center"
              Aspect="AspectFill"&gt;
            &lt;/controls:CircleImage&gt;
          &lt;/ContentView&gt;
  
          &lt;!-- Last Check Separator --&gt;
          &lt;AbsoluteLayout Grid.Column="0" Grid.Row="1" x:Name="LastCheckContainerTitle" BackgroundColor="#FFE4E4E9" Padding="5,15,15,5" VerticalOptions="End" &gt;
            &lt;Label Text="LAST CHECK" Style="{StaticResource separatorLabel}" /&gt;
          &lt;/AbsoluteLayout&gt;
          &lt;!-- Last Check Detail --&gt;
          &lt;checkReport:CheckReportViewPage Grid.Column="0" Grid.Row="2" x:Name="LastCheckReportView"&gt;
            &lt;checkReport:CheckReportViewPage.GestureRecognizers&gt;
              &lt;TapGestureRecognizer Tapped="OnLastCheckReportClicked" NumberOfTapsRequired="1" /&gt;
            &lt;/checkReport:CheckReportViewPage.GestureRecognizers&gt;
          &lt;/checkReport:CheckReportViewPage&gt;
  
          &lt;AbsoluteLayout  Grid.Column="0" Grid.Row="3"  x:Name="CheckHistoryTitle" BackgroundColor="#FFE4E4E9" Padding="5,15,15,5" &gt;
            &lt;Label Text="CHECK HISTORY" Style="{StaticResource separatorLabel}" FontAttributes="None" VerticalOptions="End" /&gt;
          &lt;/AbsoluteLayout&gt;
  
          &lt;!-- Apparatus check history --&gt;
          &lt;ListView x:Name="CheckHistoryListView"
                    HeightRequest="380"
                     Grid.Column="0" Grid.Row="4"
                    HorizontalOptions="FillAndExpand"
                    HasUnevenRows="True"
                    IsPullToRefreshEnabled="False"
                    VerticalOptions="FillAndExpand" ItemTapped="OnItemTapped"&gt;
            &lt;ListView.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                &lt;ViewCell&gt;
                  &lt;checkReport:CheckReportViewPage/&gt;
                &lt;/ViewCell&gt;
              &lt;/DataTemplate&gt;
            &lt;/ListView.ItemTemplate&gt;
          &lt;/ListView&gt;
        &lt;/Grid&gt;
      &lt;/ScrollView&gt;
  
      &lt;Label Text="Start Check" HeightRequest="60"  VerticalOptions="End" BackgroundColor="#3B5685" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontSize="18" TextColor="White"&gt;
        &lt;Label.GestureRecognizers&gt;
          &lt;TapGestureRecognizer
                  Tapped="OnStartCheckClicked"
                  NumberOfTapsRequired="1" /&gt;
        &lt;/Label.GestureRecognizers&gt;
      &lt;/Label&gt;
  
    &lt;/StackLayout&gt;
  
  
  
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>So basically what I'm asking is how can achieve something like a parallax effect, scrolling down and then delegate the scroll behaviour to the <code>ListView</code> that way I can scroll through every item in the <code>ListView</code>. Currently I'm just able to see the items that fit in the <code>ListView</code> HeightRequest dimension. In the example screenshot that I'm shoing for example, there are several other items in that <code>ListView</code> but I can't scroll through them because the <code>ScrollView</code> is messing with the <code>ListView</code> scroll behaviour.</p>