Step to create rating-bar in Xamarin Form using Custom Control

RatingBar Control- is a cross-platform plugin used for selecting the rating.

 

How To Use

Available on NuGet: https://www.nuget.org/packages/RatingBarControl/1.0.0
Install this Plugin in your Xamarin Form Project.

Namespace:  xmlns:ratingbarcontrol="clr-namespace:RatingBarControl;assembly=RatingBarControl"

Implementation Example

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:ratingbarcontrol="clr-namespace:RatingBarControl;assembly=RatingBarControl"
             x:Class="TestApp.MainPage">
    <StackLayout Margin="0,10,0,0" HorizontalOptions="Center" >
        <Label Text="{Binding Source={x:Reference rtControl},Path=SelectedStarValue,StringFormat='Seleced Star: {0}'}" />
        <ratingbarcontrol:RatingBar StarHeightRequest="35" 
                                    StarWidthRequest="35"  
                                    EmptyStarImage="emptystar" 
                                    FillStarImage="fillstar" 
                                    x:Name="rtControl"/>
    </StackLayout>
</ContentPage>
 

RatingBar Control Property

1. StarHeightRequest: Used to set the Height of the Image.
2. StarWidthRequest: Used to set the Width of the Image.
3. EmptyStarImage: Specify the image name of the empty star.
4. FillStarImage: Specify the image name of the filled star.
5. SelectedStarCommand: Use this command to get the selected star value in ViewModel.
6. SelectedStarValue: Used to set default selected star value.
7. FlowDirection: Used to set the Rating Bar Control Flow Direction, either Left to Right or Right to left.

1. Spacing: Used to set the Spacing between stars.

How to display the selected star rating

Write the Following code to display the selected star rating

<Label Text="{Binding Source={x:Reference rtControl},Path=SelectedStarValue,StringFormat='Seleced Star: {0}'}" /
<ratingbarcontrol:RatingBar StarHeightRequest="35" 
          StarWidthRequest="35"  
          EmptyStarImage="emptystar" 
          FillStarImage="fillstar" 
          x:Name="rtControl"/>

How to get the selected rating

SelecedStarCommand: Use this command to get the selected star value in ViewModel.

Design Side:

<Label Text="{Binding SelectedStarValue,StringFormat='Selected Star is : {0}'}" />
<ratingbarcontrol:RatingBar StarHeightRequest="35" 
                  StarWidthRequest="35"  
                  EmptyStarImage="emptystar" 
                  FillStarImage="fillstar" 
                  SelectedStarCommand="{Binding SelectedStarCommand}"
                  x:Name="rtControl"/>

Code Behind (ViewModel):

private int _selectedStarValue;
public int SelectedStarValue
{
     get => _selectedStarValue;
     set => SetProperty(ref _selectedStarValue, value);
}
 
public ICommand SelectedStarCommand => new Command<int>((selectedStarValue) =>
{
      SelectedStarValue = selectedStarValue;
});