Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (29)Angular  (64)ASP.NET  (48)ASP.NET Core  (72)ASP.NET MVC  (88)Azure  (31)Blazor  (130)DocIO  (22)Essential JS 2  (76)Essential Studio  (168)File Formats  (25)Flutter  (121)JavaScript  (165)Microsoft  (107)PDF  (64)React  (45)Succinctly series  (126)Syncfusion  (534)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (29)Windows Forms  (57)WinUI  (38)WPF  (131)Xamarin  (142)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (55)Cloud  (11)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (53)Development  (322)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (9)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (268)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (8)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (33)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (20)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (87)UI  (183)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (292)What's new  (177)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Replicating a Game Store UI in Xamarin.Forms

Replicating a Game Store UI in Xamarin.Forms

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

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>

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

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

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

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>

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>

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>

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
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 ChartsListView, and Rich Text Editor. Use them to build elite applications!

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

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top