[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  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
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Collapse]Tree List
   [Expand]Product Information
   [Expand]Feature Center
   [Collapse]Visual Elements
     Automatic Filtering Row
     Blank Column
     Caption Panel
     Cell
     Column
     Column Button
     Column Header
     Column Header Context Menu
     Column Header Panel
     Column Separators
     Column Pop-up Filter Menus
     Customization Form
     Empty Area
     Expand Button
     Filter Button
     Filter Editor
     Filter Panel
     Find Panel
     Fixed Line
     Footer Cell
     Footer Context Menu
     Group Footer
     Node Image
     Node Indents
     Node Indicator Panel
     Summary Footer
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End User Capabilities
   [Expand]Member Tables
  [Expand]Gantt Control
  [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]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Node Image

Nodes can display the following icons:

  • Select Image - two icons that automatically switch when a node gets / loses the focus.
  • State Image - any custom icon.

Expanded Select Image

Specify image source

The TreeList.SelectImageList property specifies an ordered (indexed) collection that stores images. You can use the following image collections:

Assign images to nodes

To specify the index of the image displayed in a particular node, use the following properties and events:

  • the TreeList.ImageIndexFieldName property — specifies the name of the data field that contains image indexes. The property specifies the image index for both non-focused and focused states (you cannot use data source fields to specify two icons).

  • the TreeListNode.ImageIndex and TreeListNode.SelectImageIndex properties — get or set the node's image index in the non-focused and focused states, respectively. Images are automatically changed when a node gets / loses the focus.

  • the TreeList.GetSelectImage event — fires before a node is displayed and allows you to specify (override) the image index for the processed node.

If the index is out of range, no image is displayed.

Respond to clicks

The TreeList.RowSelectImageClick event fires when a select image is clicked.

Expanded State Image

State image: Specify image source

The TreeList.StateImageList property specifies an ordered (indexed) collection that stores images. You can use the following image collections:

State image: Assign images to nodes

To specify the index of the image displayed in a particular node, use the following properties and events:

If the index is out of range, no image is displayed.

State image: Respond to clicks

The TreeList.RowStateImageClick event fires when a state image is clicked.

Expanded Node Image Location

The TreeListOptionsView.RowImagesShowMode property specifies where to display node images:

  • InIndent — images are displayed in the indent area.

  • InCell — images are displayed in the cells.

Expanded Draw Node Images

The TreeList.CustomDrawNodeImages event provides access to a GDI+/DirectX drawing surface and allows you to draw node icons manually.

See Custom Draw Scenarios for more information on how to use a drawing surface.

Expanded Examples

Example 1

The code below shows how to assign select and state images to nodes.

Example 2

The code below shows how to display state images depending on data field values.

Note

Run the XtraTreeList demo for the complete example.

Example 3

The code below shows how to display state images depending on the node check state.

Example 4

This code below shows how to handle the TreeList.GetSelectImage event to assign select images to nodes depending on the focus state.

Example 5

The code below shows how to fill the background with a custom color and then draw the image on top.

Important

Never change cell values or modify the control's layout on this event, or any other event designed to tune the control's appearance. Any action that causes a layout update can cause the control to malfunction.

Expanded See Also

Is this topic helpful?​​​​​​​