Dashboard similar as Amazon Dashboard
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
Post a Comment