Tutorial: WinExplorer View - Basics

  • 4 minutes to read

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

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.

WinExplorerView_DemoExample

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.

WinExplorerView_InitialGrid

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.

WinExplorerView_SwtchingViewType

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

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.

WinExplorerView_ColumnSetProperty

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.

WinExplorerView_ImageAndTextResult

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

WinExplorerView_DesAndCheckBoxColumns

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.

WinExplorerView_ShowCheckBoxes

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

WinExplorerView_CheckBoxesResult

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.

WinExplorerView_StyleProperty

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

WinExplorerView_ContentStyle

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.


public Form1() {
    // ...
    foreach (BarCheckItemLink itemLink in barSubItem1.ItemLinks) {
        (itemLink.Item as BarCheckItem).CheckedChanged += Form1_CheckedChanged;
    }
}

void Form1_CheckedChanged(object sender, ItemClickEventArgs e) {
    SetGridStyle(e.Item.Caption);
}

void SetGridStyle(string buttonName) {
    switch (buttonName) {
        case "Small":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.Small;
            break;
        case "Medium":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.Medium;
            break;
        case "Large":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.Large;
            break;
        case "Extra Large":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.ExtraLarge;
            break;
        case "List":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.List;
            break;
        case "Tiles":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.Tiles;
            break;
        case "Content":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.Content;
            break;
        case "Default":
            winExplorerView1.OptionsView.Style = DevExpress.XtraGrid.Views.WinExplorer.WinExplorerViewStyle.Default;
            break;
    }
}

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

WinExplorer View Style Image
Small WinExplorerView_SmallStyle
Medium WinExplorerView_CheckBoxesResult
Large WinExplorerView_LargeStyle
ExtraLarge WinExplorerView_ExtraLargeStyle
List WinExplorerView_ListStyle
Tiles WinExplorerView_TilesStyle
Content WinExplorerView_ContentStyle

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.

WinExplorerView_EnabledColumn

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

WinExplorerView_DisabledItems

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.

WinExplorerView_GroupColumn

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

WinExplorerView_GroupingResult

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.

WinExplorerView_WithExpandButtons

See Also