Apply Alpha Blending Using Custom Painting

• Oct 29, 2020
• 4 minutes to read

You can enhance a vertical grid’s appearance using Alpha Blending technology. This involves assigning a background image to the vertical grid and painting the control elements using transparent pens and brushes. Please refer to the Alpha Blending Overview topic for details on this technology and a list of the ways in which it can be implemented. This particular topic deals with implementing Alpha Blending using custom painting.

Custom Painting and Alpha Blending

The vertical grids (VGridControl and PropertyGridControl) enable you to customize the appearance and content of their elements in any manner you like. This can be performed by manually painting the desired elements. To implement this, you must handle events specifically designed for this purpose. These events are listed in the Custom Painting Overview topic. Such events provide a number of parameters which can be used to obtain the Graphics object which represents the painting surface, the element’s bounding rectangle and its style. Furthermore, each custom painting event has a Handled parameter that specifies whether default painting needs to be performed after the event handler has executed. Thus, you can use the events mentioned to implement the alpha blending feature in one of the following ways:

• Paint the processed control element using transparent brushes and/or pens and set the Handled parameter to true. This technique is most used if you want to change the appearance of elements to achieve a result that is impossible when only using styles. The example below shows how to implement handling of custom paint events.
• Change the element’s appearance in the event handler so that colors are transparent. In this case, you must set the Handled parameter to false so that the element is painted in its default manner using the newly specified style. This technique is most used if you want to provide different appearances for elements of the same type. For instance, you cannot specify different styles for different row headers using view styles. So in this case you would need to handle the custom painting events and modify styles with respect to the currently processed row header. Please refer to the Specifying Styles Using Custom Painting Events topic for an example of using this technique.

Custom Painting Transparent Row Headers

The following sample code handles the VGridControlBase.CustomDrawRowHeaderCell event to paint row headers in a custom manner. The event handler paints a frame around the processed row header using the linear gradient transparent brush. The inner area is filled with the reversed brush then the caption string is painted within the inner area. Note that it is assumed that a background image is already assigned to the control using its BackgroundImage property.

The steps that are performed when painting the header cell are illustrated in the image below:

• C#
• VB.NET

using System.Drawing;
using System.Drawing.Drawing2D;
using DevExpress.XtraVerticalGrid.Events;
// ...

private void vGridControl1_CustomDrawRowHeaderCell(object sender, 
CustomDrawRowHeaderCellEventArgs e) {
    // Category Rows are not custom painted
    if(e.Row is DevExpress.XtraVerticalGrid.Rows.CategoryRow) return;

    // painting the inner area (the first step)
    //creating transparent linear gradient brush - it uses transparent starting and ending colors
    using(LinearGradientBrush innerBrush = new LinearGradientBrush(e.Bounds,
        Color.FromArgb(200, Color.Blue), Color.FromArgb(150, Color.LightBlue),
        LinearGradientMode.Vertical))
        e.Cache.FillRectangle(innerBrush, e.Bounds);

    // painting the outer frame (the second step)
    using(LinearGradientBrush outerBrush = new LinearGradientBrush(e.Bounds, Color.LightBlue,
        Color.Blue, LinearGradientMode.Vertical)) {
        using(Pen outerPen = new Pen(outerBrush))
            e.Cache.DrawRectangle(outerPen, e.Bounds);
    }

    // painting the caption (the third step)
    e.Cache.DrawString(e.Caption, e.Appearance.Font, Brushes.Yellow, e.CaptionRect);

    // prohibiting default painting
    e.Handled = true;
}

Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports DevExpress.XtraVerticalGrid.Events
' ...

Private Sub VGridControl1_CustomDrawRowHeaderCell(ByVal sender As Object, ByVal e As _
CustomDrawRowHeaderCellEventArgs) Handles VGridControl1.CustomDrawRowHeaderCell
    ' Category Rows are not custom painted
    If TypeOf e.Row Is DevExpress.XtraVerticalGrid.Rows.CategoryRow Then
        Return
    End If

    ' painting the inner area (the first step)
    'creating transparent linear gradient brush - it uses transparent starting and ending colors
    Using innerBrush As New LinearGradientBrush(e.Bounds, Color.FromArgb(200, Color.Blue), Color.FromArgb(150, Color.LightBlue), LinearGradientMode.Vertical)
        e.Cache.FillRectangle(innerBrush, e.Bounds)
    End Using

    ' painting the outer frame (the second step)
    Using outerBrush As New LinearGradientBrush(e.Bounds, Color.LightBlue, Color.Blue, LinearGradientMode.Vertical)
        Using outerPen As New Pen(outerBrush)
            e.Cache.DrawRectangle(outerPen, e.Bounds)
        End Using
    End Using

    ' painting the caption (the third step)
    e.Cache.DrawString(e.Caption, e.Appearance.Font, Brushes.Yellow, e.CaptionRect)

    ' prohibiting default painting
    e.Handled = True

End Sub

The result is shown in the image below.