Category / Section
Change the star with custom symbol in WinRT Rating
2 mins read
SfRating allows to replace the default star with custom Symbol in SfRating control by editing the SfRatingItem style
In the below code example we have changed the data for the path in the SfRatingItem style
XAML
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:SfRatingSample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input" x:Class="SfRatingSample.MainPage" mc:Ignorable="d" xmlns:shared="using:Syncfusion.UI.Xaml.Primitives" xmlns:converter="using:Syncfusion.UI.Xaml.Converters"> <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" StrokeThickness="{TemplateBinding PointerOverStrokeThickness}" VerticalAlignment="Stretch" Opacity="0" Visibility="{Binding InternalPrecision, Converter={StaticResource VisibilityConverter}, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="M 0,0 A 180,180 180 1 1 1,1 Z"/> <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>
The following screenshot displays the change in the symbol of the SfRatingItem