Category List Page for Ecommerce App in MAUI

 

Category List Page for Ecommerce App In MAUI

Please, support my blog by clicking on our sponsors ad!

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