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>
        <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>

Update: The code will now work with Beta2  

you can see a demo here and download the source here

Advertisements

2 thoughts on “Ratings control

  1. 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

  2. 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

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s