65.9K
CodeProject is changing. Read more.
Home

WPF: RatingsControl That Supports Fractions

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0 vote)

Nov 27, 2009

CPOL

1 min read

viewsIcon

12090

RatingsControl that supports fractions

I was at work the other day and one of my work colleagues asked me how to create a Rating control (you know the ones with the stars). I talked him through how to do it, but whilst doing so, I thought I might have a go at that if I get a spare hour or 2. I found some time to give it a go, and have come up with what I think is a pretty flexible RatingControl for WPF.

You are able to alter the following attributes:

  • Overall background color
  • Star foreground color
  • Star outline color
  • Number of stars
  • Current value

All of these properties are DependencyProperty values, so they are fully bindable. This is all wrapped up in a very simple and easy to use UserControl called RatingsControl. Here is what the resulting RatingsControl looks like in a demo window.

45219/Stars_thumb.png

The RatingsControl also contains n many StarControls that each renders its own value portion. You may be asking yourself how the control can render partial stars, well this figure may explain that.

45219/Stars2_thumb.png

Here is the code from the StarControl Value DP, which moves a masking Rectangle the correct distance to give the illusion of a fraction rendering of the Star. The masking Rectangle is clipped by using a standard Rectangle Clip value for the StarControl.

/// <summary>
/// Handles changes to the Value property.
/// </summary>
private static void OnValueChanged(DependencyObject d,
    DependencyPropertyChangedEventArgs e)
{
    d.CoerceValue(MinimumProperty);
    d.CoerceValue(MaximumProperty);
    StarControl starControl = (StarControl)d;
    if (starControl.Value == 0.0m)
    {
        starControl.starForeground.Fill = Brushes.Gray;
    }
    else
    {
        starControl.starForeground.Fill = starControl.StarForegroundColor;
    }

    Int32 marginLeftOffset = (Int32)(starControl.Value * (Decimal)STAR_SIZE);
    starControl.mask.Margin = new Thickness(marginLeftOffset, 0, 0, 0);
    starControl.InvalidateArrange();
    starControl.InvalidateMeasure();
    starControl.InvalidateVisual();
}

If you want to know more and get the download code, you can do so using the article link which is:

Enjoy!