ListView Example in MAUI

  In this example we are going to see ListView Example in MAUI.  

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.ListViewEXP1"

             Title="ListViewEXP1">

    <VerticalStackLayout>

        <ListView x:Name="ListViewName" HasUnevenRows="True">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <ViewCell>

                        <StackLayout>

                            <Frame Margin="20" BorderColor="Gray"

                                   CornerRadius="5" HasShadow="True"

                                   HeightRequest="200" HorizontalOptions="Center"

                                   VerticalOptions="CenterAndExpand">

                                <StackLayout>

                                    <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" ></Label>

                                    <Image Source="{Binding Image}" Aspect="AspectFill" HeightRequest="200" WidthRequest="200" HorizontalOptions="Center" ></Image>

                                    <Label Text="{Binding Details}" ></Label>

                                </StackLayout>

                            </Frame>

                        </StackLayout>

                    </ViewCell>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS page and update as below.

using System.Collections.ObjectModel;

namespace MauiApp1;

public partial class ListViewEXP1 : ContentPage

{

    public ObservableCollection<Car> Cars { get; set; } = new ObservableCollection<Car>();

    public ListViewEXP1()

{

InitializeComponent();

        Car objCars = new Car { Name = "Tata Nexon", Details = "Tata nexon Details", Image = "car1.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Kia Sonet", Details = "Kia Sonet Details", Image = "car2.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Tata Altroz", Details = "Tata Altroz Details", Image = "car3.jfif" };

        Cars.Add(objCars);

        objCars = new Car { Name = "Hyundai Alcazar", Details = "Hyundai Alcazar Details", Image = "car4.jfif" };

        Cars.Add(objCars);

        ListViewName.ItemsSource = Cars;

    }

}

Output:

Code in Github: https://github.com/adi501/MAUI