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

<StackLayout Padding="0,20,0,0">
        <Label Text="Dynamic Resizing Demo" FontAttributes="Bold" HorizontalOptions="Center" />
        <ListView x:Name="listView" HasUnevenRows="true">
          <ListView.ItemTemplate>
                   <DataTemplate>
                       <ViewCell>
                           <StackLayout Padding="15,5,5,5" Orientation="Horizontal">
                               <Image Source="Image.jpg" HeightRequest="50">
                                   <Image.GestureRecognizers>
                                       <TapGestureRecognizer Tapped="OnImageTapped" />
                                   </Image.GestureRecognizers>
                               </Image>
                               <Label Text="Flower" VerticalOptions="Center" />
                           </StackLayout>
                       </ViewCell>
                   </DataTemplate>
               </ListView.ItemTemplate>
           </ListView>
       </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

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            BindingContext = this;
            InitializeComponent();
            var items = Enumerable.Range(0, 10);
            listView.ItemsSource = items;
        }
        void OnImageTapped(object sender, EventArgs args)
        {
            var image = sender as Image;
            var viewCell = image.Parent.Parent as ViewCell;

            if (image.HeightRequest < 250)
            {
                image.HeightRequest = image.Height + 100;
                viewCell.ForceUpdateSize();
            }
        }
    }

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

public class MyViewCell : ViewCell
    {
        public MyViewCell()
        {
            var image = new Image
            {
                Source = ImageSource.FromFile("Image.jpg"),
                HeightRequest = 50,
            };

            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += (object sender, EventArgs e) => {
                if (image.HeightRequest < 250)
                {
                    image.HeightRequest = image.Height + 100;
                    ForceUpdateSize();
                }
            };
            image.GestureRecognizers.Add(tapGestureRecognizer);

            var stackLayout = new StackLayout
            {
                Padding = new Thickness(20, 5, 5, 5),
                Orientation = StackOrientation.Horizontal,
                Children = {
                    image,
                    new Label { Text = "Flower", VerticalOptions = LayoutOptions.Center }
                }
            };

            View = stackLayout;
        }
    }

    public class HomePageCS : ContentPage
    {
        public HomePageCS()
        {
            var listView = new ListView { HasUnevenRows = true };
            listView.ItemTemplate = new DataTemplate(typeof(MyViewCell));
            var items = Enumerable.Range(0, 10);
            listView.ItemsSource = items;

            Content = new StackLayout
            {
                Padding = new Thickness(0, 20, 0, 0),
                Children = {
                    new Label {
                        Text = "HasUnevenRows Dynamic Resizing Demo",
                        FontAttributes = FontAttributes.Bold,
                        HorizontalOptions = LayoutOptions.Center
                    },
                    listView
                }
            };
        }
    }

Step 8

Press F5 or Build and Run the application.

Output



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