Appearance and Styling in UWP Rating (SfRating)

10 May 20212 minutes to read

Rating items are customizable in much simpler and easier way. The following properties of SfRatingItem are accessible in SfRating.ItemContainerStyle.

PointerOverFill

PointerOverFill property fills the pointer over area with the specified solid color.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

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

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating PointerOverFill view

PointerOverStroke

``PointerOverStroke` sets the stroke for the pointer over area with the specified solid color.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

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

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating PointerOverStroke view

PointerOverStrokeThickness

PointerOverStrokeThickness sets the stroke thickness for the pointer over area with the specified thickness.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

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

<Setter Property="PointerOverStrokeThickness" Value="2"/>

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating PointerOverStrokeThickness view

RatedFill

RatedFill property fills the rated area with the specified solid color.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

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

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating RatedFill view

RatedStroke

RatedStroke sets the stroke for the rated area with the specified solid color.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

<Setter Property="RatedStroke" Value="Red"/>

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating RatedStroke view

Rated StrokeThickness

RatedStrokeThickness sets the stroke thickness for the rated area with the specified value.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

<Setter Property="RatedStroke" Value="Red"/>

<Setter Property="RatedStrokeThickness" Value="2"/>

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating Rated StrokeThickness view

Unrated Fill

UnratedFill property fills the unrated area with the specified solid color.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

<Setter Property="UnratedFill" Value="Red"/>

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating Unrated Fill view

Unrated Stroke

UnRatedStroke sets the stroke for the unrated area with the specified solid color.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

<Setter Property="UnratedStroke" Value="Red"/>

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating Unrated Stroke view

Unrated StrokeThickness

UnRatedStrokeThickness sets the stroke thickness for the unrated area with the specified value.

<input:SfRating ItemsCount="5">

<input:SfRating.ItemContainerStyle>

<Style TargetType="input:SfRatingItem">

<Setter Property="UnratedStroke" Value="Red"/>

<Setter Property="UnratedStrokeThickness" Value="2"/>

</Style>

</input:SfRating.ItemContainerStyle>

</input:SfRating>

Rating Unrated StrokeThickness view