Adding ratings to your Windows Forms application has never been easier since the introduction of RadRating in the Q3 2013 release of RadControls for Windows Forms. This control is fabulous right out of the box giving you the flexibility to represent and interact with precise ratings, half ratings and full ratings. You also get some awesome shapes to display your ratings right out of the box – these shapes are Stars, Diamonds and Hearts. You are not limited to using only these shapes, in this blog post I will cover how you can create a custom shape for use with the RadRating control.
To get started, open Visual Studio and create a new RadControls for Windows Forms Application, I’ve named my project RadRatingCustomShapeElement. When the project configuration dialog is shown, check the checkboxes for Telerik.WinControls, Telerik.WinControls.UI and TelerikCommon, then click Finish.
Next, open the designer for Form1.cs and drag and drop an instance of the RadRating control. Resize the control to your liking on the form.
Now that we have our RadRating control added to the form, we are ready to begin implementing our custom shape.
RadRating has and Items property that is a collection of RatingVisualElements. It is in this collection that you define the number of rating elements (by default includes 5) as well as the shape of each (by default are star shapes). You can easily mix and match different shapes and the number of rating elemetns in the control by manipulating the contents of this collection.
In order to create your own custom shape, you will need to define a new RatingVisualElement. In this example, we will create an Arrow as our custom shape.
The first order of business is to define the shape itself. This shape will be a class that inherits from the ElementShape base class. This base class has an abstract method called CreatePath where we will define the GraphicsPath that makes up our custom arrow shape. Create a new class in your project and name it ArrowShape and implement it as follows:
ArrowShape : ElementShape
GraphicsPath CreatePath(Rectangle bounds)
GraphicsPath path =
tailHeight = bounds.Height / 3;
pointWidth = bounds.Width / 3;
tailWidth = bounds.Width - pointWidth;
PointF points =
PointF(bounds.Left, bounds.Top + tailHeight);
PointF(bounds.Left + tailWidth, bounds.Top + tailHeight);
PointF(bounds.Left + tailWidth, bounds.Top);
PointF(bounds.Right, bounds.Top + (bounds.Height / 2));
PointF(bounds.Left + tailWidth, bounds.Bottom);
PointF(bounds.Left + tailWidth, bounds.Bottom - tailHeight);
PointF(bounds.Left, bounds.Bottom - tailHeight);
Now we are ready to use this shape as part of a RatingVisualElement. Add a new class to your project and name it RatingArrowVisualElement and implement it as follows:
RatingArrowVisualElement : RatingVisualElement
In this implementation notice that we’ve overridden the GetShape method to return our ArrowShape. We are now ready to put our RatingArrowVisualElement to work for us.
View the code for Form1.cs. Next add the following method that will be responsible for clearing out the Items collection of the RadRating control on the form and populating it with our custom RatingArrowVisualElement shapes.
i = 0; i < 5; i++)
We can now call this method in the Form1 constructor immediately following the InitializeComponent method call.
Now when we run this application you should see five arrows as the shapes in the RadRating control.
In this blog post we covered how to create your own custom shapes for use in the RadRating control. Feel free to define shapes that make sense in your application to customize and extend this flexible control.
Download Source Code
Carey Payette is a Developer Advocate. You can follow Carey on Twitter @careypayette or read her personal blog at www.codingbandit.com.