title: How to expand and Collapse ListView in Xamarin Forms
body: <p>I'm new to Xamarin Forms and I understand that there are many useful controls. I'm looking for a control that can expand to show data in a grid like in the example below.</p>
  
  <p><a href="https://i.stack.imgur.com/vdsES.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vdsES.png" alt="expand and collapse example"></a></p>
  
  <p><strong>Update</strong></p>
  
  <p>Model: </p>
  
  <pre><code>public class Phone
  {
      public string mobile { get; set; }
      public string home { get; set; }
      public string office { get; set; }
  }
  
  public class Contact
  {
      public string id { get; set; }
      public string name { get; set; }
      public string email { get; set; }
      public string address { get; set; }
      public string gender { get; set; }
      public Phone phone { get; set; }
  }
  
  public class ContactList
  {
      public List&lt;Contact&gt; contacts { get; set; }
  }
  </code></pre>
  
  <p>XAML: </p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Label Grid.Row="0" Margin="10" Text="Display Json Data" FontSize="25" /&gt;
          &lt;ListView x:Name="listviewConacts" Grid.Row="1" HorizontalOptions="FillAndExpand" HasUnevenRows="True" ItemSelected="listviewContacts_ItemSelected"&gt;
              &lt;ListView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;ViewCell&gt;
                          &lt;Grid HorizontalOptions="FillAndExpand" Padding="10"&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                              &lt;/Grid.RowDefinitions&gt;
                              &lt;Label Text="{Binding name}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Blue"  FontAttributes="Bold"/&gt;
                              &lt;Label Text="{Binding email}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/&gt;
                              &lt;Label Text="{Binding phone.mobile}" HorizontalOptions="StartAndExpand" Grid.Row="2" TextColor="Gray"  FontAttributes="Bold"/&gt;
                              &lt;BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" /&gt;
                          &lt;/Grid&gt;
                      &lt;/ViewCell&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListView.ItemTemplate&gt;
          &lt;/ListView&gt;
      &lt;/Grid&gt;
      &lt;ActivityIndicator x:Name="ProgressLoader" IsRunning="True"/&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Based on the model and XAML above, how can I achieve an expandable and collapsible <code>ListView</code> such as the one in image above?</p>