As you probably know, RadControls for WinForms are built on top of our own Telerik Presentation Framework. This especially designed framework gives you the ability to extend the existing RadControls to a great level. Today, I am going to share with you how you can plug Gmail-like labels in RadGridView for WinForms ( First of all we need the construction blocks for the labels. These blocks are represented by a very important element of our framework – the LightVisualElement. Several RadControls use this element extensively – RadTreeView, RadPanelBar, RadCalendar and RadGridView. The advantage of this element is that it incorporates all essential visual elements that you need in single unit – text, fill and border. The colors and properties that you can set to a single ‘Gmail Label’ depend on your design taste, but here is our take: 

LightVisualElement visual = new LightVisualElement();   
visual.ForeColor = Color.White;   
visual.BackColor = Color.Red;   
visual.BackColor2 = Color.DarkRed;   
visual.Text = "Urgent";   
visual.NumberOfColors = 2;   
visual.Shape = shape;   
visual.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;   
visual.GradientStyle = Telerik.WinControls.GradientStyles.Linear;   
visual.DrawFill = true;   
visual.Font = font;   
visual.NotifyParentOnMouseInput = true;   
visual.Margin = new System.Windows.Forms.Padding(0, -2, 10, 0);


Then we need to set these construction blocks on a base – this base will be a custom cell element. The process of creating a custom cell is explained in the following knowledge base article: Creating a RadRadioButtonCellElement.

The important part of the custom cell is the custom layout. We define the layout of the cell in the ArrangeOverride method which is similar to the ArrangeOverride of Windows Presentation Foundation.

protected override SizeF ArrangeOverride(SizeF finalSize) 
    float x = 0; 
    foreach (RadElement element in this.Children) 
        float y = (finalSize.Height - element.DesiredSize.Height) / 2; 
        float width = element.DesiredSize.Width; 
        if (element != textElement) 
            width += 10; 
        element.Arrange(new RectangleF(x, y, width, element.DesiredSize.Height)); 
        x += element.DesiredSize.Width; 
        if (element != textElement) 
            x += 2; 
    return finalSize; 


Finally, we need to determine which label will be visible for which row. For this we handle the CellFormatting event, used especially for such custom scenarios. As a result, we get an enhanced RadGridView which can show additional information for the data items in a more pleasant way. :)

The full approach is demonstrated in our updated HelpDesk application which you can download from the following link:  

HelpDesk for WinForms by Telerik

About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Related Posts


Comments are disabled in preview mode.