Themes & Customization

The treeview appearance defined by an active theme, which you can change in the Theme or ThemeManager treeview properties (personal theme) or in the ActiveTheme or ActiveManager ThemeManager`s static properties (global theme). Theme is a class, inherited from the ThemeManager class, that defines all colors, gradients, images, etc. for all of a treeview`s parts. When the theme changes for a particular treeview, that treeview raises the ThemeManagerChanging and ThemeManagerChanged events.

Themes may be:

1. Global – defines the appearance of all treeviews with a global theme activated. All changes in this theme are reflected on all those treeviews;
2. Personal – defines the appearance of one treeview with a non–global theme activated. All changes in this theme are reflected on this treeview only.

Flexible TreeView contains these built–in themes:

• ThemeManagerSystem – displays treeviews using the current OS`s theme settings. You can create a new instance of this class or use the ThemeManager.SystemThemeManager static property;
• ThemeManagerOffice2007Blue – displays treeviews in Office2007 style with blue color table. You can create a new instance of this class or use the ThemeManager.Office2007BlueThemeManager static property.

Also, you can easily create your own theme as shown below.

Global theme

Global themes are intended to control the appearance of many treeviews from one point. To enable a global theme for a treeview, adjust the Theme treeview property to eVisualTheme.Global value. Note that all changes in the global theme reflect on all treeviews with that global theme.
The ThemeManager class controls the current global theme, so to change the global theme, change the ActiveTheme or ActiveManager static properties to the desired theme.

Example:

// activate the Office2007Blue theme for all treeviews using the theme identifier.
ThemeManager.ActiveTheme = eVisualTheme.Office2007Blue;

If you have an instance of a theme class, you can activate it by using the ActiveManager static property:

// activate the system theme using the theme class instance.
ThemeManager.ActiveManager = ThemeManager.SystemThemeManager;
 
// activate a custom theme using them instance.
ThemeManager.ActiveManager = new MyCustomTheme();

Personal theme

Personal themes are intended to change the appearance of one treeview . To change the personal theme, use the Theme (using theme identifier) or ThemeManager (using a theme class instance) treeview properties.

Example:

// activate Office2007Blue theme as treeview`s personal theme using theme identifier.
tree.Theme = eVisualTheme.Office2007Blue;
 
// or using theme class instance.
tree.ThemeManager = new ThemeManagerOffice2007Blue();

Existing theme modification

Flexible TreeView allows you to very easily override any part (color, color gradient, image, edit control, etc.) of the theme, both in the Visual Studio designer or programmatically.

Colors

You can change any color using the Colors property. Every color has its own identifier that is declared in the ARMSoft.FlexibleTreeView.eColor enum.

Example:

// change treeview`s personal theme color.
tree.Colors[eColor.TextDisabledHot] = Color.Gray;
 
// change global theme`s color.
ThemeManager.ActiveManager.Colors[eColor.TextDisabledHot] = Color.Gray;

Color gradients

You can override any color gradient using the Colors.Gradients property. Every gradient consists of top and bottom colors and gradient angle. Every color gradient has its own identifier that is declared in the ARMSoft.FlexibleTreeView.eColorGradient enum.

Example:

// change gradient in the global theme.
ThemeManager.ActiveManager.Colors.Gradients[eColorGradient.SelectedNodeBkgnd] = new ColorGradient(Color.Yellow, Color.Green, (int)eGradientAngle.LeftToRight);
 
// change gradient in the treeview`s personal theme.
tree.Colors.Gradients[eColorGradient.SelectedNodeBkgnd] = new ColorGradient(Color.Yellow, Color.Green, (int)eGradientAngle.LeftToRight);

Images

You can override any image that`s used to design the treeview or any of its parts (like checkbox or plus–minus sign) by using the Images treeview property.

Example:

// change the checked checkbox image in the treeview`s personal theme.
tree.ThemeManager.Images.CheckboxChecked = Resources.MyCheck;
 
// change the plus–minus sign in the global theme.
ThemeManager.ActiveManager.Images.PlusMinusOpened = Resources.MyPlusSignExpanded;
ThemeManager.ActiveManager.Images.PlusMinusClosed = Resources.MyPlusSignCollapsed;

Editor controls

Flexible TreeView not only allows to change the appearance of a treeview, but to also seamlessly insert it into your existing application with your own theme and controls. See the 'Third party controls integration' treeview article.

Custom theme

You can easily change the treeview appearance by creating your own theme. To do that, inherit your class from the ThemeManager class and implement at least the OnRecreateResources method, where the theme appearance is constructed. Also, you can derive from existing themes to modify them a bit.
For instance, let`s change the existing Office2007Blue theme`s color for a text in the enabled treeview, and an image for the a checked radio button:

class MyThemeManager : ThemeManagerOffice2007Blue
{
  protected override void OnRecreateResources()
  {
    base.OnRecreateResources();
 
    // override the text color for a node under the mouse cursor.
    Colors[eColor.TextEnabledHot] = Color.Blue;
 
    // override the checked radio button`s image.
    Images[eVisualElement.RadioButtonChecked] = Resources.myNewRadioButtonChecked;
  }
}
 
// apply new theme as treeview personal theme.
tree.ThemeManager = new MyThemeManager();