question

22346713 avatar image
0 Votes"
22346713 asked RobCaplan edited

How can I create RatingBar with Xamarin Forms?

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.



  1. 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.



  1. 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?


dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered KyleWang-MSFT commented

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.

· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for the reply.

But I want to change RatingBar using xamarin PanGestureRecognizer.

It is possible to change the stars by tapping, but there is an error in PanGestureRecognizer and I want to know how to fix it.

For the Nuget package, there is only the xamrin.ios Rating Bar, so I need the xamrin.Form Rating Bar Or the current version of Xamrin is not supported.

0 Votes 0 ·

@22346713 In my test, both Android and iOS starts from zero. Here is a documentation: Invoking Events from Effects you can refer to to get the "touch point position".

0 Votes 0 ·

Even inside a scrollview?
I'll test it. test. thank you.

0 Votes 0 ·
Show more comments