Questions regarding sfRating control

[Naweed Akram]

Hi,

I have started using Suncfusion UWP controls in my upcoming app. I have a few questions regarding sfRating control:

1) How do I change the color of the stars? The default is BLUE. I want to display them as YELLOW. I tried the Foreground property but this doesn't seem to be changing the star colors. 

2) How do I change the size of the stars? For my requirement, the star size is too big. I have a smaller space to display the rating control. I tried playing with the Height property (reducing it from the default 28px) of the rating control, but that just clips the whole control.

3) How do I use this just to display the rating? I do not want user interaction or ability for them to change or rate it. I want it as display only control. I tried with IsReadOnly property but this does not work. I have currently achieved this using IsHitTestVisible=False. But, I believe that this is not the best way around this.

Any idea?

Thanks

Naweed

[Naweed Akram]

This is how I have solved it.

<syncfusion:SfRating Value="{x:Bind ShowRating}" ItemsCount="5" HorizontalAlignment="Right" VerticalAlignment="Center"

Precision="Exact" Foreground="Yellow" IsHitTestVisible="False"

IsReadOnly="True">

<syncfusion:SfRating.ItemContainerStyle>

<Style TargetType="syncfusion:SfRatingItem">

<Setter Property="Height" Value="18"/>

<Setter Property="Width" Value="18"/>

<Setter Property="RatedFill" Value="Yellow"/>

</Style>

</syncfusion:SfRating.ItemContainerStyle>

</syncfusion:SfRating>

[Sugapriya Mariappan]

Hi Naweed,

Thank you for contacting Syncfusion support

Query #1: How do I change the color of the stars?

To change the color of the SfRatingItem , use the below three properties of the SfRatingItem according to the state

RatedFill-Fills the rated area with the specified color
UnRatedFill-Fills the Unrated area with the specified color
PointerOverFill-Fills the MouseOverArea with the specified color

Query #2: How do I change the size of the stars?

Yes, you can change the size of SfRatingItem by using Height and Width property as you done in your update.

Query #3: How do I use this just to display the rating?

In order to prevent user interaction with the control, set IsReadOnly property of the SfRating to true. Since you have stated that this property is not working properly, could you please share more information about this issue? This would help us to proceed further on this.

Please let us know if you have any questions

Regards,
M.Sugapriya

[Naweed Akram]

Hi,

Plz see the code below:

<syncfusion:SfRating Value="{x:Bind ShowRating}" ItemsCount="5" HorizontalAlignment="Right" VerticalAlignment="Center"

Precision="Exact" Foreground="Yellow" IsHitTestVisible="False"

IsReadOnly="True">

<syncfusion:SfRating.ItemContainerStyle>

<Style TargetType="syncfusion:SfRatingItem">

<Setter Property="Height" Value="18"/>

<Setter Property="Width" Value="18"/>

<Setter Property="RatedFill" Value="Yellow"/>

</Style>

</syncfusion:SfRating.ItemContainerStyle>

</syncfusion:SfRating>

[Sugapriya Mariappan]

Hi Naweed,

Sorry for the inconvenience caused

We have seen the code which you have sent in your last update. When we set IsHitTestVisible property as False,then the control will not respond to any mouse related events and by setting IsReadOnly as True, the tooltip will be visible and also the PointerOverFill will change. To avoid this changes done in tooltip and PointerOverFill, set ShowTooltip property as False and color for the PointerOverFill and PointerOverStroke, so that control would not have any mouse interaction.

Please download the sample from the below link
Sample link:sfratingsample

Please let us know if you need any other assistance

Regards,
M.Sugapriya

[Naweed Akram]

Thanks. Issue resolved. Here is my final piece of code which works as expected:

<syncfusion:SfRating Value="{x:Bind ShowRating, Mode=OneWay}" x:Phase="2" ItemsCount="5" HorizontalAlignment="Right" VerticalAlignment="Center"

Precision="Exact" Foreground="Yellow" ShowToolTip="False" IsReadOnly="True" Margin="10,0,10,0">

<syncfusion:SfRating.ItemContainerStyle>

<Style TargetType="syncfusion:SfRatingItem">

<Setter Property="Height" Value="18"/>

<Setter Property="Width" Value="18"/>

<Setter Property="RatedFill" Value="Yellow"/>

<Setter Property="PointerOverFill" Value="Yellow"/>

<Setter Property="PointerOverStroke" Value="Transparent"/>

</Style>

</syncfusion:SfRating.ItemContainerStyle>

</syncfusion:SfRating>

[Sugapriya Mariappan]

Hi Naweed,

Thank you for your update.

Please let us know if you need any other assistance

Regards,
M.Sugapriya