Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  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
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Collapse]View Technology
    [Expand]Banded Grid Views
    [Expand]Card View
    [Expand]Layout View
    [Expand]Tile View
    [Collapse]WinExplorer View
      WinExplorer View
      Tutorial: WinExplorer View - Basics
      Tutorial: WinExplorer View - Context Buttons
      Tutorial: WinExplorer View - Item Customization
     View Hierarchy
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [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]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: WinExplorer View - Item Customization

This walkthrough is a transcript of the WinExplorer View - Item Customization video available on the DevExpress YouTube Channel.

In this tutorial, you will learn how to customize each of the seven display styles available in the WinExplorer View.

Expanded Customizing View Style Options

Select the View in the Level Designer and then expand the WinExplorerView.OptionsViewStyles property. You will see properties corresponding to all available display styles.

  • Description Visibility

    For example, even though the WinExplorerViewStyleOptionsCollection.Medium style does not support descriptions by default, you can enable them by setting WinExplorerViewStyleOptions.ShowDescription to true.

    You can run the application and see descriptions displayed by items. The current item size doesn't allow them to be displayed completely, so they will all appear truncated.

  • Item Width

    Go back to design time and change the WinExplorerViewStyleOptions.ItemWidth property to 500. Run the application to see that the key layout aspects – image and caption size – remained the same. The new width allows you to display more text from the description field.

  • Margins and Indents

    There are several margins and indent properties in this section. For instance, you can set the WinExplorerViewStyleOptions.ImageToTextIndent property to positive or negative values to move an item text closer to or farther from the item's image. You can see how the result changes as you set this value to -7 and then to 30.

  • Image Size

    Each display style has a pre-defined image size. For instance, the default image size for the medium style is 48x48 pixels. It is 256x256 pixels for the extra large style. The WinExplorerView.OptionsViewStyles section gives you the opportunity to modify these sizes by setting the WinExplorerViewStyleOptions.ImageSize property to a desired value. For example, you can set the image size for an extra large style to 128x128 px.

Expanded Customizing Appearance Settings

The WinExplorerView.Appearance group provides property sections to modify appearances of all View elements. To see how this works, change the hovered styles for text (WinExplorerViewAppearances.ItemHovered) and description (WinExplorerViewAppearances.ItemDescriptionHovered) by setting the ForeColor to DodgerBlue. In the WinExplorerViewAppearances.GroupNormal section, set the ForeColor property Red.

Run the application to see these elements painted with custom colors.

Expanded Enabling Read-Only Mode

By default, the WinExplorer View allows data editing. When users double-click description or item caption at runtime, an editor appears that allows them to modify the clicked text. To enable read-only mode, set the ColumnViewOptionsBehavior.Editable property to false.

Expanded See Also

How would you rate this topic?​​​​​​​