aspnet-devexpress-dot-web-13463eb4.md
An image gallery control.
Namespace : DevExpress.Web
Assembly : DevExpress.Web.v25.2.dll
NuGet Package : DevExpress.Web
public class ASPxImageGallery :
ASPxDataViewBase,
ISupportsImageCaching,
ISupportsFolderBinding,
IControlDesigner
Public Class ASPxImageGallery
Inherits ASPxDataViewBase
Implements ISupportsImageCaching,
ISupportsFolderBinding,
IControlDesigner
The ASPxImageGallery class allows you to display images as thumbnails, navigate between them, and show images full screen.
The ASPxImageGallery control is available on the DX.25.2: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.
Drag the control onto a form and customize the control’s settings, or paste the control’s markup in the page’s source code.
<dx:ASPxImageGallery ID="ASPxImageGallery" runat="server"
ThumbnailHeight="178px" ThumbnailWidth="178px" ClientInstanceName="ClientImageGallery" >
<Paddings Padding="0" />
<SettingsFolder ImageSourceFolder="~/Content/Images/photo_gallery/" ImageCacheFolder="~/Thumb/ImageGalleryThumb/" />
<SettingsTableLayout ColumnCount="3" RowsPerPage="1" />
</dx:ASPxImageGallery>
using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
ASPxImageGallery imageGallery = new ASPxImageGallery();
imageGallery.ID = "imageGallery";
Page.Form.Controls.Add(imageGallery);
imageGallery.ClientInstanceName = "ClientImageGallery";
imageGallery.Paddings.Padding = 0;
imageGallery.SettingsTableLayout.ColumnCount = 3;
imageGallery.SettingsTableLayout.RowsPerPage = 1;
imageGallery.SettingsFolder.ImageSourceFolder = "~/Content/Images/photo_gallery/";
imageGallery.SettingsFolder.ImageCacheFolder = "~/Thumb/ImageGalleryThumb/";
}
Imports DevExpress.Web
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim imageGallery As ASPxImageGallery = New ASPxImageGallery()
imageGallery.ID = "imageGallery"
Page.Form.Controls.Add(imageGallery)
imageGallery.ClientInstanceName = "ClientImageGallery"
imageGallery.Paddings.Padding = 0
imageGallery.SettingsTableLayout.ColumnCount = 3
imageGallery.SettingsTableLayout.RowsPerPage = 1
imageGallery.SettingsFolder.ImageSourceFolder = "~/Content/Images/photo_gallery/"
imageGallery.SettingsFolder.ImageCacheFolder = "~/Thumb/ImageGalleryThumb/"
End Sub
Note
DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.
The ASPxImageGallery control can be populated with items in different ways:
An image gallery displays a pager that allows navigation between thumbnails. When a thumbnail is clicked, the fullscreen viewer opens.
The Image Gallery supports the virtual paging mode (ImageGalleryFullscreenViewerSettings.EnableVirtualPaging) that allows end-users to load images on demand when navigating using the pager.
Note
ASPxImageGallery control provides you with comprehensive client-side functionality implemented in JavaScript code.
The control’s client-side API is enabled if the ASPxDataViewBase.ClientInstanceName property is defined or any client event is handled.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ASPxProcessedImageGallery.ascx.cs" Inherits="Watermark.ASPxProcessedImageGallery" %>
3
<dx:ASPxImageGallery ID="ASPxImageGallery" runat="server"></dx:ASPxImageGallery>
<uc1:ASPxProcessedImageGallery runat="server" ID="ASPxProcessedImageGallery"
ProcessedImageFolder="~/Images/Processed" SourceImageFolder="~/Images/Original"
WatermarkImageUrl="~/Images/watermark.png" >
<ImageGallery ClientInstanceName="imageGallery"
ThumbnailWidth="120" ThumbnailHeight="160" Layout="Flow">
<SettingsFolder ImageCacheFolder="~/Thumb" />
<SettingsFlowLayout ItemsPerPage="5" />
<ItemTextTemplate>
<%# System.IO.Path.GetFileNameWithoutExtension(Container.Item.ImageUrl) %>
</ItemTextTemplate>
</ImageGallery>
</uc1:ASPxProcessedImageGallery>
public partial class ASPxProcessedImageGallery : System.Web.UI.UserControl {
public ASPxImageGallery ImageGallery {
get {
return ASPxImageGallery;
}
}
public string ProcessedImageFolder { get; set; }
public string SourceImageFolder { get; set; }
public string WatermarkImageUrl { get; set; }
protected void Page_Init(object sender, EventArgs e) {
foreach (string item in Directory.GetFiles(Server.MapPath(SourceImageFolder))) {
if (!File.Exists(SourceImageFolder + "\\" + Path.GetFileName(item)))
ProcessImage(item);
}
ImageGallery.SettingsFolder.ImageSourceFolder = ProcessedImageFolder;
}
private void ProcessImage(string name) {
using (Image image = Image.FromFile(name))
using (Image watermarkImage = Image.FromFile(Server.MapPath(WatermarkImageUrl)))
using (Graphics imageGraphics = Graphics.FromImage(image))
using (TextureBrush watermarkBrush = new TextureBrush(watermarkImage)) {
int x = (image.Width - watermarkImage.Width);
int y = (image.Height - watermarkImage.Height);
watermarkBrush.TranslateTransform(x, y);
imageGraphics.FillRectangle(watermarkBrush, new Rectangle(new Point(x, y), new Size(watermarkImage.Width + 1, watermarkImage.Height)));
image.Save(Server.MapPath(ProcessedImageFolder + "\\" + Path.GetFileName(name)));
}
}
}
Partial Public Class ASPxProcessedImageGallery
Inherits System.Web.UI.UserControl
<PersistenceMode(PersistenceMode.InnerProperty), DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
Public ReadOnly Property ImageGallery() As ASPxImageGallery
Get
Return ASPxImageGallery
End Get
End Property
<PersistenceMode(PersistenceMode.Attribute), DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
Public Property ProcessedImageFolder() As String
<PersistenceMode(PersistenceMode.Attribute), DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
Public Property SourceImageFolder() As String
<PersistenceMode(PersistenceMode.Attribute), DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
Public Property WatermarkImageUrl() As String
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
For Each item As String In Directory.GetFiles(Server.MapPath(SourceImageFolder))
If Not File.Exists(SourceImageFolder & "\" & Path.GetFileName(item)) Then
ProcessImage(item)
End If
Next item
ImageGallery.SettingsFolder.ImageSourceFolder = ProcessedImageFolder
End Sub
Private Sub ProcessImage(ByVal name As String)
Using image As Image = System.Drawing.Image.FromFile(name)
Using watermarkImage As Image = System.Drawing.Image.FromFile(Server.MapPath(WatermarkImageUrl))
Using imageGraphics As Graphics = Graphics.FromImage(image)
Using watermarkBrush As New TextureBrush(watermarkImage)
Dim x As Integer = (image.Width - watermarkImage.Width)
Dim y As Integer = (image.Height - watermarkImage.Height)
watermarkBrush.TranslateTransform(x, y)
imageGraphics.FillRectangle(watermarkBrush, New Rectangle(New Point(x, y), New Size(watermarkImage.Width + 1, watermarkImage.Height)))
image.Save(Server.MapPath(ProcessedImageFolder & "\" & Path.GetFileName(name)))
End Using
End Using
End Using
End Using
End Sub
End Class
Show 15 items
Object Control WebControl ASPxWebControlBase ASPxWebControl ASPxDataWebControlBase ASPxDataWebControl ASPxDataViewBase ASPxImageGallery MVCxImageGallery
See Also