ImageGallerySettings.SettingsBreakpointsLayout Property

Provides access to the Image Gallery’s Breakpoint layout mode settings.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v24.1.dll

NuGet Package: DevExpress.Web.Mvc5

Declaration

C#

public ImageGalleryBreakpointsLayoutSettings SettingsBreakpointsLayout { get; }

VB.NET

Public ReadOnly Property SettingsBreakpointsLayout As ImageGalleryBreakpointsLayoutSettings

Property Value

Type	Description
ImageGalleryBreakpointsLayoutSettings	A ImageGalleryBreakpointsLayoutSettings object containing the Image Gallery’s Breakpoint layout mode settings.

Remarks

Use the SettingsBreakpointsLayout property to access the Image Gallery settings related to the Breakpoints layout mode (the ImageGallerySettings.Layout property is set to Layout.Breakpoints).

Refer to the Layout Modes topic for more information.

Online Demo

Image Gallery - Adaptive Layout

Example

The following example illustrates the programmatic and declarative approaches on how to implement three different layout scenarios for three different browser sizes (Small, Medium, Large) as shown on the image below.

Razor (View)

@Html.DevExpress().ImageGallery(settings => {
...
settings.Layout = DevExpress.Web.Layout.Breakpoints;
settings.SettingsBreakpointsLayout.ItemsPerRow = 5;
settings.SettingsBreakpointsLayout.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Small, 3);
settings.SettingsBreakpointsLayout.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Custom, 1300, 4);
...
}).GetHtml()