How to expand and collapse ListView in Xamarin formats

Question

I am new to Xamarin Forms and I understand that there are many useful controls. I am looking for a control that can expand to display data in a grid, as in the example below.

Update

Model:

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<Contact> contacts { get; set; }
}

XAML:

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Margin="10" Text="Display Json Data" FontSize="25" />
        <ListView x:Name="listviewConacts" Grid.Row="1" HorizontalOptions="FillAndExpand" HasUnevenRows="True" ItemSelected="listviewContacts_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid HorizontalOptions="FillAndExpand" Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Label Text="{Binding name}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Blue"  FontAttributes="Bold"/>
                            <Label Text="{Binding email}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                            <Label Text="{Binding phone.mobile}" HorizontalOptions="StartAndExpand" Grid.Row="2" TextColor="Gray"  FontAttributes="Bold"/>
                            <BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
    <ActivityIndicator x:Name="ProgressLoader" IsRunning="True"/>
</Grid>

Based on the model and XAML above, how can I get extensible and compressible ListView, like the one pictured above?

Answer 1

ListView GridLayout ViewCell. auto GridLayout. show header button , , . isvisible.

, isvisible , 2 , isvisible - false, .

<ListView.ItemTemplate>
  <DataTemplate>
            <ViewCell>
      <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />           
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="40"/>
        </Grid.ColumnDefinitions>
                <Label Text="{Binding HeaderText}" Grid.Row="0" 
                       Grid.Column="0" />
                <Button Text="Show"  Grid.Row="0" Grid.Column="1" 
                        Clicked="LableVisibleButton"/>
                <Label
                   Grid.Row="1" Grid.Grid.ColumnSpan="2"
                   FormattedText="{Binding FormattedText}" IsVisible="
                   {Binding LabelVisible}"/>
            </ViewCell>

Answer 2

, . , xaml. . , , , , .

ViewModel:

namespace XamlSamples.Models
{
    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 bool IsCollapsed { get; private set; }
        public ICommand ToggleCollapseCommand { get; }

        public Contact() => ToggleCollapseCommand = new Command(_ => IsCollapsed = !IsCollapsed);
    }

    public class ContactList
    {
        public List<Contact> contacts { get; set; }
    }

    public class InvertBoolConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => !(bool)value;

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => !(bool)value;
    }
}

:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:models="clr-namespace:XamlSamples.Models;assembly=XamlSamples"
         x:Class="XamlSamples.CollapsableListView">
<ContentPage.Resources>
    <ResourceDictionary>
        <models:InvertBoolConverter x:Key="invertBoolConverter" />
    </ResourceDictionary>
</ContentPage.Resources>
<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Margin="10" Text="Display Json Data" FontSize="25" />
        <ListView x:Name="listviewConacts" Grid.Row="1" HorizontalOptions="FillAndExpand" HasUnevenRows="True" ItemSelected="listviewContacts_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical">
                            <Button Text="Tap to Uncollapse" Command="{Binding ToggleCollapseCommand}" IsVisible="{Binding IsCollapsed}"/>
                            <Button Text="Tap to Collapse" Command="{Binding ToggleCollapseCommand}" IsVisible="{Binding IsCollapsed, Converter={StaticResource invertBoolConverter}}"/>
                            <Grid HorizontalOptions="FillAndExpand" Padding="10" IsVisible="{Binding IsCollapsed, Converter={StaticResource invertBoolConverter}}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Label Text="{Binding name}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Blue"  FontAttributes="Bold"/>
                                <Label Text="{Binding email}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                <Label Text="{Binding phone.mobile}" HorizontalOptions="StartAndExpand" Grid.Row="2" TextColor="Gray"  FontAttributes="Bold"/>
                                <BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" />
                            </Grid>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
    <ActivityIndicator x:Name="ProgressLoader" IsRunning="True"/>
</Grid>