[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
   [Collapse]Get Started With Data Grid and Views
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Expand]Banded Views
     [Collapse]WinExplorer View
       Tutorial: WinExplorer View - Basics
       Tutorial: WinExplorer View - Context Buttons
       Tutorial: WinExplorer View - Item Customization
     [Expand]Tile View
     [Expand]Filter and Search
     [Expand]Split Presentation
     [Expand]Row Preview Sections
   [Expand]Data Binding
    Unbound Columns
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [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]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

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

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

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