This example illustrates how to load BaseGallery item images asynchronously. This loading mode is useful when you have a lot of gallery items and/or their images are very large, which can cause performance issues on the application start-up. In this example, the GalleryControl with the attached GalleryControlGallery is used.
Important
Asynchronously loaded images can be retrieved from any source. This particular example uses the DataSet object that loads data from the DimProducts table of the Microsoft's sample Adventure Works database. For this lesson, you will only need two columns from this table - EnglishProductName and LargePhoto. Refer to MSDN if you experience problems adding this data source to your application.
- Drop a GalleryControl onto the form and, using its smart tag, create a new group that will contain our items.
- Populate the gallery group with GalleryItems. Again, the way you do it is irrelevant. For example, the code below generates a blank item for each data source record and assigns the EnglishProductName column's value to this item.
| C# |
private void createItems() {
dimProductTableAdapter1.Fill(this.adventureWorksDW2008R2DataSet.DimProduct);
for (int row = 0; row < adventureWorksDW2008R2DataSet.DimProduct.Count; row++) {
string itemName = adventureWorksDW2008R2DataSet.DimProduct.Rows[row][adventureWorksDW2008R2DataSet.DimProduct.EnglishProductNameColumn].ToString();
galleryControl1.Gallery.Groups[0].Items.Add(new DevExpress.XtraBars.Ribbon.GalleryItem(null, itemName, null));
}
}
|
| VB |
Private Sub createItems()
dimProductTableAdapter1.Fill(Me.adventureWorksDW2008R2DataSet.DimProduct)
For row As Integer = 0 To adventureWorksDW2008R2DataSet.DimProduct.Count - 1
Dim itemName As String = adventureWorksDW2008R2DataSet.DimProduct.Rows(row)(adventureWorksDW2008R2DataSet.DimProduct.EnglishProductNameColumn).ToString()
galleryControl1.Gallery.Groups(0).Items.Add(New DevExpress.XtraBars.Ribbon.GalleryItem(Nothing, itemName, Nothing))
Next
End Sub
|
- To enable loading gallery item images asynchronously, access the OptionsImageLoad properties section and set the GalleryOptionsImageLoad.AsyncLoad property to true. You can also set the desired animation type and enable or disable the random image loading order. The GalleryOptionsImageLoad.DesiredThumbnailSize property sets the size of an image that will be created from the data source data. This thumbnail image will be later resized according to the ItemImageLayout property to fit the image size specified by the ImageSize property.
| C# |
private void setGalleryOptions() {
galleryControl1.Gallery.ShowItemText = true;
galleryControl1.Gallery.ImageSize = new Size(256, 256);
galleryControl1.Gallery.ItemCheckMode = DevExpress.XtraBars.Ribbon.Gallery.ItemCheckMode.Multiple;
galleryControl1.Gallery.ItemImageLayout = DevExpress.Utils.Drawing.ImageLayoutMode.ZoomInside;
galleryControl1.Gallery.OptionsImageLoad.AsyncLoad = true;
galleryControl1.Gallery.OptionsImageLoad.AnimationType = DevExpress.Utils.ImageContentAnimationType.SegmentedFade;
galleryControl1.Gallery.OptionsImageLoad.DesiredThumbnailSize = new Size(1024, 1024);
}
|
| VB |
Private Sub setGalleryOptions()
galleryControl1.Gallery.ShowItemText = True
galleryControl1.Gallery.ImageSize = New Size(256, 256)
galleryControl1.Gallery.ItemCheckMode = DevExpress.XtraBars.Ribbon.Gallery.ItemCheckMode.Multiple
galleryControl1.Gallery.ItemImageLayout = DevExpress.Utils.Drawing.ImageLayoutMode.ZoomInside
galleryControl1.Gallery.OptionsImageLoad.AsyncLoad = True
galleryControl1.Gallery.OptionsImageLoad.AnimationType = DevExpress.Utils.ImageContentAnimationType.SegmentedFade
galleryControl1.Gallery.OptionsImageLoad.DesiredThumbnailSize = New Size(1024, 1024)
End Sub
|
- Your application will now raise the GetThumbnailImage event each time it needs to display an item with no image. Handle this event to call the e.CreateThumbnailImage method. This method will receive an image loaded from the data source LargePhoto column and create a thumbnail image of the specific size set in the previous step. To get the item index (and thus the index of the data source row related to this item), read the e.DataSourceIndex property. Finally, assign the image returned by the CreateThumbnailImage method to the e.ThumbnailImage property.
| C# |
private void galleryControlGallery1_GetThumbnailImage(object sender, DevExpress.Utils.ThumbnailImageEventArgs e) {
var memStream = new MemoryStream(adventureWorksDW2008R2DataSet.DimProduct.Rows[e.DataSourceIndex][adventureWorksDW2008R2DataSet.DimProduct.LargePhotoColumn] as byte[]);
Image thumbImg = Image.FromStream(memStream);
e.ThumbnailImage = e.CreateThumbnailImage(thumbImg);
}
|
| VB |
Private Sub galleryControlGallery1_GetThumbnailImage(sender As Object, e As DevExpress.Utils.ThumbnailImageEventArgs)
Dim memStream = New MemoryStream(TryCast(adventureWorksDW2008R2DataSet.DimProduct.Rows(e.DataSourceIndex)(adventureWorksDW2008R2DataSet.DimProduct.LargePhotoColumn), Byte()))
Dim thumbImg As Image = Image.FromStream(memStream)
e.ThumbnailImage = e.CreateThumbnailImage(thumbImg)
End Sub
|
- Optionally, handle the GetLoadingImage event to pass your custom loading indicator to the e.LoadingImage property. This indicator will be shown each time the gallery item is already visible but its image is still being loaded.
The following animation illustrates the runtime result. You can see the images being loaded after gallery items and the animation effect following this process.
The complete code is listed below.
| C# |
namespace GalleryAsyncLoad {
public partial class Form1 : XtraForm {
public Form1() {
InitializeComponent();
setGalleryOptions();
createItems();
}
private void Form1_Load(object sender, EventArgs e) {
this.dimProductTableAdapter1.Fill(this.adventureWorksDW2008R2DataSet.DimProduct);
}
private void galleryControlGallery1_GetThumbnailImage(object sender, DevExpress.Utils.ThumbnailImageEventArgs e) {
var memStream = new MemoryStream(adventureWorksDW2008R2DataSet.DimProduct.Rows[e.DataSourceIndex][adventureWorksDW2008R2DataSet.DimProduct.LargePhotoColumn] as byte[]);
Image thumbImg = Image.FromStream(memStream);
e.ThumbnailImage = e.CreateThumbnailImage(thumbImg);
}
private void setGalleryOptions() {
galleryControl1.Gallery.ShowItemText = true;
galleryControl1.Gallery.ImageSize = new Size(256, 256);
galleryControl1.Gallery.ItemCheckMode = DevExpress.XtraBars.Ribbon.Gallery.ItemCheckMode.Multiple;
galleryControl1.Gallery.ItemImageLayout = DevExpress.Utils.Drawing.ImageLayoutMode.ZoomInside;
galleryControl1.Gallery.OptionsImageLoad.AsyncLoad = true;
galleryControl1.Gallery.OptionsImageLoad.AnimationType = DevExpress.Utils.ImageContentAnimationType.SegmentedFade;
galleryControl1.Gallery.OptionsImageLoad.DesiredThumbnailSize = new Size(1024, 1024);
}
private void createItems() {
dimProductTableAdapter1.Fill(this.adventureWorksDW2008R2DataSet.DimProduct);
for (int row = 0; row < adventureWorksDW2008R2DataSet.DimProduct.Count; row++) {
string itemName = adventureWorksDW2008R2DataSet.DimProduct.Rows[row][adventureWorksDW2008R2DataSet.DimProduct.EnglishProductNameColumn].ToString();
galleryControl1.Gallery.Groups[0].Items.Add(new DevExpress.XtraBars.Ribbon.GalleryItem(null, itemName, null));
}
}
}
}
|
| VB |
Namespace GalleryAsyncLoad
Public Partial Class Form1
Inherits XtraForm
Public Sub New()
InitializeComponent()
setGalleryOptions()
createItems()
End Sub
Private Sub Form1_Load(sender As Object, e As EventArgs)
Me.dimProductTableAdapter1.Fill(Me.adventureWorksDW2008R2DataSet.DimProduct)
End Sub
Private Sub galleryControlGallery1_GetThumbnailImage(sender As Object, e As DevExpress.Utils.ThumbnailImageEventArgs)
Dim memStream = New MemoryStream(TryCast(adventureWorksDW2008R2DataSet.DimProduct.Rows(e.DataSourceIndex)(adventureWorksDW2008R2DataSet.DimProduct.LargePhotoColumn), Byte()))
Dim thumbImg As Image = Image.FromStream(memStream)
e.ThumbnailImage = e.CreateThumbnailImage(thumbImg)
End Sub
Private Sub setGalleryOptions()
galleryControl1.Gallery.ShowItemText = True
galleryControl1.Gallery.ImageSize = New Size(256, 256)
galleryControl1.Gallery.ItemCheckMode = DevExpress.XtraBars.Ribbon.Gallery.ItemCheckMode.Multiple
galleryControl1.Gallery.ItemImageLayout = DevExpress.Utils.Drawing.ImageLayoutMode.ZoomInside
galleryControl1.Gallery.OptionsImageLoad.AsyncLoad = True
galleryControl1.Gallery.OptionsImageLoad.AnimationType = DevExpress.Utils.ImageContentAnimationType.SegmentedFade
galleryControl1.Gallery.OptionsImageLoad.DesiredThumbnailSize = New Size(1024, 1024)
End Sub
Private Sub createItems()
dimProductTableAdapter1.Fill(Me.adventureWorksDW2008R2DataSet.DimProduct)
For row As Integer = 0 To adventureWorksDW2008R2DataSet.DimProduct.Count - 1
Dim itemName As String = adventureWorksDW2008R2DataSet.DimProduct.Rows(row)(adventureWorksDW2008R2DataSet.DimProduct.EnglishProductNameColumn).ToString()
galleryControl1.Gallery.Groups(0).Items.Add(New DevExpress.XtraBars.Ribbon.GalleryItem(Nothing, itemName, Nothing))
Next
End Sub
End Class
End Namespace
|