Flexible TreeView 5.1.9 Help
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:

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:

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:

 

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:

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

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

// 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[<color>] indexer property, as shown below.

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

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:

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

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

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

 

 


Copyright © 2006-2016 ARMSoft

www.FlexibleTreeView.com