Replicating a Game Store UI in Xamarin.Forms

Suresh Mohan - Apr 21 '22 - - Dev Community

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

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

Replicating a Game Store UI in Xamarin.Forms

Note : We will be using theSyncfusionXamarinRating control.

Let’s start coding!

Step 1: The main picture.

Main Picture in Game Store UI in Xamarin

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.

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

Let’s add the image.

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

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

Step 2: Game overview.

Game Overview UI in XamarinThe second step is made up of the following components:

  • Title
  • Description
  • Like button. 
<!--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. -- >
Enter fullscreen mode Exit fullscreen mode
  • Overview and its description. 
 <!--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.-- >
Enter fullscreen mode Exit fullscreen mode
  • 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, 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.)

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 PackageThen, add the following namespace in your XAML file.

xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
Enter fullscreen mode Exit fullscreen mode

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.

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

Step 3: Rating and price.

Rating and Price UI in XamarinDo 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.

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

Our first screen is done!

Step 4: Game list.

Game List UI in XamarinSince 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.

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

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

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

Replicating a Game Store UI in Xamarin.Forms

Replicating a Game Store UI in Xamarin.Forms

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.

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

Image
7 Simple Changes That Will Make The Biggest Difference In Your Lightweight Self Propelled Wheelchairs
Image
obd2scannernet OBD2 Scanner
Image
Why care for a high performance dedicated server?

servers, javascript
Image
🚀 Motion Scape With GSAP

gsap, nextjs, animation, webdev
Image
Amazing experience with Hacktoberfest 💻😍

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
Embracing the Power of a Healthy Smile at AJ Dental Care
Image
Day 22: Distributed Training in Large Language Models

llm, 75daysofllm, nlp
Image
Axios vs Fetch: Which HTTP Client to Choose in JS?

http, node, api
Image
My Femboy Roommate APK – Complete Guide & Features
Image
Llama 3.1 Nemotron 70B - Quirks and Features

genai, llm, ai, machinelearning
Image
Cisza i Spokój: Jak Wyciszyć Ściany i Odmienić Swoje Wnętrze
Image
Sistem Registrasi Di Agen Judi Online Yang Memiliki lisensi Sah
Image
berikut istilah krusial di perjudian slots online
Image
NBA2King: A Trusted Source for NBA 2K25 MT

nba2k25, nba2k25mt, nba2king
Image
This Is What Coffee Filter Maker Will Look In 10 Years
Image
World Best Web Development Company

webdev, web, webdevelopmentcompany, worldbestweb
Image
c# Clean Code: Best Practices for new, Operators, and using

cleancode, cleancoding, csharp, dotnet
Image
Revolutionizing Retail Operations with OpenTeQ’s NetSuite Technical Consultant
Image
Zatrzymaj Hałas: Sztuka Wyciszania Ścian dla Cichego Domu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .