The Rating control allows users to select a “rating”. The Rating property is used to either get or set the current rating value. Rating is an integer within the range defined by 0 and the value of property MaxRating (which by default is 5.)

Rating_thumb

Before the user has selected a value for Rating, it is possible to indicate an “Average” or “Best Guess” or “Whatever” value. Unlike Rating which must be an integral value, AverageRating can contain a fraction. AverageRating is indicated to the user in a different color than the Rating value. Note: AverageRating is displayed only when Rating is 0.

AverageRating_thumb

RatingControl is an ItemsControl, and supports all the flexibility of any ItemsControl with regard to what can be placed into it. The container Type for items in RatingControl is RatingItem. By default, the rating control is automatically populated with the number of rating items equal to MaxRating. However, it is possible add items at the client level, in which case MaxRating is ignored. (An example of this is provided in the included RatingControlSample.)

StarRatingDifferentNumberPoints_thum

By default, the rating control is orientated horizontally. Use Orientation to orient the control vertically.

By default, rating items inherit Stretch from the parent rating control. Stretch is defaulted to Uniform which results in the default behavior of the rating items filling up available space while maintaining their intended aspect ratio.

Changing Rating Item Style – RatingItemData

The default visual for a rating item inside the rating control is a 5-pointed star. Of course, one way to modify this would be to define a new RatingItem Style and set it as the value of the Rating control’s ItemContainerStyle. However, there is a set of built-in rating item styles and the way to modify them is via the RatingItemData property of the rating control. Note: the RatingItemData property of rating control is means of setting the Data property of all rating items to the same value. Data for individual rating items can be set independently of each other.) RatingItemData (or RatingItem.Data) is a concrete instance of the abstract type RatingItemData. (The default rating item is a star because the default value of RatingItemData is an instance of StarRatingItemData.)

The included rating item data types are:

  • EllipseRatingItemData
    • Diameter
  • RectangleRatingItemData
    • Width
    • Height
  • TriangleRatingItemData
    • Width
    • Height
  • PathRatingItemData
    • PathDat
  • StarRatingItemData (inherits from PathRatingItemData)
    • Points
    • InnerDiameter
    • OuterDiameter
  • ImageRatingItemData
    • UnratedImage
    • RatedImage
    • PreviewUnratedImage
    • PreviewRatedImage
    • AverageRatedImage

The first 4 above all derive from the abstract base class StrokedRatingItemData. This class exposes the following properties:

  • UnratedStrokeBrush
  • UnratedFillBrush
  • RatedStrokeBrush
  • RatedFillBrush
  • PreviewUnratedStrokeBrush
  • PreviewUnratedFillBrush
  • PreviewRatedStrokeBrush
  • PreviewRatedFillBrush
  • AverageRatedStrokeBrush
  • AverageRatedFillBrush
  • BaseColor

The colors and/or look of a rating item are determined by the value of its State property (and the State property is controlled by the parent rating control.) The possible rating item states are: Unrated, Rated, PreviewUnrated, PreviewRated and AverageRated. You can see how these relate to the properties above. Also note the optional BaseColor property of StrokedRatingItemData. It supports a feature where all the other colors are automatically generated based on a single input color, providing a reasonable set of colors following a single theme.

Here is an example of using RatingItemData to change base color to Magenta and use a 16 pointed star.

<dc:RatingControl>
    <dc:RatingControl.RatingItemData>
        <dc:StarRatingItemData BaseColor="Magenta" Points="16" InnerDiameter="0.8" OuterDiameter="1" />
    </dc:RatingControl.RatingItemData>
</dc:RatingControl>

This is what it looks like:

Rating16PointStar_thumb

And here is an example of using RatingItemData to set up rating control to use custom images.

<dc:RatingControl>
    <dc:RatingControl.RatingItemData>
        <dc:ImageRatingItemData UnratedImage="moon unrated.png" 
                                RatedImage="moon rated.png" 
                                PreviewUnratedImage="moon preview unrated.png" 
                                PreviewRatedImage="moon preview rated.png" 
                                AverageRatedImage="moon average rated.png" />
    </dc:RatingControl.RatingItemData>
</dc:RatingControl>

Properties

For your reference, here is a complete list of the properties defined by RatingControl and RatingItem.

RatingControl

AverateRating – Gets or sets a value to be indicated by the rating control when the value of Rating is 0. This is a dependency property. The default value is 0.

ItemContainerStyle – Gets or sets a Style which is applied to the RatingItem instances which are created as container for each item added to the Items collection.

MaxRating – Get or set the maximum rating possible. Effectively sets the number of rating items automatically generated. If rating items are populated manually, then this value is determined by the number of items. This is a dependency property. The default value is 5.

Orientation – Get or set the orientation of the rating control, either Horizontal or Vertical. This is a dependency property. The default value is Horizontal.

Rating- Get or set the rating. This is an integer between 0 and MaxRating. This is a dependency property. The default value is 0.

RatingItemData – Get or set the data used to provide the default rating item styles and options. This is a dependency property. The default value is an instance of StarRatingItemData.

Stretch – Get or set how rating items resize them selves according to available space. This is a dependency property. The default value is Uniform.

RatingItem

AverageRatingFraction – A double which, when between 0 and 1, indicates the fractional portion of the parent rating control’s AverageRating property. Used by rating item to clip the visual which represents average rating. This is a read-only dependency property. Its value is set by the parent rating control.

Data – Get or set a concrete instance of the abstract base class RatingItemData which provides information that is used both to determine the Style of the rating item as well as define options for the Style. Normally, this value is inherited from the parent rating control’s RatingItemData property, but can be set independently.

State – Get the current State of the rating item. This value is read-only and is controlled by the parent rating controlled.

Stretch – Get or set the stretch behavior of the rating item. By default, this value is inherited from the parent rating control’s Stretch property.

Value – Indicates the value for Rating which is set on the parent rating control when this rating item is selected. Generally, this property is set when the rating item is inserted into the parent rating control’s Items collection and equals the item’s position is the Items list.

Styles and Templates

Included below are the default Styles for RatingControl and RatingItem which you may use as starting point for customization.

<Style TargetType="dc:RatingItem">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="dc:RatingItem">
                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid Background="Transparent">
                        <Path Name="Path" Stretch="{TemplateBinding Stretch}" 
                            Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.UnratedStrokeBrush}" 
                            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.UnratedFillBrush}"
                            Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.PathData}" />
                        <Path Name="AverageRatedPath" Visibility="Collapsed" Stretch="{TemplateBinding Stretch}" 
                            Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.AverageRatedStrokeBrush}" 
                            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.AverageRatedFillBrush}"
                            Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.PathData}"
                            Clip="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=AverageRatingClip}">
                        </Path>
                    </Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="StateStates">
                            <VisualState Name="Unrated" />
                            <VisualState Name="Rated">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.RatedFillBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState Name="PreviewUnrated">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.PreviewUnratedFillBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState Name="PreviewRated">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Data.PreviewRatedFillBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState Name="AverageRated">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AverageRatedPath" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
 
<Style TargetType="dc:RatingControl">
    <Setter Property="Stretch" Value="Uniform" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="RatingItemData">
        <Setter.Value>
            <dc:StarRatingItemData />
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <dc:StretchingStackPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="dc:RatingControl">
                <Border Name="RootElement" Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                    <ItemsPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Related posts:

  1. Silverlight Toolbar Quick Start Guide
  2. Circular Progress Control (Silverlight) Quick Start Guide
  3. Clock Control Quick Start Guide
  4. Navigation Pane Quick Start Guide (Silverlight)
  5. SuperToolTip Control