Replicating Christmas Shopping UI in Xamarin Forms

Howdy!!! In this case we are going to replicate a Bill Details UI Ap obtained from Dribble. You can check the design here!

At the beginning, you will see an image with the original UI where you will see divided into blocks as we’ll be working on each part of the design.

Each block presents the image with the design explicitly that we’ll be working on that block, they are highlighted in a box.

In each of the code blocks, you can see a comment that says: “Here add the code that is being explained in the next block“. To keep you as focused as possible, this part indicates to you that the next block code explanation goes right where the comment line is added.

I will not be using styles so that the properties added to the various components can be seen and understood faster in the explanation process.

Let’s start!

Let’s divide the original design into blocks

To better understand, I have divided the original design into blocks, which are listed in the order in which we will be reproducing each one, these are:

Before we begin, let’s consider some important points to add to our first screen:

1. Hide the status bar:

In your Info.plist add the following lines:

	<key>UIStatusBarHidden</key>
	<true/>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>

view raw ChristmasShoppingUI.xaml hosted with by GitHub

In your MainActivity.cs inside OnCreate method, add the following lines:

	Window.AddFlags(WindowManagerFlags.Fullscreen);
	Window.ClearFlags(WindowManagerFlags.ForceNotFullscreen);

view raw ChristmasShoppingUI.xaml hosted with by GitHub

2. We will assign a BackgroundColor to the ContentPage

BackgroundColor="#fd553b"

view raw ChristmasShoppingUI.xaml hosted with by GitHub

So, now let’s start! The first step is to create the main structure which will be containing the design.

	<!-- Main structure-->
	<Grid RowDefinitions="Auto,Auto,Auto,Auto" RowSpacing="0">
	<!-- Here add the code that is being explained in this block-->
	</Grid>

view raw ChristmasShoppingUI.xaml hosted with by GitHub

For the rounded borders, we’ll use PancakeView! Inside it, add the following code:

	<!-- 1.1 Main image-->
	<StackLayout Grid.Row="0" BackgroundColor="White" HeightRequest="350">
	<PanCake:PancakeView Grid.Row="0" CornerRadius="0,0,90,0">
	<Grid ColumnDefinitions="*,Auto" BackgroundColor="#d4f1ef" HorizontalOptions="FillAndExpand">
	<Image Grid.Column="0" Margin="10,20,10,20" Source="Deer" />
	<Button Grid.Column="0" Grid.ColumnSpan="2" ImageSource="Bag" BackgroundColor="#90dbd5" Margin="0,15,15,0" VerticalOptions="Start" HorizontalOptions="End" HeightRequest="50" WidthRequest="50" CornerRadius="25"/>
	<Button Grid.Column="1" VerticalOptions="Start" BackgroundColor="White" HorizontalOptions="End" Margin="0,9,15,0" HeightRequest="{OnPlatform iOS='16', Android='26'}" WidthRequest="{OnPlatform iOS='16', Android='26'}" CornerRadius="{OnPlatform iOS='8', Android='13'}" Text="1" FontAttributes="Bold" FontSize="7" TextColor="Red" />
	</Grid>
	</PanCake:PancakeView>
	</StackLayout>
	<!-- Here add the code that is being explained in the next block-->

view raw ChristmasShoppingUI.xaml hosted with by GitHub

For the second block, we’ll include the details of the product. In this case, we need to make the rounded appearance of the previous block a continuation of it. Let’s see how to do it.

We will divide it into two parts:

1. First block of code with the first edge of the right rounded

	<!-- 1.2 Details -->
	<StackLayout Grid.Row="1" BackgroundColor="#d4f1ef">
	<PanCake:PancakeView Grid.Row="1" CornerRadius="0,90,0,0">
	<Grid RowDefinitions="Auto,Auto,Auto,Auto" Padding="20,45,20,0" BackgroundColor="White" HeightRequest="300">
	<Label Grid.Row="0" Text="Flussmonger" FontAttributes="Bold" TextColor="Silver"/>
	<Label Grid.Row="1" Text="Reindeer Teddy Bear&#10;with Chocolates" FontSize="30" FontAttributes="Bold"/>
	<Label Grid.Row="2" Text="$70.99" FontSize="25" Padding="0,15" TextColor="#49a657" FontAttributes="Bold"/>
	<Label Grid.Row="3" Text="A children's favorite is brought to life with the Rudolph animated plush, a cute, collectible frien with red and black buffalo plaid print on his scarf ans inside his ears." TextColor="Silver"/>
	</Grid>
	</PanCake:PancakeView>
	</StackLayout>
	<!-- Here add the code that is being explained in the next block-->

view raw ChristmasShoppingUI.xaml hosted with by GitHub

2. In this second part we will add a Pancake to give continuity to the completion of the block with the rounded bottom edges

<PanCake:PancakeView Grid.Row="2" CornerRadius="0,0,50,50" Margin="0,-1,0,0" BackgroundColor="White" HeightRequest="150"/>

view raw ChristmasShoppingUI.xaml hosted with by GitHub

Finally, let’s add the “Add to Cart” button! With this step, we have completed the design of the first screen.

	<!--< Cart-->
	<Button Text="Add to Cart" Grid.Row="3" CornerRadius="20"
	Clicked="Btn_Clicked" BackgroundColor="White" Margin="60,40"
	FontAttributes="Bold" HeightRequest="55" TextColor="Black"
	VerticalOptions="CenterAndExpand"/>

view raw ChristmasShoppingUI.xaml hosted with by GitHub

Here we are going to add simple navigation to be able to present the other screen from this button, for this reason in the previous code block you can see the Clicked = “Btn_Clicked” event. And then we proceed to create the event:

	async void Btn_Clicked(object sender, System.EventArgs e)
	{
	await Navigation.PushModalAsync(new Views.ShoppingCartPage());
	}

view raw ChristmasShoppingUI.xaml hosted with by GitHub

Now let’s start with the second screen! The first block is called “Header”. We’ll continue to maintain the same effect of the continuous edges, for this screen we will have the following components:

• Title
• Quantity of items
• The button of accumulated items

 On this screen, you must also set the BackgroundColor property in the ContentPage as in the previous one.

	<!-- Main structure-->
	<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="0">
	<!-- 2.1 Header-->
	<StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="White">
	<PanCake:PancakeView Grid.Row="0" CornerRadius="0,0,110,0" HeightRequest="180">
	<Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto" BackgroundColor="#49c175" Padding="25,55,25,0" HorizontalOptions="FillAndExpand">
	<Label Grid.Column="0" Grid.Row="0" Text="SHOPPING CART" CharacterSpacing="3" HorizontalTextAlignment="Center" FontSize="13" TextColor="White"/>
	<Label Grid.Column="0" Grid.Row="1" Text="3 Items Added" CharacterSpacing="3" Padding="0,20,0,0" FontSize="23" FontAttributes="Bold" HorizontalTextAlignment="Center" TextColor="White"/>
	<Button Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" VerticalOptions="Start" ImageSource="Bag" BackgroundColor="#2da050" HorizontalOptions="End" HeightRequest="40" WidthRequest="40" CornerRadius="20"/>
	<Button Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" VerticalOptions="Start" BackgroundColor="White" HorizontalOptions="End" HeightRequest="{OnPlatform iOS='16', Android='26'}" WidthRequest="{OnPlatform iOS='16', Android='26'}" CornerRadius="{OnPlatform iOS='8', Android='13'}" Text="3" FontAttributes="Bold" FontSize="9" TextColor="Red" Margin="0,-6,-5,0"/>
	</Grid>
	</PanCake:PancakeView>
	</StackLayout>
	<!-- Here add the code that is being explained in the blocks 2.2 and 2.3-->
	</Grid>

view raw ChristmasShoppingUI.xaml hosted with by GitHub

Let’s continue with the list of Items added. To do it we will use a CollectionView!

	<!-- 2.2 Gift list -->
	<StackLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="Start" BackgroundColor="#49c175">
	<PanCake:PancakeView Grid.Row="1" CornerRadius="0,90,0,0">
	<CollectionView VerticalScrollBarVisibility="Never"
	HeightRequest="{OnPlatform Android='340', iOS='515'}"
	BackgroundColor="White"
	ItemsSource="{Binding items}">
	<CollectionView.ItemTemplate>
	<DataTemplate>
	<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="120,*,Auto" Padding="30,20,20,10" BackgroundColor="White">
	<PanCake:PancakeView Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" CornerRadius="20">
	<Image Source="{Binding Picture}" Aspect="AspectFill" />
	</PanCake:PancakeView>
	<Label Grid.Row="0" Grid.Column="1" Text="{Binding By}" Grid.ColumnSpan="2" FontSize="13" Padding="10,10,0,0" TextColor="#9a9bab" FontAttributes="Bold"/>
	<Label Grid.Row="1" Grid.Column="1" Text="{Binding Title}" MaxLines="3" Padding="10,0,0,10" FontSize="17" FontAttributes="Bold"/>
	<Label Grid.Row="2" Grid.Column="1" Text="{Binding Price}" Padding="10,0,0,0" FontAttributes="Bold" FontSize="20" TextColor="#49c175"/>
	<Button Grid.Row="1" Grid.Column="3" FontSize="13" VerticalOptions="Center" Margin="0,0,10,0" BackgroundColor="#0c0e34" Text="{Binding Quantity}" TextColor="White" HorizontalOptions="End" HeightRequest="40" WidthRequest="40" CornerRadius="20" />
	</Grid>
	</DataTemplate>
	</CollectionView.ItemTemplate>
	</CollectionView>
	</PanCake:PancakeView>
	</StackLayout>
	<!--Adding button corners -->
	<PanCake:PancakeView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" CornerRadius="0,0,80,80" Margin="0,0,0,25" BackgroundColor="White" HeightRequest="{OnPlatform Android='50', iOS='75'}"/>
	<!-- Here add the code that is being explained in the blocks 2.2 and 2.3-->

view raw ChristmasShoppingUI.xaml hosted with by GitHub

.

And finally, the payment block which contains the total amount from items added to our list!

.

	<!-- Payment -->
	<Label Grid.Row="3" Grid.Column="0" TextColor="White" Text="Total Payment" Padding="30,10,30,5" />
	<Label Grid.Row="4" Grid.Column="0" TextColor="White" Text="$90,42" Padding="30,0,30,30" FontAttributes="Bold" FontSize="30"/>
	<Button Grid.Row="3" Grid.RowSpan="2" Grid.Column="1" VerticalOptions="Center" BackgroundColor="White" Text="Checkout" TextColor="Black" CornerRadius="20" Margin="0,10,30,30" WidthRequest="180" FontSize="17" FontAttributes="Bold" HeightRequest="55"/>

view raw ChristmasShoppingUI.xaml hosted with by GitHub

.

..

.

.

.

And our Christmas Shopping UI  is done! .

To see the complete code structure you can enter to my Github repository 

.

https://github.com/LeomarisReyes/ChristmasShoppingUI

.

.

Spanish post: https://es.askxammy.com/replicando-ui-de-compras-navidenas-en-xamarin-forms/