Articles in this section
Category / Section

How to set various heights between SfRatingItems?

1 min read

The SfRating control enables to change the height of the SfRatingItem. The following code enables SfRating control having items with different heights.

XAML

<syncfusion:SfRating Height="50" VerticalAlignment="Center" HorizontalAlignment="Center" 
                             VerticalContentAlignment="Center" Value="3">
                    <syncfusion:SfRatingItem Height="20"/>
                    <syncfusion:SfRatingItem Height="18"/>
                    <syncfusion:SfRatingItem Height="16"/>
                    <syncfusion:SfRatingItem Height="14"/>
                    <syncfusion:SfRatingItem Height="12"/>
                </syncfusion:SfRating>

 

SfRatingItems with variable size

You can also provide similar height using the ItemContainerStyle property of the SfRating control. The following code implements the ItemContainerStyle property.

XAML

<syncfusion:SfRating Height="50" Width="300" ItemsCount="10" Value="4">
                    <syncfusion:SfRating.ItemContainerStyle>
                        <Style TargetType="syncfusion:SfRatingItem">
                            <Setter Property="Height" Value="12"/>
                        </Style>
                    </syncfusion:SfRating.ItemContainerStyle>
                </syncfusion:SfRating>

 

SfRatingItems with similar size

You can also provide the height for the SfRatingItem in code behind as follows.

C#

ratingItem.Height = 20;

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied