Howdy! In this blog post, we’ll be replicating a game store UI based on this Dribbble design.

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 Note: We will be using the Syncfusion Xamarin Rating control.

Let’s start coding!

Step 1: The main picture.

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.

```

```

Let’s add the image.

```

```

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.

```

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

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

Step 2: Game overview. The second step is made up of the following components:

• Title
• Description
• Like button.

```

<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." />

  </Grid>  
</DataTemplate>

```

Step 3: Rating and price. 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.

```

```

Our first screen is done!

Step 4: Game list. 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.

```

<!-- You must write here what is explained in the step number 4 -- > ```

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.

<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 to display the stars.

<!-- 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>

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

Replicating a Game Store UI in Xamarin.Forms Resource To see the complete code structure of this project, refer to the 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 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!

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

Related blogs * Replicating a Fashion UI in Xamarin.Forms * Replicating an App Login Screen in Xamarin.Forms * Replicating a Social Profile UI in Xamarin.Forms * Creating a Floating Label Layout in Xamarin.Forms DataForm