Category List Page for Ecommerce App in MAUI

 

Category List Page for Ecommerce App In MAUI

You can also see other ecommerce page : Authentication Page, Dashboard

Please refer Authentication Page for resource.

This code is explain in below video, please like share and subscribe

  First we create categorymodel and categoryviewmodel

    public class CategoryViewModel
    {
        public ImageSource Img { get; set; }
        public string Title { get; set; }
        public string Description { get; set; } = "All Stock available";
    }
    public class CategoryModel
    {
        public List<CategoryViewModel> GetCategory()
        {
            List<CategoryViewModel> list = new List<CategoryViewModel>();
            list.Add(new CategoryViewModel { Img = "https://i.gadgets360cdn.com/products/large/redmi-note-11t-5g-824x800-1638256477.jpg", Title = "Mobiles" });
            list.Add(new CategoryViewModel { Img = "https://m.media-amazon.com/images/I/315vj6oj-FL.jpg", Title = "Electronics" });
            list.Add(new CategoryViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvnXFwrk_PWtUpvJiRjp7fRFKDchw4AnG4KA", Title = "Fresh" });
            list.Add(new CategoryViewModel { Img = "https://www.businessinsider.in/thumb/msid-81412331,width-640,resizemode-4/Master.jpg", Title = "Fashion" });
            list.Add(new CategoryViewModel { Img = "https://upload.wikimedia.org/wikipedia/commons/0/08/LGwashingmachine.jpg", Title = "Appliance" });
            list.Add(new CategoryViewModel { Img = "https://images.theconversation.com/files/45159/original/rptgtpxd-1396254731.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip", Title = "Books" });
            list.Add(new CategoryViewModel { Img = "https://m.media-amazon.com/images/I/71AaH5W7c1L._SL1500_.jpg", Title = "Toys" });
            return list;
        }
    }

Now we create template for category listview

CategoryTemplate

 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.Pages.Product.Template.CategoryTemplate">
    <StackLayout Padding="0,5,10,5">
        <Grid ColumnDefinitions="*,Auto" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ColumnSpacing="20">
            <Frame CornerRadius="10" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Padding="0" >
                <Grid Grid.Column="0" ColumnDefinitions="Auto,*" ColumnSpacing="10" RowDefinitions="Auto,Auto" BackgroundColor="#E1e1e1" Padding="10">
                    <Frame CornerRadius="20" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Padding="0" >
                        <Image Source="{Binding Img}"  Aspect="Fill" WidthRequest="70" HeightRequest="70"></Image>
                    </Frame>
                    <Label Text="{Binding Title}" Grid.Column="1" Grid.Row="0" VerticalOptions="End" FontAttributes="Bold" TextColor="{StaticResource Primary}"></Label>
                    <Label Text="{Binding Description}" Grid.Column="1" Grid.Row="1" TextColor="{StaticResource Primary}"></Label>
                </Grid>
            </Frame>
            <Image x:Name="img" Grid.Column="1" Source="https://creazilla-store.fra1.digitaloceanspaces.com/icons/3197020/plus-circle-icon-md.png"
               HeightRequest="30" WidthRequest="30">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </StackLayout>
</ContentView>

 CategoryTemplate.cs

public partial class CategoryTemplate : ContentView
{
	bool isSelected = false;
	public CategoryTemplate()
	{
		InitializeComponent();
	}

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
		if (isSelected)
			img.Source = "https://www.pngall.com/wp-content/uploads/8/Green-Check-Mark-PNG-Free-Download.png";
		else
			img.Source = "https://creazilla-store.fra1.digitaloceanspaces.com/icons/3197020/plus-circle-icon-md.png";

		isSelected = !isSelected;
    }
}

Now create category page
Category.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.Pages.Product.Categories"
             xmlns:template="clr-namespace:Ecommerce.UI.Template.Pages.Product.Template"
             Title="Categories"
             Shell.NavBarIsVisible="False">
    <Grid HorizontalOptions="FillAndExpand" Padding="20,20,10,20" VerticalOptions="FillAndExpand" RowDefinitions="40,*,auto" >
        <Label Text="Select Category" FontAttributes="Bold" FontSize="20" TextColor="{x:StaticResource Primary}"  Grid.Row="0"></Label>
        <ListView x:Name="listView" Grid.Row="1" HasUnevenRows="True" SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <template:CategoryTemplate></template:CategoryTemplate>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Text="Done" Grid.Row="2"></Button>
    </Grid>
</ContentPage>

Category.xaml.cs

public partial class Categories : ContentPage
{
	public Categories()
	{
		InitializeComponent();
		listView.ItemsSource = new CategoryModel().GetCategory();
	}
}

I hope this is helpful for you. please share your feedback