[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 - Context Buttons

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

In this tutorial, you will learn how to add context buttons to View items thus transforming the View into an interactive image gallery.

Since the WinExplorer View can be treated as an image gallery with a data source, you may want to allow end-user interaction with these images. This can be done using the Context Buttons feature.

Expanded Enabling the ExtraLarge Style

First, set the View WinExplorerViewOptionsView.Style to WinExplorerViewStyle.ExtraLarge. This will provide enough space for context buttons within the image area.

Then, remove the WinExplorerViewColumns.TextColumn from the WinExplorerView.ColumnSet. Launch the app to see that only images are displayed now.

Expanded Adding Context Buttons

Next, locate the WinExplorerView.ContextButtons property and invoke the editor dialog.

Here you can add context buttons shared by all view items. There are three button types – simple push buttons, check buttons and rating controls. Select a simple Context Button type button type and add it to the collection. In a similar fashion, add another simple button, a check button and a rating control.

The first push button will work as a label displaying the car model name. For the time being, set its ContextButtonBase.Caption to MODEL and align it to MiddleTop.

For the second button, select the question mark image from the DevExpress icon gallery (see ContextItem.Glyph). This button will display additional car information.

Change the ContextItem.Alignment property to move this button to the upper right corner.

The rating item will allow end-users to rate cars, move it to the MiddleBottom position.

Expanded Displaying Context Button Panels

By default, buttons are displayed over the underlying image when you hover the corresponding areas. You can also enable top and bottom panels that will appear as containers for the buttons. Expand the WinExplorerView.ContextButtonOptions property. Set the top and bottom panel's background color to 150, 0, 0, 0 , which is a semi-transparent black color. Then, add padding for both panels.

Run the application to see the result. The panels have appeared but now there's not enough contrast between the panel and button colors.

Return to the Context Buttons editor and set the foreground color to Gainsboro for all items. Make sure to turn glyph skinning feature on so that button icons will be painted with the same color.

Then, launch the app again to see that all colors have been applied.

Expanded Customizing Individual Context Buttons

To properly initialize check boxes and title labels, handle the WinExplorerView.ContextButtonCustomize event. It allows you to customize a button before it is displayed in an item. To set the value in the title button, set its ContextButtonBase.Caption property to the Model Name column value in the current record. Similarly, set the check button's CheckContextButton.Checked property depending on the In Stock column value.

Run the application to see the changes – car models displayed in the top panel and check boxes indicating which cars are in stock.

Expanded Responding to Clicking Context Buttons

Finally, handle the WinExplorerView.ContextButtonClick event, which fires for any clicked button regardless of its type. First, determine which button has been clicked. If it is the question mark button, display a message box with additional information about the car, which is comprised of field values from the same data record.

Run the application and click the question mark button in one of the items to see the message box.

Expanded See Also

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