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;
  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. };
  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);
  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. };
  31. View = stackLayout;
  32. }
  33. }
  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;
  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.