Rating Selector

Hello …

It’s been a while now since my last update on the blog. Currently I have been really busy, work family… You know the so called life… 🙂

Some friends from Alambic asked me if I can create a Rating control for the AvalonControlsLibrary. A request for a control is always exciting for myself… So here it is a brand new control that you can go ahead and use…

The contol is very simple, you specify a MinRating (by default 0) and a MaxRating(by default 5) and the control will go ahead and create a list of Stars(this is the default look of the control, you can change this with a control template). The user can then click on one of the Rate Items(the star) and select a Rating. The Rating selected can be read from a property RatingSelected. The RatingSelected is a dependency property so you can bind to it and get notified when the value changes. I also added the IsReadOnly property so that you can specify that the control is readonly and the user cannot change the control. There are also 2 other important properties RateItemColor and RateItemHoverColor. By setting these properties you can change the color for the rate items (the stars by default)

Now lets dig into the implementation of the control… Believe it or not this contol is just an ItemsControl… You don’t beleive me? check this link to see even crazier ItemsControl. Basically I create a list of RatingSelectorItems ranging from the MinRating to the MaxRating and add them in the ItemsSource of the control. The RatingSelectorItem has a RateValue property that is the Rate that the item represents. The RatingSelectorItem also has a IsSelected property that is set to true when the user selects a rating that is bigger or equal to the rate of the item.

The Rate selected is triggered via a Command (more details on command found here) called SelectRating. This command also has a constraint so that it can be executed only if the IsReadOnly property of the RatingSelector is false.

The demo for the control contains different control templates for the control. It shows how you can show different objects for the Rate Items and aslo how to change the orientation of the control (which comes for free since the control is an ItemsControl)

Go Ahead, download the control and send me feedback… Any bugs or problems, feel free to send me and email…

Rating Control

Download Source Code and Demo

17 thoughts on “Rating Selector

  1. A very good example of a project which shows one who has thoroughly learned the basics would have no problem in building futer complex projects. Keep up the good work and Well done.

  2. RatingSelectorItem isn’t editable in blend. Do you know why ?
    Otherwise you make a great job for yours controls, congratulations.

  3. Hi, Could you explain a little about the events you have declared in your control. I have downloaded the code but still dont know quite how its functioning. When the mouse moves over a RatingSelectorItem the Fill color of path changes but how do the previous Items know they have to change color too? Thanks.

  4. Basically what happens is that the Rating Selector Raises an event (RateItemMouseOver) to all RatingSelectorItems to tell them that one of the items is being mouse overed.

    All RaitingSelectorItems have a property called IsHigherRateMouseOver which is set in the event handler of the Rating selector RateItemMouseOver event.. This event handler looks like this

    //handler for the rate item mouse over
    void ParentSelectorRateItemMouseOver(object sender, RateItemMouseOverEventArgs args)
    if (args.Cancel)

    IsHigherRateMouseOver = false;
    IsHigherRateMouseOver = args.RateValue >= RateValue;

    so basically here every RatingSelectorItem checks if the the value of the item being mouse over is greater or equal to it’s own item. If it is the IsHigherRateMouseOver is set to true. In the XAML there is a trigger that gives a color to the item if this property is set to true….

    That’s it …. if you need any more info please let me know

  5. Hi, sorry for asking so many questions. Could you give me the reason why you used a ResourceDictionary and not a UserControl and why did you wrap the and inside tags. Couldnt you have used them without these tags. Thanks

  6. A slight problem in the previous comment.
    Hi, sorry for asking so many questions. Could you give me the reason why you used a ResourceDictionary and not a UserControl and why did you wrap the ItemsPanelTemplate and ControlTemplate inside Style tags. Couldnt you have used them without these tags. Thanks

  7. Hi, Thanks for your help. One last question.
    Why did you use the SelectRatingcommand for the RatingSelectorItem. Couldnt you have used an MouseLeftButtonDown event for it just like the MouseEnter event. By the way I did this but the event was not fired. Dont know what the problem was.


  8. Can you explaing why the following is required? When does thid method get called?

    protected override DependencyObject GetContainerForItemOverride()
    throw new NotSupportedException (ExceptionStrings.NOT_SUPPORTED_RATINGITEM);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s