.NET MAUI: Create a simple rating control
Sometimes you need a simple control to show a rating inside of your app. In this blog post I will show you how you can easily create a simple rating control in .NET MAUI for all platforms.
To implement such a rating control we need to prepare some stuff. Due to the fact that I will use
Labels with a font icon, we need to download the font first. Basically you can take your favorite font, but in my case I will use the free Material Design Icons font, which can be download from the website materialdesignicons.com.
You can just unzip the downloaded file and you will find the
ttf file in the folder called
fonts. Now that we have the font file, we open another tab and navigate to andreinitescu.github.io/IconFont2Code. On this page we can simply upload the font file and the website will create a C# file for us containing all the different glyphs. So we don’t need to check for the code to get a corresponding glyph, we can simply use the textual representation from this file.
Just download the file, because we need this later.
Create the rating control
Now it is time to start Visual Studio 2022. Due to the fact that we will add the rating control to a .NET MAUI application, we need to start the Preview version of VS 2022. You can either create a new .NET MAUI application or just open your existing solution.
Just move the
materialdesignicons-webfont.ttf file into the
Fonts folder, which is part of every default .NET MAUI app. Make sure that the
Build Action is set to
MauiFont. We need to register the font in the
MauiProgram.cs file. If you open this file you see that there are already two fonts registred. We just add another line.
We will now create a new folder called
Common and inside that folder we will create a new class with the name
MaterialDesignIconsFont. You remember that we’ve downloaded the C# file containing all the font glyphs? Now we just copy the content into our newly created class.
Common folder we will create another file called
StarState. This file contains an enumaration of different states of the star. There are three different states: Either the star is empty (represented just by the outline) or the star is half filled and last but not least the star is completly filled.
Now it is time to create the
SimpleRatingControl. Therefore we create a new folder called
Controls and inside that folder a class called
SimpleRatingControl. Basically our control is a
HorizontalStackLayout so just use this as the base class.
Let’s think about the properties which should be available. First of all we need the
CurrentValue and also the
Amount, so how many stars should be visible in total. In addition we also need the size and color of the stars. The following code snippet shows the whole class. But don’t worry I will explain the functionality later.
Let’s talk about the helper methods. The method
ClampValue makes sure that the
CurrentValue and the
Amount are matching. By validating that
CurrentValue is between
The next helper method is
CreateStarLabel and as you might have guessed it will create the
Label which then will be added to our
HorizontalStackLayout. We need to make sure that we set the
FontFamily to our added font and also decide which
Text should be shown. Luckily there is a glyph for each state.
The whole magic is happing in the
UpdateLayout method. First we remove all the children within the
HorizontalStackLayout. Then we need to calculate the star state. For this we just check the decimal part of
CurrentValue. If the value is below
.25 we don’t need to do anything. If this value is between
.75 we need to draw a half star. And if the value is greater than
.75 we need to draw a full star.
Let’s see the result
Now it is time to take a look at our control. Just open the
MainPage and remove the whole content. Make sure that you also cleanup the code-behind part, because otherwise it results in an error. We can simply add our namespace and use the
Here is the result on Windows:
And here is the same XAML on Android:
As you have seen we created a simple rating control just by using an icon font and a custom control based on a
You can find the whole source-code in my GitHub repository. Feel free to fork the repository and improve it.
This article is my contribution to #MAUIUIJULY, which is basically a series of blog posts where every day of July a .NET MAUI community member posts something about .NET MAUI and UI. You can find the list with all available blog posts on this website.
You can also find some more blog posts on my personal blog tsjdev-apps.de regarding this topic.