How To Customize DevExpress ASP.NET Check Box control for the iOS theme

The DevExpress ASP.NET controls are customizable. In fact, you can do things like move text from the left side of a control to the right side:

In the image above, there is a DevExpress ASP.NET CheckBox control and CheckBoxList control. Both of these are displaying the DevExpress iOS theme for our ASP.NET products. The DevExpress ASP.NET iOS theme allows you display DevExpress ASP.NET controls with a native iOS look. However, they are still ASP.NET controls and not native apps. To create native apps using HTML5, check out DevExtreme.

Still, the iOS theme is very useful in getting reach for your websites and giving your end-users a familiar experience.

CheckBox & iOS Switch

On iOS, a check box is displayed as a switch control. This makes it easier for users on mobile devices to touch (select) and get notified of the changed state.

However, a customer asked if this was possible:

One thing I’d like to see added is a property when using IOS theme, to have the “switch” be to the left of the text. And possible a column width property when multiple columns are used to correct for the case as shown below, where even a short line of text gets put on 2 lines. -James

For reference, James has a website created with DevExpress ASP.NET controls. The website is slick in that uses browser detection and automatically displays the iOS theme for mobile devices. James says that this solution has worked out well for them and their users seem to like it too.

Custom Text Alignment

To solve James' question, we can do 3 easy things with DevExpress ASP.NET that do not require a new theme or property to be created:

1. Set the ASPxCheckBox/ASPxCheckBoxList TextAlign property to "Right" to show a label on the right side of a switch.
2. Set the Web.config -> devExpress -> themes -> styleSheetTheme property (not the "theme" property) to "iOS" to keep the markup style settings (see the http://www.devexpress.com/kbid=KA18643 KB Article for details).
3. Define a specific CSS selector to avoid text wrapping (see the https://www.devexpress.com/issue=Q464106 KB Article for details):

Page:

<style type="text/css">.SwitchNoWraplabel { white-space:nowrap!important; }</style>

ASPxCheckBox:

<dx:ASPxCheckBoxID="ASPxCheckBox1"runat="server"Text="Switch Demo"TextAlign="Right"SkinID="Switch"></dx:ASPxCheckBox>

ASPxCheckBoxList:

<dx:ASPxCheckBoxListID="ASPxCheckBoxList1"runat="server"CssClass="SwitchNoWrap"TextAlign="Right"RepeatDirection="Horizontal"RepeatColumns="2"><Items><dx:ListEditItemText="Item 1"/><dx:ListEditItemText="Item 2"/><dx:ListEditItemText="Item 3"/><dx:ListEditItemText="Item 4"/></Items></dx:ASPxCheckBoxList>

Web.config:

<configuration>
  ...<devExpress><themes...styleSheetTheme="iOS"theme=""/></devExpress></configuration>

Download a sample project with the above settings here:
DevExpressASPCheckBoxiOSDemo.zip

(Use the DevExpress Project Converter tool if you're using a different version than 13.2.5).

iOS Guidelines

In my discussing this approach with one of our DevExpress iOS developers (and overalll fan), he mentioned that putting the caption on the right side of a switch is not standard on iOS. However, because this is a ASP.NET website and not a native app, you will not have to worry too much about Apple's App Store guidelines, with the proviso that you may confuse your end-users if they are used to the standard text alignment.

You can read the Apple iOS Human Interface Guidelines here.

Rest assured, though, that when the DevExpress ASP.NET team created the iOS theme we followed these guidelines as much as possible and as much as was feasible.