Implement Alpha Blending by Customizing Appearances

• Oct 29, 2020
• 2 minutes to read

You can assign transparency to Tree List elements via appearance properties provided by the Tree List control and its columns. These properties are:

• TreeList.Appearance - provides default appearance settings for all Tree List elements.
• TreeListColumn.AppearanceCell and TreeListColumn.AppearanceHeader - override the default appearance settings for specific columns.

When providing transparent or semi-transparent background colors for the Tree List rows, columns and/or empty area, an end-user will be able to see the control’s background.

Example

1. Assign a background image to the Tree List control from its BackgroundImage property:

   

2. Invoke the Tree List Designer and switch to the Appearances page.

   Select the Empty item in the Appearances listbox and set the BackColor property to Transparent.

   

   The box in the bottom-right corner displays a preview of the appearance settings. Since a completely transparent background color is assigned to the visual element, the Preview box displays the previously assigned background image as is.

3. Now select the Row item in the Appearances listbox, and set the BackColor property to a semi-transparent light-brown color, (e.g., “150, 209, 157, 139”).

   

   In the Preview box, you can see the assigned background image overlaid with the specified color.

4. Run the project and see the result:

   

The following is the runtime code for the design-time actions illustrated above.

C#

treeList1.BackgroundImage = Image.FromFile("C:\\Images\\bg6.png");
treeList1.Appearance.Empty.BackColor = Color.Transparent;
treeList1.Appearance.Row.BackColor = Color.FromArgb(150, 209, 157, 139);

VB.NET

TreeList1.BackgroundImage = Image.FromFile("C:\Images\bg6.png")
TreeList1.Appearance.Empty.BackColor = Color.Transparent
TreeList1.Appearance.Empty.BackColor = Color.FromArgb(150, 209, 157, 139)