Category / Section
How to change the star with custom symbol in UWP Rating?
2 mins read
UWP Rating 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:
Conclusion
I hope you enjoyed learning about how to change the star with custom symbol in UWP Rating.
You can refer to our UWP Rating feature tour page to know about its other groundbreaking feature representations. You can also explore our UWP Rating documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
