Rating Star Change Colours

[Prakash]

How do i change the Rating the selected Star Colors from orange... to green
I have a made a style it works as long i dont set a key for it....

Once i set a key it does not come up with the style color i have setup....
the xaml looks likes this..

<!-- *** Style*** -->

<

 

SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF1E395B" />

 

 

 

<SolidColorBrush x:Key="Rating_Background" Color="Transparent" />

 

 

 

<SolidColorBrush x:Key="Rating_BorderBrush" Color="Transparent" />

 

 

 

<SolidColorBrush x:Key="Rating_ReadOnlyBackground" Color="#83FFFFFF" />

 

 

 

<SolidColorBrush x:Key="Rating_ReadOnlyBorderBrush" Color="#A5F7F7F7" />

 

 

 

<SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000" />

 

 

 

<SolidColorBrush x:Key="RatingItem_Background" Color="#FF4CFF00" />

 

 

 

<SolidColorBrush x:Key="RatingItem_BorderBrush" Color="#FF4CFF00" />

 

 

 

<LinearGradientBrush x:Key="RatingItem_SelectedBackground" EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

<GradientStop Color="#FF4CFF00" Offset="0"/>

 

 

 

<GradientStop Color="#FF4CFF00" Offset="1"/>

 

 

 

<GradientStop Color="#FF4CFF00" Offset="0.591"/>

 

 

 

<GradientStop Color="#FF4CFF00" Offset="0.608"/>

 

 

 

</LinearGradientBrush>

 

 

 

<SolidColorBrush x:Key="RatingItem_SelectedBorder" Color="#FF4CFF00" />

 

 

 

<LinearGradientBrush x:Key="RatingItem_MouseOverBackground" EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

<GradientStop Color="#FF4CFF00" Offset="0"/>

 

 

 

<GradientStop Color="#FF4CFF00" Offset="1"/>

 

 

 

<GradientStop Color="#FF4CFF00" Offset="0.591"/>

 

 

 

<GradientStop Color="#FF4CFF00" Offset="0.599"/>

 

 

 

</LinearGradientBrush>

 

 

 

<SolidColorBrush x:Key="RatingItem_MouseOverBorder" Color="#FF416ABD" />

 

 

 

<SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFF8F8F8" />

 

 

 

<SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FFD9D9D9" />

 

 

 

<SolidColorBrush x:Key="RatingItem_SelectedDisabledBackground" Color="#FFcbcaca" />

 

 

 

<LinearGradientBrush x:Key="RatingItem_SelectedUnHoveredBackground" EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

<GradientStop Color="#FF4CFF00" Offset="0"/>

 

 

 

<GradientStop Color="#FF4CFF00" Offset="1"/>

 

 

 

<GradientStop Color="#994CFF00" Offset="0.591"/>

 

 

 

<GradientStop Color="#994CFF00" Offset="0.599"/>

 

 

 

</LinearGradientBrush>

 

　

　

 

 

<!-- *** RATING *** -->

 

 

 

<Style TargetType="telerikInput:RadRating" x:Key="GreenRating"

 

 

>

 

 

 

<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />

 

 

 

<Setter Property="Background" Value="{StaticResource Rating_Background}" />

 

 

 

<Setter Property="BorderBrush" Value="{StaticResource Rating_BorderBrush}" />

 

 

 

<Setter Property="BorderThickness" Value="0" />

 

 

 

<Setter Property="HorizontalAlignment" Value="Left" />

 

 

 

<Setter Property="VerticalAlignment" Value="Top" />

 

 

 

<Setter Property="ItemsPanel">

 

 

 

<Setter.Value>

 

 

 

<ItemsPanelTemplate>

 

 

 

<StackPanel Orientation="Horizontal" />

 

 

 

</ItemsPanelTemplate>

 

 

 

</Setter.Value>

 

 

 

</Setter>

 

 

 

<Setter Property="Template">

 

 

 

<Setter.Value>

 

 

 

<ControlTemplate TargetType="telerikInput:RadRating">

 

 

 

<Grid x:Name="Root">

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

<VisualState x:Name="Normal" />

 

 

 

<VisualState x:Name="MouseOver" />

 

 

 

<VisualState x:Name="Pressed" />

 

 

 

<VisualState x:Name="Disabled" />

 

 

 

<VisualState x:Name="ReadOnly">

 

 

 

<Storyboard>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"

 

 

Storyboard.TargetName="ReadOnlyVisualElement"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.03" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

</Storyboard>

 

 

 

</VisualState>

 

 

 

</VisualStateGroup>

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

<VisualState x:Name="Unfocused" />

 

 

 

<VisualState x:Name="Focused">

 

 

 

<Storyboard Duration="0">

 

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement"

 

 

Storyboard.TargetProperty="Visibility">

 

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

</Storyboard>

 

 

 

</VisualState>

 

 

 

</VisualStateGroup>

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"

 

 

BorderThickness="{TemplateBinding BorderThickness}">

 

 

 

<ItemsPresenter />

 

 

 

</Border>

 

 

 

<Border x:Name="ReadOnlyVisualElement" IsHitTestVisible="False" Opacity="0"

 

 

Background="{StaticResource Rating_ReadOnlyBackground}"

 

 

BorderBrush="{StaticResource Rating_ReadOnlyBorderBrush}"

 

 

BorderThickness="{TemplateBinding BorderThickness}" />

 

 

 

<Rectangle x:Name="FocusVisualElement" Stroke="{StaticResource FocusBrushBlack}"

 

 

IsHitTestVisible="false" Visibility="Collapsed" StrokeDashArray="1 2"

 

 

StrokeThickness="1" RadiusX="1" RadiusY="1" />

 

 

 

</Grid>

 

 

 

</ControlTemplate>

 

 

 

</Setter.Value>

 

 

 

</Setter>

 

 

 

</Style>

 

 

 

<!-- *** RATING ITEM *** -->

 

 

 

<Style TargetType="telerikInput:RadRatingItem" x:Key="GreenRatingItem"

 

 

>

 

 

 

<Setter Property="Background" Value="{StaticResource RatingItem_Background}" />

 

 

 

<Setter Property="BorderBrush" Value="{StaticResource RatingItem_BorderBrush}" />

 

 

 

<Setter Property="HorizontalContentAlignment" Value="Center" />

 

 

 

<Setter Property="VerticalAlignment" Value="Top" />

 

 

 

<Setter Property="Padding" Value="2" />

 

 

 

<Setter Property="Template">

 

 

 

<Setter.Value>

 

 

 

<ControlTemplate TargetType="telerikInput:RadRatingItem">

 

 

 

<Grid>

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

</Grid.RowDefinitions>

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

<VisualState x:Name="Normal" />

 

 

 

<VisualState x:Name="Selected">

 

 

 

<Storyboard>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="SelectedRatingItem"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="SelectedUnHoveredRatingItem"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.6" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="MouseOverRatingItem"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

</Storyboard>

 

 

 

</VisualState>

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

<Storyboard>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="MouseOverRatingItem"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="SelectedRatingItem"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="SelectedUnHoveredRatingItem"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

</Storyboard>

 

 

 

</VisualState>

 

 

 

<VisualState x:Name="Disabled">

 

 

 

<Storyboard>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="DisabledRatingItem"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0000000"

 

 

Storyboard.TargetName="DisabledRatingItemBackground"

 

 

Storyboard.TargetProperty="(UIElement.Opacity)">

 

 

 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

</Storyboard>

 

 

 

</VisualState>

 

 

 

<VisualState x:Name="ReadOnly" />

 

 

 

</VisualStateGroup>

 

 

 

<VisualStateGroup x:Name="FillStates">

 

 

 

<VisualStateGroup.Transitions>

 

 

 

<VisualTransition GeneratedDuration="00:00:00.1000000" />

 

 

 

</VisualStateGroup.Transitions>

 

 

 

<VisualState x:Name="Empty" />

 

 

 

<VisualState x:Name="Partial" />

 

 

 

<VisualState x:Name="Filled" />

 

 

 

</VisualStateGroup>

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

<Border Background="#00FFFFFF" BorderThickness="0" />

 

 

 

<Grid Margin="{TemplateBinding Padding}">

 

 

 

<Path x:Name="NormalRatingItem" Fill="{TemplateBinding Background}" Stretch="Uniform"

 

 

Stroke="{TemplateBinding BorderBrush}" StrokeLineJoin="Round" StrokeThickness="0.6"

 

 

VerticalAlignment="Stretch" Opacity="1"

 

 

Data="M74,40 L76.5,35 L79,40 L85,41 L80.5,44.5 L81.291664,50 L76.5,47.583332 L71.645836,50 L72.5,44.5 L68,41 z" />

 

 

 

<telerikRating:LinearClipper RatioVisible="{TemplateBinding RatioVisible}"

 

 

ExpandDirection="Right">

 

 

 

<Path x:Name="SelectedRatingItem" Fill="{StaticResource RatingItem_SelectedBackground}"

 

 

Stroke="{StaticResource RatingItem_SelectedBorder}" StrokeThickness="0.6"

 

 

Stretch="Uniform" StrokeLineJoin="Round" Opacity="1"

 

 

Data="M74,40 L76.5,35 L79,40 L85,41 L80.5,44.5 L81.291664,50 L76.5,47.583332 L71.645836,50 L72.5,44.5 L68,41 z" />

 

 

 

</telerikRating:LinearClipper>

 

 

 

<telerikRating:LinearClipper RatioVisible="{TemplateBinding RatioVisible}"

 

 

ExpandDirection="Right">

 

 

 

<Path x:Name="MouseOverRatingItem"

 

 

Fill="{StaticResource RatingItem_MouseOverBackground}" Stretch="Uniform"

 

 

Stroke="{StaticResource RatingItem_MouseOverBorder}" StrokeThickness="0.6"

 

 

StrokeLineJoin="Round" VerticalAlignment="Stretch" Opacity="0"

 

 

Data="M74,40 L76.5,35 L79,40 L85,41 L80.5,44.5 L81.291664,50 L76.5,47.583332 L71.645836,50 L72.5,44.5 L68,41 z" />

 

 

 

</telerikRating:LinearClipper>

 

 

 

<Path x:Name="DisabledRatingItemBackground" Stretch="Uniform"

 

 

Fill="{StaticResource ControlBackground_Disabled}" Opacity="0"

 

 

Stroke="{StaticResource ControlOuterBorder_Disabled}" StrokeThickness="0.6"

 

 

StrokeLineJoin="Round" VerticalAlignment="Stretch"

 

 

Data="M74,40 L76.5,35 L79,40 L85,41 L80.5,44.5 L81.291664,50 L76.5,47.583332 L71.645836,50 L72.5,44.5 L68,41 z" />

 

 

 

<telerikRating:LinearClipper x:Name="DisabledRatingItem"

 

 

RatioVisible="{TemplateBinding RatioVisible}" ExpandDirection="Right" Opacity="0">

 

 

 

<Path Stretch="Uniform" Stroke="{x:Null}" StrokeLineJoin="Round"

 

 

VerticalAlignment="Stretch" Opacity="1"

 

 

Data="M74,40 L76.5,35 L79,40 L85,41 L80.5,44.5 L81.291664,50 L76.5,47.583332 L71.645836,50 L72.5,44.5 L68,41 z"

 

 

Fill="{StaticResource RatingItem_SelectedDisabledBackground}" />

 

 

 

</telerikRating:LinearClipper>

 

 

 

<telerikRating:LinearClipper RatioVisible="{TemplateBinding ValueRatio}"

 

 

ExpandDirection="Right">

 

 

 

<Path x:Name="SelectedUnHoveredRatingItem" Stretch="Uniform"

 

 

Stroke="{StaticResource RatingItem_SelectedBorder}" StrokeThickness="0.6"

 

 

StrokeLineJoin="Round" VerticalAlignment="Stretch" Opacity="0"

 

 

Data="M74,40 L76.5,35 L79,40 L85,41 L80.5,44.5 L81.291664,50 L76.5,47.583332 L71.645836,50 L72.5,44.5 L68,41 z"

 

 

Fill="{StaticResource RatingItem_SelectedUnHoveredBackground}" />

 

 

 

</telerikRating:LinearClipper>

 

 

 

</Grid>

 

 

 

<ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}"

 

 

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 

 

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

 

 

ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="1" />

 

 

 

</Grid>

 

 

 

</ControlTemplate>

 

 

 

</Setter.Value>

 

 

 

</Setter>

 

 

 

</Style>

 

　

<!-- *** Main Xaml*** -->

<

 

telerik:RadRating Value="{Binding CoverageForCustomerIssue.ROAM_Coverage, Converter={StaticResource CoverageToRatingConverter}}" IsReadOnly="True"

 

 

 

ToolTipService.ToolTip="{Binding CoverageForCustomerIssue.ROAM_Coverage}"

 

 

 

Style="{StaticResource GreenRating}"

 

 

>

 

 

 

<telerik:RadRating.ItemTemplate>

 

 

 

<DataTemplate>

 

 

 

<telerik:RadRatingItem Style="{StaticResource GreenRatingItem}"></telerik:RadRatingItem>

 

 

 

</DataTemplate>

 

 

 

</telerik:RadRating.ItemTemplate>

 

 

 

</telerik:RadRating>

 

[Viktor Tsvetkov]

Hello Prakash,

The problem in your code is that you use an ItemTemplate, but your RadRating control is not data-bound. The ItemTemplate is intended to be used in a data-bound scenario where you want to specify how to look the content of the data-bound items. The RadRating control internally generates RadRatingItems, so you should not generate another RadRatingItem in the DataTemplate. By default the RadRating control is generating 5 RadRatingItems, so when you remove the key from the custom style, it is applied on the generated items. I made for you a sample project that demonstrates some of the possible solutions for your scenario, so you could examine it and if you have further questions do not hesitate to ask.

Kind regards,
Viktor Tsvetkov
the Telerik team

[Steven]

Hi,

I would like to change my stars colour.
Could you please post some code as an example ?

I am not allowed to download .zip :(

Regards,
Steven

[Petar Mladenov]

Hello Prakash,

You have to change the default style of the RadRatingItem and play with the "RatingItem_MouseOverBackground" LinearGradientBrush. Please examine the attached solution where a basic approach is realized and let us know how it goes.


Kind regards,
Petar Mladenov
the Telerik team