Ratings control
This is a sample implementation for a ratings control. we can customize the shape by setting the template to something different. It defaults to stars but can be changed easily
Here are the sample templates used
<Canvas Width=”600″
Height=”600″>
<local:RatingSelector Canvas.Left=”50″
Canvas.Top=”100″
Width=”200″
Height=”20″
MinRating=”1″
MaxRating=”4″>
<local:RatingSelector.RatingTemplate>
<ControlTemplate TargetType=”local:RatingItem”>
<Ellipse Width=”10″ Margin=”2″
Height=”10″
Fill=”{TemplateBinding Background}”
Stroke=”Black”
StrokeThickness=”1″>
</Ellipse>
</ControlTemplate>
</local:RatingSelector.RatingTemplate>
</local:RatingSelector>
Height=”600″>
<local:RatingSelector Canvas.Left=”50″
Canvas.Top=”100″
Width=”200″
Height=”20″
MinRating=”1″
MaxRating=”4″>
<local:RatingSelector.RatingTemplate>
<ControlTemplate TargetType=”local:RatingItem”>
<Ellipse Width=”10″ Margin=”2″
Height=”10″
Fill=”{TemplateBinding Background}”
Stroke=”Black”
StrokeThickness=”1″>
</Ellipse>
</ControlTemplate>
</local:RatingSelector.RatingTemplate>
</local:RatingSelector>
<local:RatingSelector Canvas.Left=”50″
Canvas.Top=”150″
Width=”200″
Height=”20″
MinRating=”1″
MaxRating=”10″>
<local:RatingSelector.RatingTemplate>
<ControlTemplate TargetType=”local:RatingItem”>
<Path Margin=”2″
Stroke=”Gray”
StrokeThickness=”2″
Stretch=”Fill”
Fill=”{TemplateBinding Background}”
Data=”M 5,0 L 4,4 L 0,4 L 3,7 L 2,11 L 5,9 L 6,9 L 9,11 L 8,7 L 11,4 L 7,4 L 6,0″ />
</ControlTemplate>
</local:RatingSelector.RatingTemplate>
</local:RatingSelector>
<local:RatingSelector Canvas.Left=”50″
x:Name=”ctrl1″
Canvas.Top=”200″
Rating=”3″
Width=”200″
Height=”20″
MinRating=”1″
MaxRating=”5″></local:RatingSelector>
</Canvas>
Canvas.Top=”150″
Width=”200″
Height=”20″
MinRating=”1″
MaxRating=”10″>
<local:RatingSelector.RatingTemplate>
<ControlTemplate TargetType=”local:RatingItem”>
<Path Margin=”2″
Stroke=”Gray”
StrokeThickness=”2″
Stretch=”Fill”
Fill=”{TemplateBinding Background}”
Data=”M 5,0 L 4,4 L 0,4 L 3,7 L 2,11 L 5,9 L 6,9 L 9,11 L 8,7 L 11,4 L 7,4 L 6,0″ />
</ControlTemplate>
</local:RatingSelector.RatingTemplate>
</local:RatingSelector>
<local:RatingSelector Canvas.Left=”50″
x:Name=”ctrl1″
Canvas.Top=”200″
Rating=”3″
Width=”200″
Height=”20″
MinRating=”1″
MaxRating=”5″></local:RatingSelector>
</Canvas>
Update: The code will now work with Beta2
Hi,
Its very nice rating control. But how can we implement 1/2 raing in this.. like .5, 1.5, 2.5, 3.5,4.5 etc. also how to show aggregate rating, if the aggregate is in decimal values?
Thanks,
Vijay Naryan
Vijay
July 1, 2008
I have a few Ideas, but I think those are not right. I will update the sample once I figure out. you should be able to add couple of dependencyproperties for number of votes and change the template to accomodate a pair of contentcontrols one for number of votes and one for avg. rating
Thanks
lee
July 1, 2008