Xamarin.Forms - Expandable ListView App

Introduction

This article demonstrates how to create an Expandable ListView of items in Xamarin.Forms application. If the user clicks on a product, that product expands and shows items. Then, the user clicks on the same product twice and it will be hidden.
 
 
 
Let's start.
 
Step 1

Create a new Xamarin.Forms app by going to File >> New -->> Visual C# >> Cross Platform >> Cross Platform App (Xamarin.Native or Xamarin.Forms), give the application name, and press OK.
 
(Project Name: ExpendableListView)
 
 
 
Step 2

Open Solution Explorer >> ExpendableLIstView (PCL) >> right click and select "New Item".In the popup window, select Cross Platform >>Class.
 
This way, you can add a new class. Create a new Class named MainListView.cs, double-click to get into its design view, and insert the code given below.
 
CS code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Collections.ObjectModel;  
  4. using System.Text;  
  5.   
  6. namespace ExpendableListView  
  7. {  
  8.     public class MainListView  
  9.     {  
  10.         private Product _oldProduct;  
  11.         public ObservableCollection<Product> Products { getset; }  
  12.   
  13.           
  14.   
  15.         public MainListView()  
  16.         {  
  17.             Products = new ObservableCollection<Product>  
  18.             {  
  19.                 new Product  
  20.                 {  
  21.                     Title = "Microsoft Surface",  
  22.   
  23.                     Isvisible =false  
  24.                 },  
  25.                 new Product  
  26.                 {  
  27.                     Title = "Microsoft Lumia 535",  
  28.                     Isvisible = false  
  29.                 },  
  30.                 new Product  
  31.                 {  
  32.                     Title = "Microsoft 650",  
  33.                     Isvisible = false  
  34.                 },  
  35.                 new Product  
  36.                 {  
  37.                     Title = "Lenovo Surface",  
  38.                     Isvisible =  false  
  39.                 },  
  40.                 new Product  
  41.                 {  
  42.                     Title = "Microsoft edge",  
  43.                     Isvisible = false  
  44.                 }  
  45.             };  
  46.   
  47.   
  48.   
  49.               
  50.         }  
  51.         public void ShoworHiddenProducts(Product product)  
  52.         {  
  53.             if(_oldProduct == product)  
  54.             {  
  55.                 product.Isvisible = !product.Isvisible;  
  56.                 UpDateProducts(product);  
  57.             }  
  58.             else  
  59.             {  
  60.                 if (_oldProduct != null)  
  61.                 {  
  62.                     _oldProduct.Isvisible = false;  
  63.                     UpDateProducts(_oldProduct);  
  64.   
  65.                 }  
  66.                 product.Isvisible = true;  
  67.                 UpDateProducts(product);  
  68.             }  
  69.             _oldProduct = product;   
  70.         }  
  71.   
  72.         private void UpDateProducts(Product product)  
  73.         {  
  74.   
  75.             var Index = Products.IndexOf(product);  
  76.             Products.Remove(product);  
  77.             Products.Insert(Index, product);  
  78.              
  79.         }  
  80.     }  

 
 
Step 3

Similarly, create another class named Product.cs and add the following code.
 
CS code
  1. namespace ExpandableListView  
  2. {  
  3.     public class Product  
  4.     {  
  5.         public string Title{ getset; }  
  6.   
  7.         public bool IsVisible { getset; }  
  8.     }  

 
 
Step 4

Afterwards, open MainPage.Xaml page.For that, go to Solution Explorer >> ExpendableListView(PCL)  >> MainPage.Xaml and click open MainPage page design view.Here is the code.
 
Xaml code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:ExpendableListView"  
  5.              x:Class="ExpendableListView.MainPage"  
  6.              Title ="Expendable ListView "  
  7.              BackgroundColor="Bisque">  
  8.     <ContentPage.BindingContext>  
  9.         <local:MainListView/>  
  10.     </ContentPage.BindingContext>  
  11.   
  12.     <ListView Margin="0,80"  
  13.               ItemTapped="ListViewItem_Tabbed"  
  14.               ItemsSource="{Binding Products}"  
  15.               HasUnevenRows="True"  
  16.               BackgroundColor="Black">  
  17.         <ListView.ItemTemplate>  
  18.             <DataTemplate>  
  19.                 <ViewCell>  
  20.                     <StackLayout Padding="20">  
  21.                         <Label Text="{Binding Title}"  
  22.                                FontSize="25"  
  23.                                TextColor="Azure"/>  
  24.                         <StackLayout IsVisible="{Binding Isvisible}"  
  25.                                      Orientation="Horizontal"  
  26.                                      Margin="0,0,80,0">  
  27.                             <Button Text="Place Order"  
  28.                                     WidthRequest="110"  
  29.                                     FontSize="15"  
  30.                                     BackgroundColor="Chocolate"  
  31.                                     TextColor="White"/>  
  32.                             <Button Text="Details"  
  33.                                     WidthRequest="110"  
  34.                                     FontSize="15"  
  35.                                     BackgroundColor="CornflowerBlue"  
  36.                                     TextColor="DarkBlue"/>  
  37.                             <Button Text="Edit"  
  38.                                     WidthRequest="110"  
  39.                                     FontSize="15"  
  40.                                     BackgroundColor="LightCoral"  
  41.                                     TextColor="Maroon"/>  
  42.                         </StackLayout>  
  43.                     </StackLayout>  
  44.                 </ViewCell>  
  45.             </DataTemplate>  
  46.         </ListView.ItemTemplate>  
  47.     </ListView>  
  48. </ContentPage> 
 
 
Step 5

Now, open Solution Explorer >>ExpendableListView(PCL) >>open MainPage.xaml.cs page. Here is the code for this page.
 
CS code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8. namespace ExpendableListView  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.         private void ListViewItem_Tabbed(object sender, ItemTappedEventArgs e)  
  17.         {  
  18.             var product = e.Item as Product;  
  19.             var vm = BindingContext as MainListView;  
  20.             vm?.ShoworHiddenProducts(product);  
  21.         }  
  22.   
  23.     }  
  24. }  
 
 
Step 6

Click "F5" or "Build " to "Run" your application.Running your project, you will have the result like below.

 
 
Finally, we have successfully created a Xamarin.Forms Hierarchical Navigation Application.