Replicating a Game Store UI in Xamarin.Forms
Tags: xamarin, csharp, dotnet, mobile
Published: 2022-04-21 12:13:37

---
title: Replicating a Game Store UI in Xamarin.Forms
published: true
date: 2022-04-21 11:42:20 UTC
tags: xamarin, csharp, dotnet, mobile
canonical_url: https://www.syncfusion.com/blogs/post/replicating-a-game-store-ui-in-xamarin-forms.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60i42ckwf1gd13tcpdmu.png
---

Howdy! In this blog post, we’ll be replicating a game store UI based on this[Dribbble](https://dribbble.com/shots/15025783-Gameng-Game-Store-App "Dribble Design")[design](https://dribbble.com/shots/15025783-Gameng-Game-Store-App).

We are going to break down this UI, and I’ll explain implementing different segments of the app in the following structure.

![Replicating a Game Store UI in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Replicating-a-Game-Store-UI-in-Xamarin-Forms-4.png)
<figcaption>Replicating a Game Store UI in Xamarin.Forms</figcaption>

**Note** : We will be using the[Syncfusion](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rating "Xamarin.Forms Rating control")[Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rating)[Rating control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rating).

**Let’s start coding!**

## Step 1: The main picture.

![Main Picture in Game Store UI in Xamarin](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Main-Picture-in-Game-Store-UI-in-Xamarin.png)

In this step, in addition to designing the main image, we will also work on the design of the white frame with rounded edges that slightly overlap the main image.

Let’s start by creating this first screen. I’m naming it **GamePage.xaml.**

```html
<!-- Main layout-->
  <Grid RowDefinitions="280,*,Auto">          
    <!-- You must write here what is explained from the steps 1 to 4. -->
  </Grid>
```

Let’s add the image.

```html
<!-- Step 1. Main Picture-->
 <Image Grid.Row="0" Aspect="AspectFill" Source="MainGame.jpeg"/>

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

Now, let’s add the body of the frame. Following are some important points to highlight:

- I used the Margin property with a negative value in the Top position to create the overlap between the main image and the frame (Margin=”0,-15,0,0″).
- As part of the frame, I will add a grid that structures the visual information this frame will be receiving.

```html
<!-- Step 2. Game Overview-->
 <Frame Grid.Row="1" HasShadow="False" CornerRadius="15" Margin="0,-15,0,0">
   <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" Padding="20">
       <!-- You must write here what is explained in step 2. -- >
   </Grid>    
 </Frame>

 <!-- You must write here what is explained in step 3. -- >
```

## Step 2: Game overview.

![Game Overview UI in Xamarin](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Game-Overview-UI-in-Xamarin.png)The second step is made up of the following components:

- Title
- Description
- Like button.

```html
<!--Title, description, and favorite button-->
   <Label Grid.Column="0" Grid.Row="1" Text="Horizon: New Dawn" FontAttributes="Bold"/>
   <Label Grid.Column="0" Grid.Row="2" Text="Guerrilla & Playstation" FontAttributes="Bold" TextColor="Silver"/>
   <Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" VerticalOptions="Center" ImageSource="HeartIcon" HeightRequest="50" WidthRequest="50" CornerRadius="25" BackgroundColor ="#695dd4"/>

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

- Overview and its description.
```html
 <!--Overview & description-->
   <Label Grid.Column="0" Grid.Row="3" Margin="0,30,0,10" Text="Overview" FontSize="16" FontAttributes="Bold"/>
   <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" TextColor="Silver" Text="Experiencia Aloy's entire legendary quest to unravel the mysteries of a world ruled by deadly Machines.

 An outcast from her tribe, the young hunter fights to uncover her past, discover her destiny... and stop a catastrophic threat to the future." />

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

- Rating game list.

We will use a **CollectionView** to add the game list, and then we will add the Rating control inside the CollectionView. To create this, we will use the [Syncfusion Xamarin Rating control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rating "Xamarin.Forms Rating control"), as we said earlier in this blog post. Add the **Syncfusion.Xamarin.SfRating** NuGet package to all your projects.  (You can read more information about it in this [control documentation](https://help.syncfusion.com/xamarin/rating/getting-started "Getting Started with Xamarin Rating Control").)

I’m going to take a moment to explain the implementation of this Rating control, which you’ll see implemented in the second block of code, inside the CollectionView.

First, add the NuGet package.

![Syncfusion Xamarin Rating NuGet Package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Syncfusion-Xamarin-Rating-NuGet-Package.png)Then, add the following namespace in your XAML file.

```html
xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
```

And done! To add the Rating control, you just have to use the alias given to the namespace.

Refer to the following code example for the complete implementation of the CollectionView and the components inside it.

```html
  <!--Step 3. Rating and Price-->
   <!-- Rating game list-->
   <CollectionView VerticalScrollBarVisibility="Never" Margin="0,15,0,0"
                       Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5" 
                       ItemsSource="{Binding Games}" >
   <CollectionView.ItemTemplate>
     <DataTemplate> 
       <Grid ColumnDefinitions="Auto,Auto,*" RowDefinitions="Auto, Auto" Margin="0,0,0,20">
         <Frame Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Margin="0,0,10,0" BorderColor="Transparent" HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="50" HeightRequest="50" HasShadow="False" CornerRadius="8" Padding="0" IsClippedToBounds="True">
            <Image Source="{Binding Picture}" Aspect="AspectFill"/>
         </Frame>
         <Label Grid.Row="0" Grid.Column="1" Text="{Binding Title}" FontAttributes="Bold"/>
         <Label Grid.Row="1" Grid.Column="1" Text="{Binding Status}" FontAttributes="Bold" TextColor="Silver"/>
         <!--Rating component--> 
         <rating:SfRating Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" ItemCount="5" Value="{Binding Rating}" ReadOnly="true" ItemSize="15" ItemSpacing="2" HorizontalOptions=" End">
           <rating:SfRating.RatingSettings>
             <rating:SfRatingSettings RatedStroke="Transparent" RatedFill="#242077"/>
           </rating:SfRating.RatingSettings>
         </rating:SfRating>

      </Grid>  
    </DataTemplate>
   </CollectionView.ItemTemplate>
  </CollectionView>
```

## Step 3: Rating and price.

![Rating and Price UI in Xamarin](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Rating-and-Price-UI-in-Xamarin.png)Do you remember the frame created in step 1? Now, we are going to add the code outside of that frame.

**Note:** Here, we have used **FormattedString** to add more than one style to text of the same label.

```html
<!-- Price-->
<Frame Grid.Row="2" BackgroundColor="#f2f1f8" CornerRadius="35" VerticalOptions="End" HasShadow="False" HeightRequest="80" Margin="0,-10,0,0">
 <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="*,Auto" Padding="10,5">
   <Label Grid.Column="0" Grid.Row="1">
    <Label.FormattedText>
      <FormattedString>
        <Span Text="Price: " FontAttributes="Bold"/>
        <Span Text="30.00" TextColor="#9099aa" TextDecorations="Strikethrough" FontAttributes="Bold"/>
      </FormattedString>
   </Label.FormattedText>
  </Label>
  <Label Grid.Column="0" Grid.Row="2" Text="$20.00" FontSize="20" TextColor="#695cd4" FontAttributes="Bold"/>
  <Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="#695cd4" Margin="0,10" TextColor="White" Text="Add to Cart" CornerRadius="10" WidthRequest="180"/> 
 </Grid>
</Frame>
```

Our first screen is done!

## Step 4: Game list.

![Game List UI in Xamarin](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Game-List-UI-in-Xamarin.png)Since we are building a new screen, let’s start with the name of our XAML. I am naming it **FavoritePage.xaml**. Then, let’s continue with the main layout.

```html
<!-- Main layout-->
  <Grid RowDefinitions="Auto,Auto,*" Padding="20,55,20,0">          
     <!-- You must write here what is explained in the step number 4 -- >
  </Grid>
```

### SearchBar

** ** This screen has a search bar, followed by a label that displays the total results in the list. Let’s start to code these components.

```html
<SearchBar Grid.Row="0" BackgroundColor="Transparent" />
  <Label Grid.Row="1" Text="Found 32 result" FontAttributes="Bold" Margin="10,20,0,0"/>            
  <!-- You must write here what is explained in the next code block. -- >
```

### CollectionView and Rating control

Finally, add the structure of the list using a CollectionView. We will use the [Syncfusion Xamarin Rating control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rating "Xamarin.Forms Rating control") to display the stars.

```html
 <!-- 4. Game list-->
  <CollectionView VerticalScrollBarVisibility="Never" Grid.Row="2"
                  ItemsSource="{Binding Favorites}" >
    <CollectionView.ItemTemplate>
      <DataTemplate> 
        <Grid ColumnDefinitions="*" Padding="0,20" VerticalOptions="Center">
           <Frame Grid.Column="0" HorizontalOptions="Fill" HasShadow="False" BackgroundColor="#f2f1f8" CornerRadius="10">
              <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto,Auto" Padding="125,0,0,0">
                  <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Text="{Binding Title}" FontAttributes="Bold"/>
                  <Label Grid.Column="0" Grid.Row="1" Text="{Binding Description}" FontAttributes="Bold" TextColor="Silver"/>
                  <Label Grid.Column="0" Grid.Row="2" Text="{Binding Rating}" FontAttributes="Bold" />
                  <Label Grid.Column="1" Grid.Row="2" Text="{Binding Price}" FontAttributes="Bold" FontSize="18" TextColor="#8079c4"/>
              </Grid>
           </Frame>
           <Frame Grid.Column="0" BorderColor="Transparent" HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="125" HeightRequest="135" HasShadow="False" CornerRadius="10" Padding="0" IsClippedToBounds="True">
              <Image Source="{Binding Picture}" Aspect="Fill"/>
           </Frame>
         </Grid>
       </DataTemplate>
     </CollectionView.ItemTemplate>
  </CollectionView>
```

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

And our second UI is done! Here, you can see the full screens we have built.

## Resource

To see the complete code structure of this project, refer to the [Replicating a Game Store UI in Xamarin.Forms demo on GitHub](https://github.com/SyncfusionExamples/game-store-app-ui-in-xamarin "Replicating a Game Store UI in Xamarin.Forms demo on GitHub").

## Conclusion

Thank you for reading this blog! I hope you find this useful in developing a UI for a game store mobile app in Xamarin.Forms. The Syncfusion Xamarin.Forms Rating control made it easy to implement the rating section in the app. Try replicating these steps and share your feedback.

Syncfusion’s [Xamarin](https://www.syncfusion.com/xamarin-ui-controls "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"), [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!

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

- [Replicating a Fashion UI in Xamarin.Forms](https://www.syncfusion.com/blogs/post/replicating-a-fashion-ui-in-xamarin-forms.aspx "Replicating a Fashion UI in Xamarin.Forms blog")
- [Replicating an App Login Screen in Xamarin.Forms](https://www.syncfusion.com/blogs/post/replicating-an-app-login-screen-in-xamarin-forms.aspx "Replicating an App Login Screen in Xamarin.Forms blog")
- [Replicating a Social Profile UI in Xamarin.Forms](https://www.syncfusion.com/blogs/post/replicating-a-social-profile-ui-in-xamarin-forms.aspx "Replicating a Social Profile UI in Xamarin.Forms blog")
- [Creating a Floating Label Layout in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/post/creating-a-floating-label-layout-in-xamarin-forms-dataform.aspx "Creating a Floating Label Layout in Xamarin.Forms DataForm blog")