Click here to Skip to main content
15,748,615 members
Articles / Desktop Programming / WPF
Technical Blog
Posted 27 Nov 2009

Tagged as


4 bookmarked

WPF: RatingsControl That Supports Fractions

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
27 Nov 2009CPOL1 min read
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.


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.


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)
    StarControl starControl = (StarControl)d;
    if (starControl.Value == 0.0m)
        starControl.starForeground.Fill = Brushes.Gray;
        starControl.starForeground.Fill = starControl.StarForegroundColor;

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

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


This article was originally posted at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)

- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence

Both of these at Sussex University UK.


I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2016
  • Codeproject MVP 2016
  • Microsoft C# MVP 2015
  • Codeproject MVP 2015
  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Comments and Discussions

-- There are no messages in this forum --