Articles in this section
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

 


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