Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Collapse]Ribbon, Bars and Menu
   [Expand]Bars
   [Expand]Ribbon
   [Expand]Popup Menus
    Radial Menu
   [Collapse]Common Features
    [Collapse]Appearance and Look and Feel
      Look And Feel and Skinning
      Appearances
      Appearance Inheritance Options
      Alpha Blending and Background Images
      Bar and Docking Controllers
      Bar and Ribbon Glyph Skinning
      How to: Populate a Menu and Ribbon Gallery with DevExpress Skin Items and Localize Them
    [Expand]Galleries
     Stub Glyphs
     The List of Bar Items and Links
   [Expand]Examples
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Alpha Blending and Background Images

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.

Expanded 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:

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

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.

Expanded 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.

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:

How would you rate this topic?​​​​​​​