How can I create RatingBar with Xamarin Forms?

Question

I want to make a Star RatingBar.

So https://xamarincodingtutorial.blogspot.com/2019/04/p_29.html I made a TestApp referring to this site.

But there's a problem.

1. It is wrong to bring the initial value of TotalX values of iOS and Android.

Andriod gets the TotalX values at the beginning and end of RattingBar well, but ios has a problem where TotalX starts at zero, no matter where it starts.

2. Inside the CollectionView (ScrollView), PanGesture has inconsequent coordinates.

In CollectionView (ScrollView), the starting value of the TotalX value in PanGesture begins as a negative value from -50 to -200.

It doesn't work consistently and even has loading time.

So, after the view is created, it operates after about 10 seconds to 1 minute of waiting time.

3. Do you have an example or Nuget package to create a Star Ratting Bar other than syncfusion?

I'm not in a situation where I can use syncfusion, so is there anyone else who knows how to implement Star Ratting Bar?

Answer 1

Hi 22346713,

Welcome to our Microsoft Q&A platform!

A simple way to achieve "RattingBar" is using Labels and change their TextColor by subscribing to TapGestureRecognizer_Tapped.
Here is the demo you can refer to.
xaml:

<StackLayout Orientation="Horizontal" x:Name="rattingBar">  
    <Label Text="★" FontSize="Large" x:Name="star1" StyleId="star1">  
        <Label.GestureRecognizers>  
            <TapGestureRecognizer  
                Tapped="TapGestureRecognizer_Tapped"/>  
            </Label.GestureRecognizers>  
    </Label>  
    <Label Text="★" FontSize="Large" x:Name="star2" StyleId="star2">  
        <Label.GestureRecognizers>  
            <TapGestureRecognizer  
                Tapped="TapGestureRecognizer_Tapped"/>  
        </Label.GestureRecognizers>  
    </Label>  
    <Label Text="★" FontSize="Large" x:Name="star3" StyleId="star3">  
        <Label.GestureRecognizers>  
            <TapGestureRecognizer  
                Tapped="TapGestureRecognizer_Tapped"/>  
        </Label.GestureRecognizers>  
    </Label>  
    <Label Text="★" FontSize="Large" x:Name="star4" StyleId="star4">  
        <Label.GestureRecognizers>  
            <TapGestureRecognizer  
                Tapped="TapGestureRecognizer_Tapped"/>  
        </Label.GestureRecognizers>  
    </Label>  
    <Label Text="★" FontSize="Large" x:Name="star5" StyleId="star5">  
        <Label.GestureRecognizers>  
            <TapGestureRecognizer  
                Tapped="TapGestureRecognizer_Tapped"/>  
        </Label.GestureRecognizers>  
    </Label>  
</StackLayout>  

xaml.cs:

public MainPage()  
{  
    InitializeComponent();  
    BackgroundColor = Color.Black;  
  
    Reset();  
}  
  
void Reset()  
{  
    ChangeTextColor(5, Color.Gray);  
}  
  
void ChangeTextColor(int starcount, Color color)  
{  
    for (int i = 1; i <= starcount; i++)  
    {  
        (FindByName($"star{i}") as Label).TextColor = color;  
    }  
}  
  
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
{  
    Reset();  
    Label clicked = sender as Label;  
    ChangeTextColor(Convert.ToInt32(clicked.StyleId.Substring(4, 1)), Color.Yellow);  
}  

Besides, by Googling keyword "Xamarin.Forms Rattingbar", you will find the nugets you want.

As to the problems occured in your "TestApp", please post a comment in the link which you referred to.

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.