Themes & Customization

The treeview appearance is 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:

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

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

Theme#

Flexible TreeView groups all used colors, gradients and images into the visual themes. The same theme could be applied to many treeview instances, and the same theme's part, like color or image, could be overridden for each treeview.

The Theme treeview property is used to change the treeview theme to the one that is defined in the eVisualTheme enum. When Theme property is changed the sibling ThemeManager property changed as well.

Flexible TreeView is shipped with following visual themes:

eVisualTheme.System - uses Windows API to draw the treeview visual parts, i.e. emulates current OS look. This theme is implemented in ThemeManagerSystem class.
eVisualTheme.Office2007Blue - emulates Microsoft Office 2007 blue theme look. This theme is implemented in ThemeManagerOffice2007Blue class.

Also, eVisualTheme has the Global enum item which tells the treeview to use ThemeManager.ActiveManager theme manager instance to draw itself. Read about ThemeManager in details below.

To override the treeview theme's part, the described below Colors, Images, StateImages and Background treeview properties are used.

ThemeManager#

The ThemeManager treeview property specifies custom treeview theme or, if equals to NULL, tells the treeview to use the globally selected theme manager specified in ThemeManager.ActiveManager property.

The ThemeManager class, on the other hand, acts as a base class for all themes and groups all the visual parts and primitives used to draw a treeview, like Colors and Images. By changing these primitives in the particular theme manager, all the linked to this manager treeviews are affected.

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. It is used under the cover when eVisualTheme.System theme identifier is used.
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. It is used under the cover when eVisualTheme.Office2007Blue theme identifier is used.

Global themes#

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

C#Visual Basic

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

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

C#Visual Basic

// activate the system theme using the theme class instance.
ThemeManager.ActiveManager = ThemeManager.SystemThemeManager;

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

' 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 themes#

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

C#Visual Basic

// activate Office2007Blue theme as treeview's personal theme using theme identifier.
tree.Theme = eVisualTheme.Office2007Blue;

// or using theme class instance.
tree.ThemeManager = new ThemeManagerOffice2007Blue();

' 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#

By default, Flexible TreeView's appearance is controlled by the chosen visual theme via Theme or ThemeManager properties.

The Colors property, on the other hand, allows to override any color of the chosen theme. Note that made changes are only applied to the particular treeview instance, not to all treeviews.

Each color part of treeview has its own identifier in the ARMSoft.FlexibleTreeView.Themes.eColor enum which is used to get or set the particular color by using the Colors[] indexer property, as shown below.

Example

C#Visual Basic

// change treeview's personal theme color.
tree.Colors[eColor.TextDisabledHot] = Color.Gray;

// change global theme's color.
ThemeManager.ActiveManager.Colors[eColor.TextDisabledHot] = Color.Gray;

' 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 identifier prefixes#

While interacting with the user or via code, treeview creates a drawing context to invalidate the changed area, like node control, node, column, etc. The drawing context describes the treeview current state that depends on what is happening with treeview now and defines how and why treeview was changed. This state could be one of the following virtual values:

Selected - treeview has some selected but not focused nodes.
Hot - the user is hovering the mouse over treeview nodes.
Focused - treeview has some focused nodes.
<general> - general state when treeview does not have either selected or focused nodes, and user is not hovering the mouse over any treeview node.
Enabled/Disabled - treeview either enabled or disabled respectively.
<active> - treeview has focus.
Inactive - treeview does not have focus.

The treeview current state, for some cases, defines separate color identifiers in eColor enum for the same treeview visual part, by adding a postfix with the state name.

For example, there is eColor.TextEnabled enum item which defines the color of any text drawn in the enabled and focused treeview. When treeview has selected nodes, the eColor.TextEnabledSelected (note Selected at the end) enum item will used by treeview instead of eColor.TextEnabled in order to display any text. And so on with other states described above.

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

C#Visual Basic

// 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);

' change gradient in the global theme.
ThemeManager.ActiveManager.Colors.Gradients(eColorGradient.SelectedNodeBkgnd) = 
    New ColorGradient(Color.Yellow, Color.Green, CInt(eGradientAngle.LeftToRight))

' change gradient in the treeview's personal theme.
tree.Colors.Gradients(eColorGradient.SelectedNodeBkgnd)  = 
    New ColorGradient(Color.Yellow, Color.Green, CInt(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

C#Visual Basic

// 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;

' 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 this topic for details.

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:

C#Visual Basic

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();

Class MyThemeManager
  Inherits ThemeManagerOffice2007Blue
 Protected Overrides Sub OnRecreateResources()
  MyBase.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
 End Sub
End Class

' apply new theme as treeview personal theme.
tree.ThemeManager = New MyThemeManager()