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

Push Notifications in .NET MAUI: A Comprehensive Guide

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

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