.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.
Preparation
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.
In the 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 0 and Amount.
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 .25 and .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 SimpleRatingControl.
Here is the result on Windows:
And here is the same XAML on Android:
Conclusion
As you have seen we created a simple rating control just by using an icon font and a custom control based on a HorizontalStackLayout.
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.
