Alpha Blending and Background Images

• Oct 29, 2020
• 3 minutes to read

The DevExpress Ribbon, Menu and Docking Library gives you control over alpha blending which lets you give bar elements varying degrees of transparency. This topic describes the concept of Alpha blending and the ways in which it can be used to enhance the appearance of XtraBars.

Alpha Blending Concept

XtraBars allows you to customize the appearance of its elements (bars, menus, etc). There are a lot of appearance characteristics that can be adjusted. These include an element’s background and foreground colors. Colors are specified by four-byte values; the value of three of these bytes is used to denote the intensity of the red, green and blue colors. The fourth byte specifies the value for the color’s alpha channel, and this sets the transparency level. The range for the alpha channel’s value is from 0, when the element is completely transparent to 255, when the element will be completely opaque. If no value is specified for the alpha blending component it is considered to be 255. This method of specifying colors is called the ARGB palette.

An ordinary (opaque) blue color can be specified by the following expressions:

C#

Color myColor1 = Color.FromArgb(0, 0, 255);
Color myColor2 = Color.Blue;

VB.NET

Dim MyColor1 As Color = Color.FromArgb(0, 0, 255)
Dim MyColor2 As Color = Color.Blue

A half transparent blue color can be specified using the code below.

C#

Color myColor1 = Color.FromArgb(127, 0, 0, 255);
Color myColor2 = Color.FromArgb(127, Color.Blue);

VB.NET

Dim MyColor1 As Color = Color.FromArgb(127, 0, 0, 255)
Dim MyColor2 As Color = Color.FromArgb(127, Color.Blue)

You can specify the element’s color at design time by entering the desired color’s values into the property value. Consider the image below for an example on how to specify a half transparent blue color at design time.

When an alpha channel with a 0 value is assigned to an element, it becomes transparent to the objects behind it. So if a transparent color is assigned to the element’s background, you can see the underlying control’s content through it.

When a Bar Manager is created, it automatically creates four dock controls and docks them to the corresponding sides of the form. Dock controls (docking sites) are designed to display bars when the bars are docked to any side of a container (form). You can use their Appearance property to provide background settings for the docked bars.

Using the Background Images

The alpha blending feature is used in combination with background images to significantly enhance a control’s look & feel. A common way to implement this is to assign an image to the AppearanceObject.Image property of the appearance object assigned to the element and set its AppearanceObject.BackColor property to transparent. The image below shows an example of using the alpha blending feature in this way.

This can be also done at runtime using the sample code below.

C#

barSubItem1.MenuAppearance.Menu.BackColor = Color.FromArgb(170, 255, 255, 255);
barSubItem1.MenuAppearance.Menu.Image = Image.FromFile("C:\\Images\\menu.gif");

VB.NET

BarSubItem1.MenuAppearance.Menu.BackColor = Color.FromArgb(170, 255, 255, 255)
BarSubItem1.MenuAppearance.Menu.Image = Image.FromFile("C:\Images\menu.gif")

The next image shows a custom image assigned to the top dock control. Note that you should use transparent background colors to make the background image visible.

The following sample code shows how to specify an image at runtime:

C#

barDockControl1.Appearance.BackColor = Color.Transparent;
barDockControl1.Appearance.BackColor2 = Color.Transparent;
barDockControl1.Appearance.Image = Image.FromFile("C:\\image1.jpg");

VB.NET

barDockControl1.Appearance.BackColor = Color.Transparent
barDockControl1.Appearance.BackColor2 = Color.Transparent
barDockControl1.Appearance.Image = Image.FromFile("C:\image1.jpg")