Tutorial: WinExplorer View - Item Customization

  • 3 minutes to read

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.

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.

WinExplorerView_OptionsViewStyles

  • 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.

    WinExplorerView_MediumShowDescription

    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.

    WinExplorerView_MediumItemsWithDesc

  • 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.

    WinExplorerView_MediumItemsWithLargeDesc

  • 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.

    WinExplorerView_ImageToTextIndent

  • 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.

    WinExplorerView_ImageSizeProperty

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.

WinExplorerView_AppearanceGroupNormal

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

WinExplorerView_AppearanceResult

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.

WinExplorerView_EditableProperty

See Also