Dashboard Page In Ecommerce App in xamarin and MAUI app

In Previous Blog, we created Authentication page for Ecommerce APP, now let's continue with Home Page, It will open when user click on login button of login page.

Mastering Maui: Designing an Exceptional Home UI Page for Your Ecommerce App


To understand briefly watch this video:

To create Home UI Page we will create Template and Class

Templates
  • BrandTemplate
  • CardCircleImage
  • FeatureProduct
  • LargeImage
Classes
ViewModel classes are for property and model Classes for  Get List.
  • ProductViewModel 
  • ProductModel 
  • BrandViewModel
  • BrandModel

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

Let's start by creating Template one by one.
BrandTemplate
    <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.CustomControls.BrandTemplate">
    <StackLayout  Padding="10">
        <Image Source="{Binding Img}" HeightRequest="120" WidthRequest="120" Aspect="Fill"></Image>
    </StackLayout>
</ContentView>
CardCircleImage
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.CustomControls.CardCircleImage">
    <Grid HorizontalOptions="FillAndExpand" RowDefinitions="Auto,Auto">
        <Border Grid.Row="0" HeightRequest="70" Stroke="{x:StaticResource GrayColor}"
        StrokeThickness="1" StrokeShape="RoundRectangle 100" Background="white" Padding="0"
        HorizontalOptions="FillAndExpand">
            <Image x:Name="img" Source="{Binding Img}" Aspect="Fill" HeightRequest="70" WidthRequest="70"/>

        </Border>
        <Label Grid.Row="1" x:Name="lbl" Margin="20,0,0,60" FontAttributes="Bold"  Text="{Binding Title}" HorizontalOptions="Center" TextColor="{x:StaticResource Primary}"></Label>

    </Grid>
</ContentView>
FeatureProduct
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.CustomControls.FeatureProduct">
    <StackLayout  Padding="5">
        <Frame CornerRadius="10"  BackgroundColor="White" Padding="10" WidthRequest="250">
            <Grid RowDefinitions="Auto,Auto" BackgroundColor="White" ColumnDefinitions="Auto,Auto" ColumnSpacing="5" Padding="10">
                <Image Source="{Binding Img}"  Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" HeightRequest="120" WidthRequest="120" Aspect="Fill"></Image>
                <Label Text="{Binding Title}" VerticalOptions="End" Grid.Row="0" Grid.Column="1"></Label>
                <Label Text="{Binding Price}" Grid.Row="1" Grid.Column="1"></Label>
            </Grid>
        </Frame>
    </StackLayout>
</ContentView>
LargeImage
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.CustomControls.LargeImage">
    <Grid RowDefinitions="Auto,Auto" Padding="10">
        <Image Grid.Row="0" Source="{Binding Img}" HeightRequest="130" WidthRequest="180" Aspect="Fill"></Image>
        <Label Grid.Row="1" Text="{Binding Title}" FontAttributes="Bold" Margin="0,5,0,0" TextColor="{x:StaticResource Primary}" HorizontalOptions="Center"></Label>
    </Grid>
</ContentView>
Now Let's create Models and ViewModels
BrandModel
    public class BrandViewModel
    {
        public ImageSource Img { get; set; }
        public string Title { get; set; }
    }

    public class BrandModel
    {
        public List<BrandViewModel> GetBrands()
        {
            List<BrandViewModel> list = new List<BrandViewModel>()
            {
                new BrandViewModel { Img = "https://i.pinimg.com/236x/fd/df/a4/fddfa4862f5d463e538b6bef9f787e4b.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/4c/13/7b/4c137b9aae38357d1adb5ddb0a2fca19.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/4c/77/5e/4c775ebb8d09797b9c15b55357368ae6.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/13/ce/13/13ce138818f8e1e39aed01b26a1750bb.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/c3/e6/50/c3e65002e10cea73ce52fae791ec02c7.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/e5/ac/45/e5ac45c7a5221203fd4e01054e5a04e5.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/f4/6d/c1/f46dc1fb25e5b162a87d019383bd7420.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/cf/99/0d/cf990dbf206891f04e881dad7205e985.jpg" },
                new BrandViewModel { Img = "https://i.pinimg.com/236x/61/47/a6/6147a648ece9d9ab998ac7ca49ebde50.jpg" }
            };
            return list;
        }
    }
ProductsModel
    public class ProductViewModel
    {
        public ImageSource Img { get; set; }
        public string Title { get; set; }
        public decimal Price { get; set; }
    }

    public class ProductModel
    {
        public List<ProductViewModel> GetProducts()
        {
            List<ProductViewModel> list = new List<ProductViewModel>
            {
                new ProductViewModel { Img = "https://i.gadgets360cdn.com/products/large/redmi-note-11t-5g-824x800-1638256477.jpg", Title = "Mobiles",Price = 150 },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/315vj6oj-FL.jpg", Title = "Electronics",Price = 150 },
                new ProductViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvnXFwrk_PWtUpvJiRjp7fRFKDchw4AnG4KA", Title = "Fresh" ,Price = 150},
                new ProductViewModel { Img = "https://www.businessinsider.in/thumb/msid-81412331,width-640,resizemode-4/Master.jpg", Title = "Fashion" ,Price = 150},
                new ProductViewModel { Img = "https://upload.wikimedia.org/wikipedia/commons/0/08/LGwashingmachine.jpg", Title = "Appliance" ,Price = 150},
                new ProductViewModel { 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",Price = 150 },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/71AaH5W7c1L._SL1500_.jpg", Title = "Toys" ,Price = 150}
            };
            return list;
        }

        public List<ProductViewModel> GetProductsDiscount()
        {
            List<ProductViewModel> list = new List<ProductViewModel>
            {
                new ProductViewModel { Img = "https://i.pinimg.com/564x/50/ea/90/50ea90318df3acbf3f5875f1d9bf7ad7.jpg", Title = "Authentication" },
                new ProductViewModel { Img = "https://i.pinimg.com/564x/bf/30/a0/bf30a0c421a2f25db2140174f8c10ee6.jpg", Title = "Bank" },
                new ProductViewModel { Img = "https://i.pinimg.com/564x/18/3e/25/183e2591210ae312250870e89a5a425a.jpg", Title = "School" },
                new ProductViewModel { Img = "https://i.pinimg.com/564x/70/03/b2/7003b29ea851b20cc00972f08accae44.jpg", Title = "Course" },
            };
            return list;
        }
    }
Finally Create Home Page.
Home.Xaml
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:TemplatedPage="clr-namespace:Ecommerce.UI.Template.CustomControls"
             x:Class="Ecommed:\ktechsolutions\eshopping ui design\ecommerce.ui.template\ecommerce.ui.template\pages\home\home.xaml.cs
d:\ktechsolutions\eshopping ui design\ecommerce.ui.template\ecommerce.ui.template\pages\home\home.xaml
rce.UI.Template.Pages.Home.Home"
             Title="Home"
              NavigationPage.HasNavigationBar="False">
    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowDefinitions="Auto,*">
        <Grid Grid.Row="0" HeightRequest="60" BackgroundColor="#1C375C" ColumnDefinitions="Auto,*">
            <Image Source="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvKR7Ml1FipHg-812HMTQMUntjeSHTokIR0Yzx8AFaoa3F6_keKPyqHM1GIf7WxvCWnhWjnrLCj3LIlTgPPLiA0EKwL1PkITVpm_iNktXynMSYgZYyb8JWY2KjomlP4_ehmMb-Urjl4JVz/s113/logo3.png"
                 Grid.Column="0"  ></Image>
            <Label Grid.Column="1" Text="Your one-stop shop for your shopping needs!"  FontSize="15" HorizontalOptions="Center" VerticalOptions="Center" TextColor="White"></Label>
        </Grid>
        <ScrollView  Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid BackgroundColor="White"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto">

                <SearchBar Grid.Row="1" Placeholder="Search for your favourite product" HorizontalOptions="FillAndExpand"></SearchBar>
                <CollectionView Grid.Row="2" SelectionMode="Single"  x:Name="cvCategory" HeightRequest="100" Margin="0,10"
                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate >
                        <DataTemplate>
                            <TemplatedPage:CardCircleImage></TemplatedPage:CardCircleImage>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <BoxView HeightRequest="2" Color="#E5E5E5" Margin="0,5" Grid.Row="3"></BoxView>

                <Label Text="Special Offers" FontAttributes="Bold"  FontSize="20" Grid.Row="4"></Label>
                <Image Grid.Row="5" Margin="0,10" Source="https://img.freepik.com/premium-vector/laptop-sale-promotional-instagram-post-ads-banner-design_148452-90.jpg" Aspect="AspectFill"></Image>
                <BoxView HeightRequest="2" Color="#E5E5E5" Margin="0,5" Grid.Row="6"></BoxView>

                <Label Text="Featured Product" FontAttributes="Bold"  FontSize="20" Grid.Row="7"></Label>
                <CollectionView Grid.Row="8" SelectionMode="Single" Margin="10,5"  x:Name="cvFeatureProduct" HeightRequest="170"
                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate >
                        <DataTemplate>
                            <TemplatedPage:FeatureProduct></TemplatedPage:FeatureProduct>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
              
                <BoxView HeightRequest="2" Color="#E5E5E5" Margin="0,10" Grid.Row="9"></BoxView>

                <Label Text="Seasonal Promotions" FontAttributes="Bold"  FontSize="20" Grid.Row="10"></Label>
                <Image Grid.Row="11" Source="https://fashionpro.me/wp-content/uploads/2016/06/Styles.jpg" Margin="0,10" Aspect="AspectFill"></Image>
                <BoxView HeightRequest="2" Color="#E5E5E5" Margin="0,5" Grid.Row="12"></BoxView>

                <Label Text="Limited-time Discount" FontSize="20" FontAttributes="Bold" Grid.Row="13"></Label>
                <CollectionView  SelectionMode="Single" Grid.Row="14"  HeightRequest="355" Margin="0,10,0,0" x:Name="cvDiscount" 
                HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="2"></GridItemsLayout>
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate >
                        <DataTemplate>
                            <TemplatedPage:LargeImage></TemplatedPage:LargeImage>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <BoxView HeightRequest="2" Color="#E5E5E5" Margin="0,5" Grid.Row="15"></BoxView>


                <Label Text="Popular Brand" FontAttributes="Bold"  FontSize="20" Grid.Row="16"></Label>
                <CollectionView  SelectionMode="Single" Grid.Row="17"  HeightRequest="420" x:Name="cvPopular" 
                HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="3"></GridItemsLayout>
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate >
                        <DataTemplate>
                            <TemplatedPage:BrandTemplate></TemplatedPage:BrandTemplate>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Grid>
        </ScrollView>
    </Grid>
</ContentPage>
Home.Xaml.cs
        public Home()
	{
		InitializeComponent();
		cvCategory.ItemsSource = new CategoryModel().GetCategory();
		cvFeatureProduct.ItemsSource = new ProductModel().GetProducts();
		cvDiscount.ItemsSource = new ProductModel().GetProductsDiscount();
		cvPopular.ItemsSource = new BrandModel().GetBrands();

	}
Hope this is helpful to you, Please share your feedback in comment section.
-

Comments

Post a Comment

Popular posts from this blog

Explore the UI libraries available for .NET MAUI at no cost.

Image
  In this article, we'll explore some of the free libraries available for .NET MAUI. Please, support my blog by clicking on our sponsors ad! In this article, we'll explore some of the free libraries available for .NET MAUI. I think many developers, when creating applications, seek free or open-source UI libraries that enhance the user experience, are compatible, or at least have support plans for .NET MAUI. That's why today, I want to share some options I found that you can explore and implement in your projects: MauiBlazor  Specifically crafted for .NET MAUI, this library provides Blazor UI components for cross-platform development. Repository: MauiBlazor on GitHub Built on Blazor, this library allows you to create cross-platform applications using C#, HTML, and JavaScript. Note: Ensure to review the documentation and updates to confirm compatibility with your .NET MAUI version. Comet  Initially designed for Xamarin.Forms, Comet is a UI framewor
Read more

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Please, support my blog by clicking on our sponsors ad! Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project ->
Read more

School UI Design using xamarin form

Image
School UI Design using xamarin form All Part of School UI Design: https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_4.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_10.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-fees-gallery-profile.html First add  Fontawesome  in your project. First image is for Dashboard, Second is for TimeTable and last is for Syllabus. Rest of the page will publish in next blog. You can also replace the calendar view with another calendar control as listed below: Calendar Control 1 Calendar Contorl 2 Code is explain in this video First we will change NavigationDrawercolor. In App.xaml add following code in Application.Resources Tag <Application.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="FontAwesom
Read more