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;
  6. namespace ExpendableListView
  7. {
  8. public class MainListView
  9. {
  10. private Product _oldProduct;
  11. public ObservableCollection<Product> Products { get; set; }
  15. public MainListView()
  16. {
  17. Products = new ObservableCollection<Product>
  18. {
  19. new Product
  20. {
  21. Title = "Microsoft Surface",
  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. };
  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);
  65. }
  66. product.Isvisible = true;
  67. UpDateProducts(product);
  68. }
  69. _oldProduct = product;
  70. }
  72. private void UpDateProducts(Product product)
  73. {
  75. var Index = Products.IndexOf(product);
  76. Products.Remove(product);
  77. Products.Insert(Index, product);
  79. }
  80. }
  81. }
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{ get; set; }
  7. public bool IsVisible { get; set; }
  8. }
  9. }
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>
  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;
  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. }
  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.