Dashboard similar as Amazon Dashboard

 

Dashboard in xamarin form
Dashboard in xamarin form

You can get fontawesome from this link.
First we will create custom navigation bar

TopNavBar.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EShoppingUIDesigns.Controls.TopNavBar"
             xmlns:fontawesome="clr-namespace:EShoppingUIDesigns"
             BackgroundColor="#3AC3D6">
  <ContentView.Content>
      <Grid HorizontalOptions="FillAndExpand" RowDefinitions="Auto,Auto" RowSpacing="20" ColumnDefinitions="Auto,*,Auto" Padding="10">
            <Image Grid.Row="0" Grid.Column="0" Source="threelines.png" Aspect="AspectFill" HeightRequest="20" WidthRequest="25"></Image>
            <Label Grid.Row="0" Grid.Column="1" Margin="10,0,0,0" Text="Ecommerce" FontSize="20" TextColor="#202020"></Label>
            <Label Grid.Row="0" Grid.Column="2" FontSize="25" Text="{x:Static fontawesome:Solid.Microphone}" FontFamily="{StaticResource FontAwesomeSolid}" TextColor="#202020"></Label>
            <Frame CornerRadius="10" Grid.Row="1" Grid.ColumnSpan="3">
            <SearchBar  Margin="-20" BackgroundColor="White" Placeholder="Search..."></SearchBar>
            </Frame>
        </Grid>
  </ContentView.Content>
</ContentView>  

Add new Template 

DashboardView.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EShoppingUIDesigns.Views.Ecommerce.Template.DashboardView">
    <ContentView.Content>
        <Grid RowDefinitions="Auto,Auto" Padding="5,0">
            <Image Grid.Row="0" Source="{Binding Img}" Aspect="Fill" HeightRequest="60" WidthRequest="60"></Image>
            <Label Grid.Row="1" Text="{Binding Name}" HorizontalOptions="Center" TextColor="#202020"></Label>
        </Grid>
    </ContentView.Content>
</ContentView>  

Lets create code for dashboard.

Dashboard.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EShoppingUIDesigns.Views.Ecommerce.Dashboard"
             Shell.NavBarIsVisible="False"
             xmlns:control="clr-namespace:EShoppingUIDesigns.Controls"
             xmlns:fontawesome="clr-namespace:EShoppingUIDesigns"
             xmlns:template="clr-namespace:EShoppingUIDesigns.Views.Ecommerce.Template">
    <ContentPage.Content>
        <Grid HorizontalOptions="FillAndExpand" RowSpacing="0" VerticalOptions="FillAndExpand" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
            <control:TopNavBar Grid.Row="0" />
            <StackLayout Grid.Row="1" BackgroundColor="#17BAC7" Orientation="Horizontal"  HeightRequest="50" Padding="20,0">
                <Label Text="{x:Static fontawesome:Solid.Map_Marker_Alt}" TextColor="#202020" VerticalOptions="Center" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                <Label Text="Deliver to Name - City 879548" TextColor="#202020" VerticalOptions="Center"></Label>
                <Label Text="{x:Static fontawesome:Solid.Angle_Down}" TextColor="#202020" VerticalOptions="Center" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
            </StackLayout>
            <CollectionView x:Name="cv" Grid.Row="2" Margin="10,20,10,0" HeightRequest="100">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout Orientation="Horizontal"></LinearItemsLayout>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <template:DashboardView></template:DashboardView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            <Image x:Name="img" Grid.Row="3" BackgroundColor="#2DC1BA" HeightRequest="180" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
            <ScrollView Grid.Row="4"  Orientation="Horizontal">
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="10">
                    <Frame CornerRadius="20"  WidthRequest="120" HeightRequest="160">
                        <Grid RowDefinitions="*,*" ColumnDefinitions="*,*" Margin="-10">
                            <control:TransactionControl Grid.Row="0" Grid.Column="0" Text="Amazon Pay" BGColor="#A7D6D7"
                          Image="https://static.amazon.jobs/teams/378/thumbnails/AmazonPayLogo-543.jpg" ></control:TransactionControl>
                            <control:TransactionControl Grid.Row="0" Grid.Column="1" Text="Google Pay" BGColor="#F7DED2"
                          Image="https://brandlogos.net/wp-content/uploads/2021/10/google-pay-logo-symbol.png" ></control:TransactionControl>
                            <control:TransactionControl Grid.Row="1" Grid.Column="0" Text="Scan" BGColor="#2DC1BA"
                          Image="https://rb.gy/i03ytx" ></control:TransactionControl>
                            <control:TransactionControl Grid.Row="1" Grid.Column="1" Text="Pay Bills" BGColor="#F4D8F6"
                          Image="https://icon-library.com/images/pay-bills-icon/pay-bills-icon-29.jpg" ></control:TransactionControl>
                        </Grid>
                    </Frame>

                    <Frame CornerRadius="20" WidthRequest="150" HeightRequest="150">
                        <Grid RowDefinitions="Auto,Auto">
                            <Label Grid.Row="0" Text="Arriving Today" HorizontalOptions="Center" TextColor="#202020"></Label>
                            <Image Grid.Row="1" Source="https://m.media-amazon.com/images/I/71b5JqOaJcL._UY550_.jpg" Aspect="AspectFit"></Image>
                        </Grid>
                    </Frame>

                    <Frame CornerRadius="20" WidthRequest="150" HeightRequest="150">
                        <Grid RowDefinitions="Auto,Auto">
                            <Label Grid.Row="0" Text="Item in your cart" HorizontalOptions="Center" TextColor="#202020"></Label>
                            <Image Grid.Row="1" Source="https://ae01.alicdn.com/kf/HTB1cYaDL3HqK1RjSZFPq6AwapXaj/Xiberia-MG-2-Pro-Stereo-Bass-Gaming-Earbuds-with-Detachable-Noise-Cancelling-Mic-4D-Vibration-7.jpg" Aspect="AspectFit"></Image>
                        </Grid>
                    </Frame>

                    <Frame CornerRadius="20" WidthRequest="150" HeightRequest="150">
                        <Grid RowDefinitions="Auto,Auto">
                            <Label Grid.Row="0" Text="Pick up from where you left" HorizontalOptions="Center" TextColor="#202020"></Label>
                            <Image Grid.Row="1" Source="https://sparrowz.in/wp-content/uploads/2020/08/Rin-Detergent-Powder-1.jpg" Aspect="AspectFit"></Image>
                        </Grid>
                    </Frame>

                    <Frame CornerRadius="20" WidthRequest="150" HeightRequest="150">
                        <Grid RowDefinitions="Auto,Auto">
                            <Label Grid.Row="0" Text="Today's Deal" HorizontalOptions="Center" TextColor="#202020"></Label>
                            <Image Grid.Row="1" Source="https://sc01.alicdn.com/kf/Hb3a9fc934036460a83daf308239b5537Z.jpg" Aspect="AspectFit"></Image>
                        </Grid>
                    </Frame>
                </StackLayout>
            </ScrollView>
            <Label Grid.Row="5" HorizontalOptions="Center" FontSize="22" Margin="0,10,0,0" Text="Extra 40% Cashback on shopping" TextColor="#202020"></Label>
            <Label Grid.Row="6" HorizontalOptions="Center" FontSize="18"  Text="Fashion | Home | Electronics | Sports and Books" TextColor="#202020"></Label>
        </Grid>
    </ContentPage.Content>
</ContentPage>  

Dashboard.xaml.cs

    public partial class Dashboard : ContentPage
    {
        List<string> ImgList = new List<string>();
       
        public Dashboard()
        {
            InitializeComponent();
            ImgList.Add("images.jpg");
            ImgList.Add("image1.jpg");
            ImgList.Add("image2.jpg");
            ImgList.Add("images3.jpg");
            ImgList.Add("images4.jpg");
            cv.ItemsSource = new CategoryModel().Get();
        }

        protected override void OnAppearing()
        {
            int i = 0;
            base.OnAppearing();
            Device.StartTimer(TimeSpan.FromSeconds(2), () =>
            {
                img.Source = ImgList[i];
                i++;
                if (i >= 5) i = 0;
                return true;
            });
        }
    }  
Code is explain in this video

Hope this is helpfull to you. Please send me your feedback.

Comments

Popular posts from this blog

The Hidden Bug in .NET MAUI Android Layouts (and How to Fix It Cleanly)

Push Notifications in .NET MAUI: A Comprehensive Guide

Flutter Falls Behind? .NET MAUI Nails Liquid Glass on iOS 26 – Here’s How