Telerik blogs

Creating Custom Shapes for the RadRating Control

by Carey Payette
December 02, 2013 Web 0 Comments


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.

GETTING STARTED

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.

Project Configuration Dialog

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.

Form with RadRating Control

Now that we have our RadRating control added to the form, we are ready to begin implementing our custom shape.

IMPLEMENTING A 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.

USING A CUSTOM SHAPE WITH RADRATING

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.

Rating Custom Arrow Shapes

CONCLUSION

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

Download RadControls for WinForms by Telerik

About the Author

Carey Payette

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.

Comments

Comments are disabled in preview mode.