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
   [Expand]View Technology
   [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
   [Collapse]Asynchronous Image Load
     Asynchronous Image Load in WinExplorer and Tile Views
   [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

Asynchronous Image Load in WinExplorer and Tile Views

Displaying images may take quite a lot of time, especially if there are many images and they are large. The Asynchronous Image Load feature allows you to:

  • improve the Data Grid's performance when showing large images on the initial Data Grid load and on scrolling through records.
  • automatically create and cache thumbnails (small versions of the original images)
  • manually create thumbnails, using a dedicated event, even if there are no images in the source.

When you enable the async image load, the View displays textual data for the currently visible records immediately. Images are displayed for these records one by one, asynchronously, in a background thread.

Important

The async image load is performed in a non-UI thread.

Important

The async image load feature does not support the BindingSource component, which may fail when one tries to obtain its data from a different thread.

Expanded Source Images and Their Thumbnails

Every time a source image needs to be displayed within a certain viewport, this image is scaled first to create a thumbnail. If the source image is large, scaling this image down requires some time. Thus, it is best to create thumbnails once and then re-use these thumbnails on re-displaying the records.

Generating and caching thumbnails is only supported by the Data Grid when the async image load is enabled. When this feature is disabled, a thumbnail is generated for a source image every time a record needs to be displayed and re-displayed. No thumbnail caching is available in this mode.

Tip

Besides images provided by a data source, you can provide images for the Data Grid Views using unbound columns.

Expanded View Properties to Provide Source Images for Asynchronous Load

In the WinExplorerView, async image load is supported for all images displayed in View records. The following properties specify display images in this View:

In the TileView, the async image load feature is supported for tile background images. Use the following property to provide these background images.

Refer to the following sections to learn about typical async image load scenarios.

Expanded Scenario 1: You need to generate thumbnails automatically for existing source images

It is assumed that the View is aware of an image column that contains source images. You assigned this image column(s) using the property(s) listed in the View Properties to Provide Source Images for Asynchronous Load section above.

Do the following:

  • Enable async image load with the OptionsImageLoad.AsyncLoad setting.
  • Set the View's OptionsImageLoad.LoadThumbnailImagesFromDataSource property to false.
  • Optionally, set the required thumbnail size using the OptionsImageLoad.DesiredThumbnailSize property.
When the LoadThumbnailImagesFromDataSource property is set to false, the Data Grid assumes that the source image column contains large images (not small thumbnails). The Data Grid then automatically generates thumbnails of the size specified by the DesiredThumbnailSize setting, and caches them, provided that caching is enabled (the OptionsImageLoad.CacheThumbnails setting). The next time a record is re-displayed, the View shows the previously generated thumbnail.

WinExplorer View API:

Tile View API:

Expanded Scenario 2: You need to generate thumbnails manually (a source image column is specified).

It is assumed that the View is aware of an image column that can contain source images. You assigned this image column(s) to the View using the property(s) listed in the View Properties to Provide Source Images for Asynchronous Load section above.

The specified image column can contain images or links to images in all, none or only several records.

Do the following:

  • Enable async image load with the OptionsImageLoad.AsyncLoad setting.
  • Set the View's OptionsImageLoad.LoadThumbnailImagesFromDataSource property to false.
  • Handle the View's GetThumbnailImage event to supply custom thumbnail images.

    The GetThumbnailImage event will fire for each record, regardless of whether it contains an image in the source image column or not.

The View caches the supplied thumbnails, provided that caching is enabled (the OptionsImageLoad.CacheThumbnails setting). The next time a record is re-displayed, the View shows the previously generated thumbnail.

WinExplorer View API:

Tile View API:

Expanded TileView Example

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T529326.

This example shows how to manually generate custom tile background images (thumbnails) in Tile View and display them asynchronously.

The TileView is bound to a list that contains texture names. We need to create custom background thumbnails for all tiles based on corresponding texture names, and display these images asynchronously.
Thumbnails are generated using the GetThumbnailImage event. The async image load is enabled with the AsyncLoad setting.


Expanded Scenario 3: You need to generate thumbnails manually (a source image column is not specified)

Important

This use case is only supported by the WinExplorer View.

It is assumed that the View is not aware of any image column that may contain source images: no image column is specified using the property(s) listed in the View Properties to Provide Source Images for Asynchronous Load section above.

Do the following:

  • Enable async image load with the OptionsImageLoad.AsyncLoad setting.
  • Handle the GetThumbnailImage event to create thumbnails manually and supply them to the View.

    This event will fire on demand, so you can create and supply a thumbnail for each record.

The View caches the supplied thumbnails, provided that caching is enabled (the OptionsImageLoad.CacheThumbnails setting). The next time a record is re-displayed, the View shows the previously generated thumbnail.

WinExplorer View API:

Expanded Additional Settings and Events

  • AnimationType - Specifies the animation effect for displaying thumbs. By default, it equals AnimationType.None, which means thumbs will instantly appear when ready. You can select other animation types, such as segmented fade (in the animation below) or push.

  • RandomShow - Specifies whether or not grid records load their thumbs in random order.
  • GetLoadingImage event - Allows you to set a custom loading indicator, displayed while the thumbnail image is being created. The default loading indicator depends on the currently applied application skin. The following image demonstrates a custom loading indicator.

Expanded See Also

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