This is a migrated thread and some comments may be shown as answers.

Rating Star Change Colours

3 Answers 68 Views
Rating
This is a migrated thread and some comments may be shown as answers.
Prakash
Top achievements
Rank 1
Prakash asked on 29 Apr 2011, 02:24 AM
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>

 

3 Answers, 1 is accepted

Sort by
0
Viktor Tsvetkov
Telerik team
answered on 29 Apr 2011, 01:29 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Steven
Top achievements
Rank 1
answered on 05 May 2011, 03:47 PM
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
0
Petar Mladenov
Telerik team
answered on 10 May 2011, 02:58 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Rating
Asked by
Prakash
Top achievements
Rank 1
Answers by
Viktor Tsvetkov
Telerik team
Steven
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or