Let’s Replicate an Online Store UI in Xamarin.Forms
Tags: csharp, dotnet, xamarin, mobile
Published: 2022-06-13 11:16:20

---
title: Let’s Replicate an Online Store UI in Xamarin.Forms
published: true
date: 2022-06-10 11:32:52 UTC
tags: csharp, dotnet, xamarin, mobile
canonical_url: https://www.syncfusion.com/blogs/post/lets-replicate-an-online-store-ui-in-xamarin-forms.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Lets-Replicate-an-Online-Store-UI-in-Xamarin.Forms_-672x372.png
---

Howdy! In this blog, we’ll replicate an online store UI based on this [Dribbble design](https://dribbble.com/shots/12581451-Online-Store-App "Dribbble design").

We are going to develop the UI based on the steps specified in the following image.

![Replicating an Online Store UI in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Replicating-an-Online-Store-UI-in-Xamarin.Forms_.png)
<figcaption>Replicating an Online Store UI in Xamarin.Forms</figcaption>

Before starting, let’s highlight some important points. In this blog post, we will learn to:

- Create continuous rounded edges and a floating button, as shown in the previous image.
- Use the [Syncfusion Xamarin.Forms NumericUpDown](https://help.syncfusion.com/xamarin/numericupdown/getting-started "Getting Started with Syncfusion Xamarin.Forms NumericUpDown control") control.

Let’s code!

## Main layout

Let’s start by organizing the main layout of the UI.

I choose the DataGrid in this case, and we will divide the entire screen into two rows:

- **Row 1** : Contains the main image.
- **Row 2:** Contains the frame displaying all the product information and the floating button.

Refer to the following code example.

```html
<!-- Main layout-->
 <Grid RowDefinitions="Auto,*"
       BackgroundColor="White"
       RowSpacing="0">
     <!-- Here you must add the code blocks explained in steps 1 and 2.-->
 </Grid>
```

**Important Note:** Here, we have included **RowSpacing=”0″** and **BackgroundColor=”White”** to make the curve layout look smooth and natural.

## Step 1: Main picture

![Step 1: Main picture](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Main-picture.png)

Let’s render the following three components:

- **Left and right buttons:** This first block will be contained in a grid with two columns defined with proportional values. We will add a button in each column.

- **Main image:** To render the bottom-right rounded edge, use the [PancakeView](https://github.com/sthewissen/Xamarin.Forms.PancakeView " Xamarin.Forms.PancakeView demo on GitHub"). Add the image covering both columns of the grid (using Grid.ColumnSpan=”2″).

Refer to the following code.

```html
<!-- 1. Main picture-->
 <PanCake:PancakeView Grid.Row="0" CornerRadius="0,0,0,60">
   <Grid ColumnDefinitions="*,*">
     <Image Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="280" Aspect="AspectFill" Source="MainImage"/>
       <Button Grid.Column="0" ImageSource="Arrow" BackgroundColor="Transparent" Margin="20,40" VerticalOptions="Start" HorizontalOptions="Start" HeightRequest="50" WidthRequest="50" CornerRadius="14" BorderColor="Silver" BorderWidth="1"/>
       <Button Grid.Column="1" ImageSource="Points" BackgroundColor="Transparent" Margin="20,40" VerticalOptions="Start" HorizontalOptions="End" HeightRequest="50" WidthRequest="50" CornerRadius="14" BorderColor="Silver" BorderWidth="1"/>
   </Grid>
 </PanCake:PancakeView>
 
<!-- You must write here what is explained in the next code block -->
```

## Step 2: Frame and floating button

![Step 2: Frame and floating button](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Frame-and-floating-button-283x300.png)

This second step is necessary to achieve the effect of continuous curves in our design.

### Grid to cover the detailed information

We will start by adding a DataGrid control, followed by the PancakeView. Render the upper-left edge as curved in shape so that the continuity with the previous step is noticeable.

The grid has a background color the same as the image has on the left side. This is important to achieve the expected design and the feel of continuity.

Add a DataGrid control inside the PancakeView to add all the product details. Set the **BackgroundColor** property to **white** to reflect the division of the curves.

Refer to the following code example.

```html
<!--2. Detail information-->
 <Grid Grid.Row="1" HorizontalOptions="FillAndExpand" BackgroundColor="#c6dad4">
   <PanCake:PancakeView CornerRadius="60,0,0,0">
     <Grid RowDefinitions="*" BackgroundColor="White">
        <!-- You must write here what is explained in the next code block -->
     </Grid>
   </PanCake:PancakeView>
 </Grid>
```

### Floating button

As you can see, we have a square button that floats. Let’s see how to create this.

First, within the grid of the previous code block, add a <ScrollView> tag. Within this layout, add another DataGrid control to structure the desired information.

Refer to the following code example.

```html
<ScrollView Grid.Row="0" Padding="0,0,0,90" VerticalScrollBarVisibility="Never">
 <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,*" Padding="30">
   <!-- You must write here what is explained from step number 3 -- >
 </Grid>
</ScrollView>
<!-- Add floating button here -->
```

Now, add the floating button below the ScrollView in the same row that you added the ScrollView. This way, the content will be placed inside the layout, and the button will be placed outside but in the same line. That’s why you see it floating.

**Note:** For more details, refer to the [Simple way to create a Floating Button in Xamarin.Forms](https://askxammy.com/simple-way-to-create-a-floating-button-in-xamarin-forms/ "Simple way to create a Floating Button in Xamarin.Forms") blog by Leomaris Reyes.

```html
<!--Float Button-->
 <Button Grid.Row="0" Text="+" FontAttributes="Bold" FontSize="35" BackgroundColor="#fabfbc" BorderRadius="23" TextColor="White" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Margin="0,0,20,22" VerticalOptions="End"/>
```

## Step 3: Product details

![Step 3: Product details](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Product-details.png)

Let’s continue adding the details of the product.

### Label

Refer to the following code example to render the label.

```html
<!--Title-->
 <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="21" FontAttributes="Bold" Text="Wired On-Ear Headphones" TextColor="#665a5a"/>

<!-- You must write here what is explained in the next code block -->
```

### Counter

Let’s add the [Syncfusion Xamarin.Forms NumericUpDown](https://www.syncfusion.com/xamarin-ui-controls/xamarin-numericupdown "Syncfusion Xamarin.Forms NumericUpDown") control to design the counter.

First, add the **Syncfusion.Xamarin.SfNumericUpDown** NuGet package to all your projects.

**Note:** For more details, refer to [_Xamarin.Forms NumericUpDown control documentation_](https://help.syncfusion.com/xamarin/numericupdown/getting-started "Getting Started with Syncfusion Xamarin.Forms NumericUpDown control")

**![Syncfusion.Xamarin.SfNumericUpDown NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Counter.png)**

Then, add the **Syncfusion.SfNumericUpDown.XForms** namespace in your XAML file.

```html
xmlns:updown="clr-namespace:Syncfusion.SfNumericUpDown.XForms;assembly=Syncfusion.SfNumericUpDown.XForms" x:Class="OnlineStoreApp.Views.DetailPage"
```

That’s all! To add the NumericUpDown control, you now just have to use the alias given to the namespace like in the following code example.

```html
<!--Counter & price-->
 <updown:SfNumericUpDown Grid.Row="1" Grid.Column="0" Value="3" HeightRequest="50" Margin="0,15" BackgroundColor="#f6e1e1" SpinButtonAlignment="Both" TextAlignment="Center">
  <updown:SfNumericUpDown.IncrementButtonSettings>
   <updown:UpDownButtonSettings BackgroundColor="#f8e7e9"/>
  </updown:SfNumericUpDown.IncrementButtonSettings>
  <updown:SfNumericUpDown.DecrementButtonSettings>
   <updown:UpDownButtonSettings BackgroundColor="#f8e7e9"/>
  </updown:SfNumericUpDown.DecrementButtonSettings>
 </updown:SfNumericUpDown>
 
<!-- You must write here what is explained in the next code block -->
```

### Price

Let’s render the price details. Use the **FormattedText** to create the same text with different characteristics in the same label.

```html
<Label Grid.Row="1" Grid.Column="1" VerticalTextAlignment="Center" HorizontalTextAlignment="End">
 <Label.FormattedText>
   <FormattedString>
     <Span Text="$" FontSize="18"/>
      <Span Text="26." FontSize="25" FontAttributes="Bold" />
     <Span Text="99" FontSize="18" />
   </FormattedString>
 </Label.FormattedText>
</Label>
 
<!-- You must write here what is explained in the next code block -->
```

### Description

Refer to the following code example to render the description section.

```html
<!--Description-->
 <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Silver" LineHeight="1.2" Text="Maximizing your personal audio experience has never been easier than with Our Monitor headphones. Built with combat and goodness in mind, there's no need to compromise."/>
 
<!-- You must write here what is explained in the next code block -->
```

## Step 4: Related products

![Step 4: Related products](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Related-products.png)

** ** Finally, let’s add the related products.

### Titles

Refer to the following code to render the title.

```html
<!--Related Products details-->
  <Label Grid.Row="3" Grid.Column="0" FontAttributes="Bold" Text="Related Products" TextColor="#665a5a" Margin="0,20,0,15"/>
  <Label Grid.Row="3" Grid.Column="1" Text="View all" HorizontalOptions="End" TextColor="#d4acaa" Margin="0,20,0,15"/>

<!-- You must write here what is explained in the next code block -->
```

### Related products list

We use the **CollectionView** to display the list. We will use a Frame to make the round edges of each image in the list.

```html
<CollectionView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Never"
                ItemsSource="{Binding products}"
                ItemsLayout="HorizontalList"
                HeightRequest="95">
  <CollectionView.ItemTemplate>
    <DataTemplate>
      <Grid Padding="1,0,5,10">
       <Frame Grid.Column="0" BorderColor="Transparent" HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="110" HasShadow="False" CornerRadius="10" Padding="0" IsClippedToBounds="True">
        <Image Source="{Binding Picture}" Aspect="Fill" />
       </Frame>
      </Grid>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>
 
<!-- You must write here what is explained in the next code block -->
```

### Main features and description

Refer to the following code example to render the main features and descriptions of the products.

```html
<!-- Main features & description-->
  <Label Grid.Row="5" Grid.Column="0" FontAttributes="Bold" Text="Main Features" TextColor="#665a5a"/>
  <Label Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Silver" LineHeight="1.5" Text="Tangle-free - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>
```

And our UI is done! You can see the full screen we built for both Android and iOS devices.

![Replicating an Online Store UI in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Replicating-an-Online-Store-UI-in-Xamarin.Forms2_.png)
<figcaption>Replicating an Online Store UI in Xamarin.Forms</figcaption>

## GitHub reference

To see the complete code, refer to our [Online Store UI in Xamarin.Forms demo on GitHub.](https://github.com/SyncfusionExamples/online-store-app-ui-in-xamarin "Online Store UI in Xamarin.Forms demo on GitHub")

## Conclusion

Thanks for reading! In this blog, we have seen how to replicate an online store UI in Xamarin.Forms with Syncfusion UI controls. Try out the steps here and build your stunning online store UI!

Syncfusion’s [Xamarin](https://www.syncfusion.com/xamarin-ui-controls "Syncfusion Xamarin UI controls") suite offers over 150 UI controls, from basic editors to powerful, advanced controls like [Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts "Xamarin.Forms Charts and Graphs"), [ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview "Xamarin.Forms ListView"), and [Rich Text Editor](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rich-text-editor "Xamarin.Forms Rich Text Editor"). Use them to build elite applications!

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [View PDF Pages as Thumbnails Using Xamarin.Forms PDF Viewer](https://dev.to/syncfusion/view-pdf-pages-as-thumbnails-using-xamarinforms-pdf-viewer-5emc "Blog: View PDF Pages as Thumbnails Using Xamarin.Forms PDF Viewer")
- [Replicating a Game Store UI in Xamarin.Forms](https://dev.to/syncfusion/replicating-a-game-store-ui-in-xamarinforms-3g69 "Blog: Replicating a Game Store UI in Xamarin.Forms")
- [Replicating a Facebook-Like UI in Xamarin](https://dev.to/syncfusion/replicating-a-facebook-like-ui-in-xamarin-10be "Blog: Replicating a Facebook-Like UI in Xamarin")