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 - Basics

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

Expanded WinExplorer View Features

The WinExplorer View emulates the Microsoft Windows Explorer UI. The DevExpress Demo Center showcases the WinExplorer View in different scenarios. In one of the demos, the View is used to recreate the file manager experience. Much like in the Windows Explorer, there are seven display types ranging from a large image display to a simple list. Coupled with Context Buttons and Custom Grouping features, the WinExplorer View allows you to create a highly customizable image gallery.

Expanded Starting Point

Start with a grid control that displays data using the default Grid View format. Run the application and examine available data that includes car information with images.

Expanded Switching to the WinExplorer View Format

Try to create a more elegant layout by switching the View to the WinExplorer type. To do so, use the grid's Level Designer.

After you've switched the View type, the grid becomes empty and you need to build the layout manually.

Expanded WinExplorer View Main Columns

The WinExplorer View is designed to visualize four main data fields – images in four different sizes, text, description and checkbox. Additionally, you can specify a column that will apply data grouping, and a column that manages items’ enabled state. All these columns are specified within the WinExplorerView.ColumnSet section. Assign the Model Name column to the WinExplorerViewColumns.TextColumn property, and the Image column to the WinExplorerViewColumns.SmallImageColumn property.

Run the application. Note that if not all image sizes have been associated with a column, the View will automatically resize images when you switch between display styles.

Now set the remaining primary WinExplorerView.ColumnSet properties – description and check box.

If you launch the app, you can see that nothing has changed. To show checkboxes, you need to expand WinExplorerView.OptionsView and set the WinExplorerViewOptionsView.ShowCheckBoxes property to true.

As you can now see, checkboxes appear next to each item. They are checked if the corresponding field values are set to true.

Expanded WinExplorer View Styles

Item descriptions are only displayed in specific display styles, which is specified by the WinExplorerViewOptionsView.Style property under GridView.OptionsView. Change the value to WinExplorerViewStyle.Content.

Run the application to see the description displayed in this layout.

You can add a control to the Ribbon to allow end-users to select one of the seven available display styles. Write the handler that changes the WinExplorerViewOptionsView.Style property value depending on the selected dropdown item.

Launch the app and see how it works by trying different styles.

WinExplorer View Style Image
Small
Medium
Large
ExtraLarge
List
Tiles
Content

Expanded Disabling Specific Items

Return to design time and hide the check boxes by setting the WinExplorerViewOptionsView.ShowCheckBoxes property back to false and then assign the InStock column to the WinExplorerViewColumns.EnabledColumn property instead of WinExplorerViewColumns.CheckBoxColumn.

If you launch the app, you can see that now items for sold-out cars appear grayed-out and not clickable.

Expanded Grouping Data

Finally, you can group your data against values in a column assigned to the WinExplorerViewColumns.GroupColumn property. To group cars by category, first set the WinExplorerViewColumns.GroupColumn property to the Category Name column.

Run the application to see data grouping applied in the WinExplorerViewStyle.Content and WinExplorerViewStyle.Medium display styles.

Note that the group titles are not interactive. Return to design time, expand WinExplorerView.OptionsView and set the WinExplorerViewOptionsView.ShowExpandCollapseButtons property to true. Now run the app to see the groups become collapsible. End-users can double-click captions to expand and collapse data groups.

Expanded See Also

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