Spanish version:https://medium.com/@rretamal.dev/c%C3%B3mo-hacer-un-popup-animado-de-3-estrellas-en-net-maui-y-lottie-859bd310a4df
On different gamified apps and games we can see the typical 3-star system that indicates how well a user did an action, pass a level, etc, in this case I wanted to do something like that on .Net MAUI.
There are different alternatives for this case but given that the integration with Lottie is actually pretty easy (time is a scarce resource) and because of the quality of the animations I wanted to do an example.
For that the first step is to create a project on Visual Studio 2022:
Next we need to select the framework, I used .Net 7 and after that we need to put a name for the new project:
Once those steps are completed we will see the standard MAUI project that shows a button with a couple of labels and an image:
Now we will add the required Nuget packages:
- CommunityToolkit.Maui: to show the popup
- Skiasharp.Extended.UI.Maui: to show the animation
To get the animation we will visit Lottie’s web https://lottiefiles.com/ and we will search for a star animation:
I used the first image but there are many more. In this case what we need is the json file of the animation and we will save it in Raw’s folder (Resources -> Raw).
Once the file is in the folder we need to create a ContentView to encapsulate the Star animation, for that do a right click in the project and then select Add -> New File, there we will select on MAUI’s templates the .Net MAUI ContentView (XAML), in my case I used StarRating:
In this file we need to change a couple of things, instead of using the ContentView we will modify it to a Community Toolkit popup, and for that we must add the Toolkit and Skiasharp references:
xmlns:skia=”clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI”
xmlns:toolkit=”http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
The final XAML file will look like the following way:
In the file the ContentView was modified for a toolkit:Popup and inside there is a Frame to give a white background with round corners and inside that control there is a Grid with 3 columns, one for each star. Columns 1 and 3 have a top margin to give an arc design.
Next there is a SKLottieView, that is the control that we need to show the animation. The properties that we are interested for this example are:
- Source: references the animation file, in this case star.json
- RepeatCount: value is 0 because we need to execute the animation only one time without any repetition
- IsAnimationEnabled: is false because the animation will not star by default until we execute the routine for that
The CS file will look like the following:
In the CS file we will have a method called ShowStarAnimation that will execute an initial wait and is going to activate each star animation after a proper pause between each one.
So what’s next? we need to invoke the popup on the main page. I removed all the default content and just left a button:
The .cs file will be like the following:
In the cs file we capture the click event of the button and then initialize the popup executing also the animation method.
The final result is the following:
You can find the code here:
Happy Coding!
