A rating control in XAML

For a pet project I've been working on in WPF I needed a control that would let the user provide a rating between 0 and 5, for example like the one in iTunes and on numerous web sites:

After googling a bit I found some samples, including this one posted by Zhou Yong on msdn forums.

However, there was some issues with the functionality (how it reacts to clicks when you click a star that is already lit) and the visuals (the starts themselves and some other minor issues relating to sizing and scaling) so I decided to touch it up a bit. The end result looks like this:

It (like the original) is based on toggle buttons with a new template to redo the visuals. It quite nicely illustrates the power of templates in WPF, and what can be achieved just with a little bit of code in a user control. The template looks like this:

   1: <ControlTemplate x:Key="starTemplate"  TargetType="{x:Type ToggleButton}">

   2:     <Viewbox>

   3:         <Path Name="star" Fill="Gray" Data="F1 M 145.637,174.227L 127.619,110.39L 180.809,70.7577L 114.528,68.1664L 93.2725,5.33333L 70.3262,67.569L 4,68.3681L 56.0988,109.423L 36.3629,172.75L 91.508,135.888L 145.637,174.227 Z"/>

   4:     </Viewbox>

   5:     <ControlTemplate.Triggers>

   6:         <Trigger Property="IsChecked" Value="True">

   7:             <Setter TargetName="star" Property="Fill" Value="White"/>

   8:         </Trigger>

   9:     </ControlTemplate.Triggers>

  10: </ControlTemplate>

When working on this I realized how hard it is to find coordinates for a star. The ones I ended up using were lifted from a blog post by Jaime Rodriguez. They are a little bit crooked, but they were the best I could find.

 

Of course the whole control should ideally be implemented as a custom control so that it properly supports styles and templating, but I'll leave that exercise for later.

The code for this sample can be downloaded from here.

Comments

[Patrick leblanc]

This is absolutely awesome. After hunderds of pages read on the subject, this is the one who made me understand custom controls, data binding.

Thank you so so sooo much.

[Mark]

Thanks for the great sample. I took the liberty of extending it a bit to handle 1/2 stars and a hover effect to highlight stars before selecting them. -> http://www.codestrider.com/blog/read/WPFStarRatingControl.aspx

[ira]

Hello Nicke,

Can I use this in a commercial application?
What parameter do I databind to?
I would like to have a small int field in my database from 1 to 5, each number corresponding to a star, is this possible?

[Jeff]

There is a star tool in Inkscape and also an option to export to XAML. That would probably be the easiest way to create a star without doing a little basic geometry work on paper.

[yancyn]

Thank you for your data template part and it just fix my needs for my current project. I have been create a star rating user control for my project since last month, i still use a very traditional way of drawing the star at run time. I overwrite the base.EndInit() force to fill the star based on the property set. Then in my user control, I draw a static star with the help of Inkscape, probably this not a accurate or good enough star shape because i draw it by hand and even i rotate the star inside the Inkscape to get the correct rotation, the polygon coordinate still remains the same. So you can imagine how ugly i get my star shape but at least, I get my work done by this way :p

Then, one more mistake i made probably is the DataBinding mode. One of my UserControl fail to show up the color due to I set it as TwoWay for a read-only property in my view model. Perhaps there has a console error. But just because Visual Studio get rid all of the xaml error which I do not realize at all!

Anyway, thank you again for your star rating control. It really help me a lot :)

[Viet]

Hello everybody,
It's a nice post, I'm a starter at WPF, now i would like to make the property RatingValue that the user of my UserControl can modify by a value from 0 to 5 that are shown in a dropdown list (combo box) in the Properties windows (as some exist properties of Usercontrols like Visibility, windows style, background ...)
How can i do?
Thank you very much in advance,
Viet