In the last couple of releases we have put quite some effort in making our WebForms controls and MVC extensions adaptive so they will look good on any device.
We decided that there were some controls that needed some more work and in the v18.1 release, we have improved a couple of them which are worth mentioning.
CardView Control
The CardView control is a beautiful UI element for adaptive/responsive WebApps. Think about a webshop displaying products.
While we already had some adaptive features in the CardView control, we have added a new adaptive mode LayoutMode.Breakpoints. You can now populate the Breakpoints collection with Breakpoint elements that hold information like CardsPerRow and MaxWidth specification.
Below is an ASPX example:
<Settings LayoutMode="Breakpoints" VerticalScrollBarMode="Hidden" /><SettingsAdaptivity><BreakpointsLayoutSettings CardsPerRow="6"><Breakpoints><dx:CardViewBreakpoint DeviceSize="XLarge" CardsPerRow="5" /><dx:CardViewBreakpoint DeviceSize="Large" CardsPerRow="4" /><dx:CardViewBreakpoint DeviceSize="Medium" CardsPerRow="3" /><dx:CardViewBreakpoint DeviceSize="Small" CardsPerRow="2" /><dx:CardViewBreakpoint DeviceSize="Custom" MaxWidth="450" CardsPerRow="1" /></Breakpoints></BreakpointsLayoutSettings></SettingsAdaptivity>
And this feature is also available on its MVC counterpart:
settings.Settings.LayoutMode = DevExpress.Web.Layout.Breakpoints;
settings.SettingsAdaptivity.BreakpointsLayoutSettings.CardsPerRow = 6;
settings.SettingsAdaptivity.BreakpointsLayoutSettings
.Breakpoints.Add(BreakpointsLayoutDeviceSizes.XLarge, 5);
settings.SettingsAdaptivity.BreakpointsLayoutSettings
.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Large, 4);
settings.SettingsAdaptivity.BreakpointsLayoutSettings
.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Medium, 3);
settings.SettingsAdaptivity.BreakpointsLayoutSettings
.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Small, 2);
settings.SettingsAdaptivity.BreakpointsLayoutSettings
.Breakpoints.Add(450, 1);
As a result, the CardView renders beautiful on all devices. Take a look at how the CardView worked in previous versions (in Flow mode):
And now see how it works with the Breakpoints feature configured:
The WebForms demo can be found here and the MVC one can be found here.
ImageGallery Control
Since the Image Gallery looks more or less similar to the CardView, we decided to implement the Breakpoints feature in the Gallery as well. This results again in a beautiful control that looks good on any device:
The ASPx markup looks similar to the CardView one:
<SettingsBreakpointsLayout ItemsPerPage="30" ItemsPerRow="6"><Breakpoints><dx:ImageGalleryBreakpoint DeviceSize="Medium" ItemsPerRow="4" /><dx:ImageGalleryBreakpoint DeviceSize="Small" ItemsPerRow="3" /><dx:ImageGalleryBreakpoint DeviceSize="Custom" MaxWidth="545" ItemsPerRow="2" /></Breakpoints></SettingsBreakpointsLayout>
And the configuration object for the MVC extension looks like:
settings.Layout = DevExpress.Web.Layout.Breakpoints;
settings.SettingsBreakpointsLayout.ItemsPerPage = 30;
settings.SettingsBreakpointsLayout.ItemsPerRow = 6;
settings.SettingsBreakpointsLayout.Breakpoints
.Add(BreakpointsLayoutDeviceSizes.Medium, 4);
settings.SettingsBreakpointsLayout.Breakpoints
.Add(BreakpointsLayoutDeviceSizes.Small, 3);
settings.SettingsBreakpointsLayout.Breakpoints
.Add(545, 2);
The WebForms demo can be found here and the MVC one can be found here.
DataView Control
While we were on the roll with this new Breakpoints feature, we took the liberty of applying it on the DataView as well. Again, the DataView looks good on any device with this new Layout option.
The configuration is, again, similar to the CardView and ImageGallery:
<SettingsBreakpointsLayout ItemsPerPage="20" ItemsPerRow="6"><Breakpoints><dx:DataViewBreakpoint DeviceSize="Medium" ItemsPerRow="4" /><dx:DataViewBreakpoint DeviceSize="Small" ItemsPerRow="3" /><dx:DataViewBreakpoint DeviceSize="XSmall" ItemsPerRow="2" /><dx:DataViewBreakpoint DeviceSize="Custom" MaxWidth="545" ItemsPerRow="1" /></Breakpoints></SettingsBreakpointsLayout>
For MVC:
settings.Layout = DevExpress.Web.Layout.Breakpoints;
settings.SettingsBreakpointsLayout.ItemsPerPage = 20;
settings.SettingsBreakpointsLayout.ItemsPerRow = 6;
settings.SettingsBreakpointsLayout.Breakpoints
.Add(BreakpointsLayoutDeviceSizes.Medium, 4);
settings.SettingsBreakpointsLayout.Breakpoints
.Add(BreakpointsLayoutDeviceSizes.Small, 3);
settings.SettingsBreakpointsLayout.Breakpoints
.Add(BreakpointsLayoutDeviceSizes.XSmall, 2);
settings.SettingsBreakpointsLayout.Breakpoints
.Add(545, 1);
The WebForms demo can be found here and the MVC one can be found here.
Try it?
Did you know that you can test this feature together with all the other exciting new DevExpress candy even if you’re not a customer (yet)?
Feel free to download a free 30-Day trial versionincluding technical support of our award winning controls!
What do you think?
Let me know what you think of this feature by replying on this article.