This project has moved. For the latest updates, please go here.

Setup

Download the latest release, extract and add MarkHeath.StarRating.dll as a reference to your Silverlight project.

Alternatively, you can use nuget to automatically add a reference (TODO: not yet complete).

To use the star rating on a XAML page, you'll need to reference the namespace:

xmlns:star="clr-namespace:MarkHeath.StarRating;assembly=MarkHeath.StarRating"

Using the StarRating Control

Here's the XAML for the StarRatingControl at its default size. If you change the size, the stars will grow or shrink to fit the desired area (while maintaining their aspect ratio)

<star:StarRatingControl Width="170" Height="35" />

If you want to customise the colours used by the control you can do so.

 <star:StarRatingControl Width="170" Height="35" 
StarOutlineBrush="#C00000" StarFillBrush="#FF8080" UnselectedStarFillBrush="#FFE0E0"
HoverOutlineBrush="#0000C0" HoverFillBrush="#8080FF" UnselectedHoverFillBrush="#E0E0FF" />

StarOutlineBrush is used for the the star outlines and StarFillBrush is used to fill selected stars. The equivalents for when the mouse is hovering over the control to select a different rating are HoverFillBrush and HoverOutlineBrush. You can also specify an UnselectedStarFillBrush and UnselectedHoverFillBrush to give a fill to stars that have not been selected. You can also adjust the appearance of the star outlines by setting the StrokeThickness and StrokeLineJoin properties (defaults are 2.0 and Round).

If you want to simply display a rating, but not allow the user to edit it, you set IsEnabled to false. The selected rating can also be set in XAML using the Rating property. Each star represents 2 rating points, so a rating of 7 is three and a half stars.

<star:StarRatingControl Width="170" Height="35" Rating="7" IsEnabled="False" />

 

<star:StarRatingControl Margin="5" HorizontalAlignment="Left" Width="170" Height="35" VerticalAlignment="Top" Grid.Column="1" />
         

Last edited Jun 13, 2011 at 6:57 PM by markheath, version 5

Comments

No comments yet.