Back to Devexpress

ASPxImageGallery Class

aspnet-devexpress-dot-web-13463eb4.md

latest12.7 KB
Original Source

ASPxImageGallery Class

An image gallery control.

Namespace : DevExpress.Web

Assembly : DevExpress.Web.v25.2.dll

NuGet Package : DevExpress.Web

Declaration

csharp
public class ASPxImageGallery :
    ASPxDataViewBase,
    ISupportsImageCaching,
    ISupportsFolderBinding,
    IControlDesigner
vb
Public Class ASPxImageGallery
    Inherits ASPxDataViewBase
    Implements ISupportsImageCaching,
               ISupportsFolderBinding,
               IControlDesigner

Remarks

The ASPxImageGallery class allows you to display images as thumbnails, navigate between them, and show images full screen.

Design Time

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.

aspx
<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>

Run Time

csharp
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/";
}
vb
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.

Example: How to add a watermark to images

aspx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ASPxProcessedImageGallery.ascx.cs" Inherits="Watermark.ASPxProcessedImageGallery" %>
3
<dx:ASPxImageGallery ID="ASPxImageGallery" runat="server"></dx:ASPxImageGallery>
aspx
<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>
csharp
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)));
    }
  }
}
vb
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

Implements

Show 15 items

IComponent

IDisposable

IParserAccessor

IDataBindingsAccessor

IControlBuilderAccessor

IControlDesignerAccessor

IExpressionsAccessor

IAttributeAccessor

IUrlResolutionService

INamingContainer

IPostBackDataHandler

IPostBackEventHandler

ICallbackEventHandler

IPropertiesOwner

IDataSourceViewSchemaAccessor

Inheritance

Object Control WebControl ASPxWebControlBase ASPxWebControl ASPxDataWebControlBase ASPxDataWebControl ASPxDataViewBase ASPxImageGallery MVCxImageGallery

See Also

ASPxImageGallery Members

Image Gallery

DevExpress.Web Namespace