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…
17 Comments »
Leave a Reply
I’m a WPF Disciple
I am an insider …. muhhhaaaa
C# Disciple
More PhotosAwards
Vote Me
Hi Marlon !
I have put your control into the Alambic (with slight style modifications), and it works well !
You can have a look at the last screenshots here:
http://alambic.eclyps.info/?q=node/8
Thanks !
GroXx – The Alambic Team
That’s really cool….
You guys are really doing well with that project!!!
Brilliant Job
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.
thanks
RatingSelectorItem isn’t editable in blend. Do you know why ?
Otherwise you make a great job for yours controls, congratulations.
Unfortunatly I never test the controls with Blend
If you want open an issue on CodePlex for this, so that I can keep track of this request
http://www.codeplex.com/AvalonControlsLib/WorkItem/AdvancedList.aspx
Thanks a lot for this….
Should you find any other problems please let me know
Regards
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.
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;
else
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
You are STUPENDOUS!!! Thanks a lot for the help.
no problem… if you need any more help (even not related to AvalonControlsLibrary) please let me know
Regards
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
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
Hi,
basically the concept is to create Lookless Controls
have a look here
http://www.cubido.at/Blog/tabid/176/EntryID/81/Default.aspx
Let me know if you need more info
Hi, can you explain what MouseEnter += delegate means. I’ve never seen such an instruction before.
Thanks.
Hi,
that is an anonymouse function
http://www.softsteel.co.uk/tutorials/cSharp/lesson22.html
Regards
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.
Thanks
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);
}