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

How to change the star with custom symbol in SfRating?

Platform: UWP |
Control: SfRating |
Published Date: March 10, 2016 |
Last Revised Date: June 23, 2019 |
Product Version: 13.4.0.53

SfRating allows to replace the default star with custom symbol in SfRating control by editing the SfRatingIem style.

In the below code example, we have changed the data for the path in the SfRatingItem style.

Code snippet:

XAML:

<Page
    x:Class="samplerating.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:samplerating"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input"
    xmlns:converter="using:Syncfusion.UI.Xaml.Converters"
    xmlns:shared="using:Syncfusion.UI.Xaml.Primitives"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
<Page.Resources>
    <Thickness x:Key="SyncfusionUpDownBorderThemeThickness">1</Thickness>
    <Thickness x:Key="SyncfusionDropDownButtonBorderThemeThickness">2 0 0 0</Thickness>
    <SolidColorBrush x:Key="SyncfusionTextBoxExtErrorThemeBrush" Color="Red" />
    <SolidColorBrush x:Key="AccentBrush" Color="#FF1FAEFF" />
    <SolidColorBrush x:Key="SyncfusionRatingItemPointerOverThemeBrush"    
                     Color="#FF8152EF"/>
    <Thickness x:Key="SyncfusionTransitionContentCotnrolThemePadding">5 0 0  
                                                              0</Thickness>
    <converter:TimeFormater x:Key="timeFormater"/>
    <converter:DateTimeFormater x:Key="Formater"/>
    <converter:InvertBooleanConverter x:Key="BooleanConverter"/>
    <converter:OrientationToAngleConverter x:Key="AngleConverter"/>
    <converter:PrecisionToVisibilityConverter x:Key="VisibilityConverter"/>
    <converter:PrecisionToVisibilityInverseConverter x:Key="InverseConverter"/>
    <converter:Inverter x:Key="Inverter"/>
    <converter:ToolTipVisibilityConverter x:Key="ToolTipConverter"/>
    <converter:BooleanToVisibilityConverter x:Key="BooleanVisibilityConverter"/>
    <converter:InverseBooleanToVisibilityConverter 
                x:Key="InverseBooleanVisibilityConverter" />
    <converter:BrushToColorConverter x:Key="BrushConverter"/>
    <converter:CalendarHeaderFormatter x:Key="HeaderFormatter"/>
    <converter:EmptyStringToVisibilityConverter x:Key="EmptyStringVisibilityConverter"
    />
    <Input:VisibilityToBooleanConverter x:Key="VisibilityToBooleanConverter"/>
    <Style TargetType="Input:SfRatingItem">
       <Setter Property="Background" Value="Transparent" />
       <Setter Property="UnratedFill" Value="#FFE6E6E6" />
       <Setter Property="PointerOverFill" Value="#FFADADAD" />
       <Setter Property="Width" Value="30"/>
       <Setter Property="RatedFill" Value="{StaticResource AccentBrush}" />
       <Setter Property="Template">
       <Setter.Value>
       <ControlTemplate TargetType="Input:SfRatingItem">
          <Grid Background="{TemplateBinding Background}">
            <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="MouseOver">
                     <Storyboard>
                       <DoubleAnimation Duration="0:0:0" To="1"
                                        Storyboard.TargetName="MouseOverPath"
                                  Storyboard.TargetProperty="(UIElement.Opacity)"/>
                       <DoubleAnimation Duration="0:0:0" To="0"
                                        Storyboard.TargetName="Unrated"
                                  Storyboard.TargetProperty="(UIElement.Opacity)"/>
                       <DoubleAnimation Duration="0:0:0" To="0" 
                                        Storyboard.TargetName="RatedPath"                                
                                  Storyboard.TargetProperty="(UIElement.Opacity)"/>
                      </Storyboard>
                     </VisualState>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="Rated">
                     <Storyboard>
                     <DoubleAnimation Duration="0:0:0" To="1" 
                                      Storyboard.TargetName="RatedPath"  
                                      Storyboard.TargetProperty="(UIElement.Opacity)"/>
                      <DoubleAnimation Duration="0:0:0" To="1"   
                                       Storyboard.TargetName="Unrated" 
                                     Storyboard.TargetProperty="(UIElement.Opacity)"/>
                      <DoubleAnimation Duration="0:0:0" To="0"   
                                       Storyboard.TargetName="MouseOverPath" 
                                     Storyboard.TargetProperty="(UIElement.Opacity)"/>
                      </Storyboard>
                     </VisualState>
                     </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="PART_RatingGrid"  Margin="{TemplateBinding Padding}">
                        <Grid.RowDefinitions>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
 
                       <Path x:Name="Unrated" Fill="{TemplateBinding UnratedFill}"  
                             Stretch="Uniform" Stroke="{TemplateBinding UnratedStroke}" 
                               StrokeLineJoin="Round" StrokeThickness="{TemplateBinding 
                               UnratedStrokeThickness}" VerticalAlignment="Stretch"  
                               Opacity="1" Data="M 0,0 A 180,180 180 1 1 1,1 Z"/>
                        <Path x:Name="MouseOverPath" Fill="{TemplateBinding  
                               PointerOverFill}" Stretch="Uniform"  
                               Stroke="{TemplateBinding PointerOverStroke}"     
                               StrokeLineJoin="Round" 
                               Stroke Thickness ="{ TemplateBinding
                                                  PointerOverStrokeThickness}"  
                               VerticalAlignment="Stretch" Opacity="0"
                               Data="M 0,0 A 180,180 180 1 1 1,1 Z"
                               Visibility="{Binding InternalPrecision,  
                               Converter={StaticResource VisibilityConverter}, 
                               Mode=TwoWay, 
                              RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                                                                                                 
 
                       <Path x:Name="RatedPath" Fill="{TemplateBinding RatedFill}"  
                             Stretch="Uniform" Stroke="{TemplateBinding RatedStroke}" 
                             StrokeLineJoin="Round" 
                             StrokeThickness ="{TemplateBinding RatedStrokeThickness}"  
                             VerticalAlignment="Stretch" Opacity="0"
                             Data="M 0,0 A 180,180 180 1 1 1,1 Z"/>
 
                       <shared:LinearClipper ExpandDirection="Right"  
                                             RatioVisible="{TemplateBinding
                                                            InternalValue}">
                       <Path x:Name="LinearCliperPath" Fill="{TemplateBinding 
                                                            RatedFill}" 
                            Stretch="Uniform" Stroke="{TemplateBinding RatedStroke}" 
                            StrokeLineJoin="Round" 
                            StrokeThickness="{TemplateBinding RatedStrokeThickness}" 
                            VerticalAlignment="Stretch" 
                            Data="M1540.22,2082.07L1546.95,2102.78 1568.73,2102.78
                                  1551.11,2115.58 1557.84,2136.29 1540.22,2123.49
                                  1522.6,2136.29 1529.33,2115.58 1511.71,2102.78
                                  1533.49,2102.78 1540.22,2082.07z"/>
                        </shared:LinearClipper>
 
                       <Border Grid.Row="1" Margin="{TemplateBinding Margin}">
                       <ContentPresenter HorizontalAlignment="{TemplateBinding 
                                        HorizontalContentAlignment}" 
                                        VerticalAlignment="{TemplateBinding 
                                        VerticalContentAlignment}"/>
                       </Border>
                       </Grid>
                       </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
  </Page.Resources>
 <Grid Background="White">
<Input:SfRating Background="Aqua"  Width="300" ItemsCount="6"    
                HorizontalAlignment="Center" Height="100"  VerticalAlignment="Center" >
</Input:SfRating>
</Grid>
</Page>
 

 

Output:

Custom symbol of SfRating control

 

 

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow 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.