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:
using
System.Drawing;
using
System.Drawing.Drawing2D;
using
Telerik.WinControls;
namespace
RadRatingCustomShapeElement
{
public
class
ArrowShape : ElementShape
{
public
override
GraphicsPath CreatePath(Rectangle bounds)
{
GraphicsPath path =
new
GraphicsPath();
float
tailHeight = bounds.Height / 3;
float
pointWidth = bounds.Width / 3;
float
tailWidth = bounds.Width - pointWidth;
PointF[] points =
new
PointF[7];
points[0] =
new
PointF(bounds.Left, bounds.Top + tailHeight);
points[1] =
new
PointF(bounds.Left + tailWidth, bounds.Top + tailHeight);
points[2] =
new
PointF(bounds.Left + tailWidth, bounds.Top);
points[3] =
new
PointF(bounds.Right, bounds.Top + (bounds.Height / 2));
points[4] =
new
PointF(bounds.Left + tailWidth, bounds.Bottom);
points[5] =
new
PointF(bounds.Left + tailWidth, bounds.Bottom - tailHeight);
points[6] =
new
PointF(bounds.Left, bounds.Bottom - tailHeight);
path.AddPolygon(points);
return
path;
}
}
}
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:
using
System;
using
System.Linq;
using
Telerik.WinControls;
using
Telerik.WinControls.UI;
namespace
RadRatingCustomShapeElement
{
public
class
RatingArrowVisualElement : RatingVisualElement
{
protected
override
ElementShape GetShape()
{
return
new
ArrowShape();
}
protected
override
Type ThemeEffectiveType
{
get
{
return
typeof
(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.
private
void
LoadRatingWithCustomShape()
{
this
.radRating1.Items.Clear();
for
(
int
i = 0; i < 5; i++)
{
this
.radRating1.Items.Add(
new
RatingArrowVisualElement());
}
}
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.
Carey Payette is a Senior Software Engineer with Trillium Innovations (a Solliance partner), an ASPInsider, a Progress Ninja, a Microsoft Certified Trainer and a Microsoft Azure MVP. Her primary focus is cloud integration and deployment for the web, mobile, big data, AI, machine learning and IoT spaces. Always eager to learn, she regularly tinkers with various sensors, microcontrollers, programming languages and frameworks. Carey is also a wife and mom to three fabulous boys.