Developing a New Custom Control Called RatingView

The custom RatingView control will be rating icons that the users can select, to give a rating of between 1 and 5. This custom view can be reused again and again across different pages of your application.

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.RatingView">

    <StackLayout Orientation="Horizontal"
                 Spacing="5"
                 HorizontalOptions="Center"
                 VerticalOptions="Center">

        <!-- Creating five tappable star images for the rating -->
        <Image x:Name="Star1" Source="star_empty.png" WidthRequest="40" HeightRequest="40" GestureRecognizers="{x:StaticResource TapGestureRecognizer}" />
        <Image x:Name="Star2" Source="star_empty.png" WidthRequest="40" HeightRequest="40" GestureRecognizers="{x:StaticResource TapGestureRecognizer}" />
        <Image x:Name="Star3" Source="star_empty.png" WidthRequest="40" HeightRequest="40" GestureRecognizers="{x:StaticResource TapGestureRecognizer}" />
        <Image x:Name="Star4" Source="star_empty.png" WidthRequest="40" HeightRequest="40" GestureRecognizers="{x:StaticResource TapGestureRecognizer}" />
        <Image x:Name="Star5" Source="star_empty.png" WidthRequest="40" HeightRequest="40" GestureRecognizers="{x:StaticResource TapGestureRecognizer}" />

    </StackLayout>
</ContentView>

namespace MauiAppExample
{
    public partial class RatingView : ContentView
    {
        private int _rating;

        public RatingView()
        {
            InitializeComponent();
            SetupTapGestureRecognizers();
        }

        // Setup tap gesture recognizers for each star image
        private void SetupTapGestureRecognizers()
        {
            Star1.GestureRecognizers.Add(CreateTapGestureRecognizer(1));
            Star2.GestureRecognizers.Add(CreateTapGestureRecognizer(2));
            Star3.GestureRecognizers.Add(CreateTapGestureRecognizer(3));
            Star4.GestureRecognizers.Add(CreateTapGestureRecognizer(4));
            Star5.GestureRecognizers.Add(CreateTapGestureRecognizer(5));
        }

        // Method to create tap gesture recognizer
        private TapGestureRecognizer CreateTapGestureRecognizer(int starValue)
        {
            var tapGesture = new TapGestureRecognizer();
            tapGesture.Tapped += (s, e) => OnStarTapped(starValue);
            return tapGesture;
        }

        // Method to handle star tap event
        private void OnStarTapped(int rating)
        {
            _rating = rating;
            UpdateStarImages();
        }

        // Method to update star images based on the current rating
        private void UpdateStarImages()
        {
            Star1.Source = _rating >= 1 ? "star_filled.png" : "star_empty.png";
            Star2.Source = _rating >= 2 ? "star_filled.png" : "star_empty.png";
            Star3.Source = _rating >= 3 ? "star_filled.png" : "star_empty.png";
            Star4.Source = _rating >= 4 ? "star_filled.png" : "star_empty.png";
            Star5.Source = _rating >= 5 ? "star_filled.png" : "star_empty.png";
        }
    }
}

• Rating Property:
• The _rating field to denote the chosen rating by the user.
• SetupTapGestureRecognizers Method:
• Synchronized with the image layout, it contributes a tap gesture recognizer to each star image. This gesture recognizer responds to taps and triggers the OnStarTapped method.
• CreateTapGestureRecognizer Method:
• Adds a new TapGestureGestureRecognizer and links a proper handler to the stars.
• OnStarTapped Method:
• Assigns the rating to the value of the tapped star and changes star images for this rating.
• UpdateStarImages Method:
• Updates the current picture of star filled or star empty depending on the current rating.

Using the Custom View in a Page

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiAppExample"
             x:Class="MauiAppExample.MainPage">

    <StackLayout Padding="20" Spacing="30" VerticalOptions="Center">

        <Label Text="Please rate our service" FontSize="Large" HorizontalOptions="Center" />

        <!-- Using the custom RatingView -->
        <local:RatingView x:Name="RatingControl" />

        <Button Text="Submit Rating"
                Clicked="OnSubmitClicked"
                HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

namespace MauiAppExample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnSubmitClicked(object sender, EventArgs e)
        {
            // Access the rating from the RatingView
            // Assuming RatingView exposes the rating as a property
            await DisplayAlert("Thank You!", "Your rating has been submitted.", "OK");
        }
    }
}

Benefits of Custom Views

1. Code Reusability: It is also useful to encapsulate related UI elements into a custom view as a means of achieving version and time efficiency.
2. Easier Maintenance: It also means that whenever the custom view is updated, the changes take effect everywhere it is applied making updating much simpler and quicker.
3. Customizable UI Elements: Complexity of UI being encapsulated and ability to reuse it plays a great role in creating sophisticated User interface at a systematic way.