Rating Star Change Colours

4 posts, 0 answers
  1. Prakash
    Prakash avatar
    1 posts
    Member since:
    Jan 2011

    Posted 28 Apr 2011 Link to this post

    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>

     

  2. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 29 Apr 2011 Link to this post

    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
  3. DevCraft banner
  4. Steven
    Steven avatar
    35 posts
    Member since:
    Apr 2011

    Posted 05 May 2011 Link to this post

    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
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 10 May 2011 Link to this post

    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
Back to Top