How To Dynamic List View In Xamarin.Forms

Introduction

This article demonstrates how to create a Dynamic ListView Application using C# and XAML in Xamarin.Forms. 
 
Let's start.

Step 1 

Open Visual Studio and go to New Project >> installed >> Visual C# >> Cross-Platform.

Select Cross-Platform App, then give your project a name and location.
 
 

Step 2

After project creation, update the following NuGet Packages to your project.

Xamarin.Forms

Go to Solution Explorer and select your solution. Right-click and select "ManageNuGett Packages for Solution".



Now, select the following NuGet package and select your project to update it.

 
 
Step 3

Next, add an image to open Solution Explorer >> projectName.Android >> Resources >> Right click the drawable >>Add >> Existing Item and add the image.

 

 

Step 4

Open Solution Explorer >> Project Name >> Mainpage.xaml. Open the Design View of this page.



The code is given below.

 

XAML Code
  1. <StackLayout Padding="0,20,0,0">  
  2.         <Label Text="Dynamic Resizing Demo" FontAttributes="Bold" HorizontalOptions="Center" />  
  3.         <ListView x:Name="listView" HasUnevenRows="true">  
  4.           <ListView.ItemTemplate>  
  5.                    <DataTemplate>  
  6.                        <ViewCell>  
  7.                            <StackLayout Padding="15,5,5,5" Orientation="Horizontal">  
  8.                                <Image Source="Image.jpg" HeightRequest="50">  
  9.                                    <Image.GestureRecognizers>  
  10.                                        <TapGestureRecognizer Tapped="OnImageTapped" />  
  11.                                    </Image.GestureRecognizers>  
  12.                                </Image>  
  13.                                <Label Text="Flower" VerticalOptions="Center" />  
  14.                            </StackLayout>  
  15.                        </ViewCell>  
  16.                    </DataTemplate>  
  17.                </ListView.ItemTemplate>  
  18.            </ListView>  
  19.        </StackLayout>  
Step 4

Open Solution Explorer >> Project Name >> Mainpage.xaml.cs. Open the Design View of this page.

 

The code is given below.

 

C# Code
  1. public partial class MainPage : ContentPage  
  2.     {  
  3.         public MainPage()  
  4.         {  
  5.             BindingContext = this;  
  6.             InitializeComponent();  
  7.             var items = Enumerable.Range(0, 10);  
  8.             listView.ItemsSource = items;  
  9.         }  
  10.         void OnImageTapped(object sender, EventArgs args)  
  11.         {  
  12.             var image = sender as Image;  
  13.             var viewCell = image.Parent.Parent as ViewCell;  
  14.   
  15.             if (image.HeightRequest < 250)  
  16.             {  
  17.                 image.HeightRequest = image.Height + 100;  
  18.                 viewCell.ForceUpdateSize();  
  19.             }  
  20.         }  
  21.     }  
Step 5

Next, open Solution Explorer >> ProjectName(Portable) >> Right Click >> Add >> Class.

 

The Dialogue Box will open. Add the Class and give a name.

 

Step 6

Open Solution Explorer >> Project Name >> Class.cs. Open the Design View of this page.

 

The code is given below.

 

C# Code
  1. public class MyViewCell : ViewCell  
  2.     {  
  3.         public MyViewCell()  
  4.         {  
  5.             var image = new Image  
  6.             {  
  7.                 Source = ImageSource.FromFile("Image.jpg"),  
  8.                 HeightRequest = 50,  
  9.             };  
  10.   
  11.             var tapGestureRecognizer = new TapGestureRecognizer();  
  12.             tapGestureRecognizer.Tapped += (object sender, EventArgs e) => {  
  13.                 if (image.HeightRequest < 250)  
  14.                 {  
  15.                     image.HeightRequest = image.Height + 100;  
  16.                     ForceUpdateSize();  
  17.                 }  
  18.             };  
  19.             image.GestureRecognizers.Add(tapGestureRecognizer);  
  20.   
  21.             var stackLayout = new StackLayout  
  22.             {  
  23.                 Padding = new Thickness(20, 5, 5, 5),  
  24.                 Orientation = StackOrientation.Horizontal,  
  25.                 Children = {  
  26.                     image,  
  27.                     new Label { Text = "Flower", VerticalOptions = LayoutOptions.Center }  
  28.                 }  
  29.             };  
  30.   
  31.             View = stackLayout;  
  32.         }  
  33.     }  
  34.   
  35.     public class HomePageCS : ContentPage  
  36.     {  
  37.         public HomePageCS()  
  38.         {  
  39.             var listView = new ListView { HasUnevenRows = true };  
  40.             listView.ItemTemplate = new DataTemplate(typeof(MyViewCell));  
  41.             var items = Enumerable.Range(0, 10);  
  42.             listView.ItemsSource = items;  
  43.   
  44.             Content = new StackLayout  
  45.             {  
  46.                 Padding = new Thickness(0, 20, 0, 0),  
  47.                 Children = {  
  48.                     new Label {  
  49.                         Text = "HasUnevenRows Dynamic Resizing Demo",  
  50.                         FontAttributes = FontAttributes.Bold,  
  51.                         HorizontalOptions = LayoutOptions.Center  
  52.                     },  
  53.                     listView  
  54.                 }  
  55.             };  
  56.         }  
  57.     }  
Step 8

Press F5 or Build and Run the application.

Output



Finally, we have successfully created a Xamarin.Forms DynamicListView.


Similar Articles