Let’s Replicate an Online Store UI in Xamarin.Forms

Suresh Mohan - Jun 13 '22 - - Dev Community

Howdy! In this blog, we’ll replicate an online store UI based on this 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

Replicating an Online Store UI in Xamarin.Forms

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

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.

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

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

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. Add the image covering both columns of the grid (using Grid.ColumnSpan=”2″).

Refer to the following code.

<!-- 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 -->
Enter fullscreen mode Exit fullscreen mode

Step 2: Frame and floating button

Step 2: Frame and floating button

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.

<!--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>
Enter fullscreen mode Exit fullscreen mode

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 tag. Within this layout, add another DataGrid control to structure the desired information.

Refer to the following code example.

<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 -->
Enter fullscreen mode Exit fullscreen mode

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 blog by Leomaris Reyes.

<!--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"/>
Enter fullscreen mode Exit fullscreen mode

Step 3: Product details

Step 3: Product details

Let’s continue adding the details of the product.

Label

Refer to the following code example to render the label.

<!--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 -->
Enter fullscreen mode Exit fullscreen mode

Counter

Let’s add the 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

Syncfusion.Xamarin.SfNumericUpDown NuGet package

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

xmlns:updown="clr-namespace:Syncfusion.SfNumericUpDown.XForms;assembly=Syncfusion.SfNumericUpDown.XForms" x:Class="OnlineStoreApp.Views.DetailPage"
Enter fullscreen mode Exit fullscreen mode

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.

<!--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 -->
Enter fullscreen mode Exit fullscreen mode

Price

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

<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 -->
Enter fullscreen mode Exit fullscreen mode

Description

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

<!--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 -->
Enter fullscreen mode Exit fullscreen mode

Step 4: Related products

Step 4: Related products

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

Titles

Refer to the following code to render the title.

<!--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 -->
Enter fullscreen mode Exit fullscreen mode

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.

<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 -->
Enter fullscreen mode Exit fullscreen mode

Main features and description

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

<!-- 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. "/>
Enter fullscreen mode Exit fullscreen mode

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

Replicating an Online Store UI in Xamarin.Forms

GitHub reference

To see the complete code, refer to our 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 suite offers over 150 UI controls, from basic editors to powerful, advanced controls like Charts, ListView, and Rich Text Editor. Use them to build elite applications!

For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
10 Things You Learned In Kindergarden That Will Aid You In Obtaining Accident Lawyer Boston
Image
The Three Greatest Moments In Asbestos Lawsuit Settlement Amount History
Image
5 Things That Everyone Is Misinformed About About Gas Boiler Engineer Near Me
Image
5 Qualities That People Are Looking For In Every Accident Lawyers
Image
Use Dishwasher Repair Services in North Miami Beach

dishwasher, repair, services, dryer
Image
Dog dental snacks are an excellent way
Image
Pusat bantuan layanan bank woori saudara +62 812 1411 9209

webdev, ai, api, database
Image
upvc Door Panels With Cat Flap
Image
Where to buy Flash Btc

wheretobuyflashbtc, flashbtc, flashusdt, flashbtcgeneratorsoftware
Image
The Sage Advice On Personal Injury Lawyer From A Five-Year-Old
Image
10 Facts About Gas Safe Registered Engineer Near Me That Will Instantly Put You In The Best Mood
Image
15 Terms That Everyone In The Lawyer Injury Accident Industry Should Know
Image
15 Unquestionably Reasons To Love Asbestos Disease Mesothelioma
Image
10 Undeniable Reasons People Hate Lawyers For Accidents At Work
Image
Gas Central Heating Engineers Strategies From The Top In The Industry
Image
10 Accident Lawyers In My Area Meetups You Should Attend
Image
10 Places To Find Coffee Filter Maker
Image
Wall Electric Fireplace Insert Explained In Fewer Than 140 Characters
Image
How To Become A Prosperous Electric Fireplace With Wall Mount If You're Not Business-Savvy
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .