We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Questions regarding sfRating control

Thread ID:

Created:

Updated:

Platform:

Replies:

120184 Sep 9,2015 04:55 AM UTC Sep 14,2015 05:31 AM UTC UWP 6
loading
Tags: SfRating
Naweed Akram
Asked On September 9, 2015 04:55 AM UTC

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
Replied On September 9, 2015 06:40 PM UTC

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 [Syncfusion]
Replied On September 10, 2015 10:19 AM UTC

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
Replied On September 10, 2015 02:31 PM UTC

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 [Syncfusion]
Replied On September 11, 2015 10:39 AM UTC

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
Replied On September 12, 2015 07:14 AM UTC

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 [Syncfusion]
Replied On September 14, 2015 05:31 AM UTC

Hi Naweed,

Thank you for your update.

Please let us know if you need any other assistance

Regards,
M.Sugapriya

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;