XAF Mobile Wrappers for DevExtreme Widgets

XAF Mobile applications use wrappers to access and customize DevExtreme widgets. These wrappers are the Dictionary<String, Object> type's descendants contained in the DevExpress.ExpressApp.Mobile.MobileModel namespace.

The following table lists the built-in XAF Mobile wrappers for DevExtreme widgets:

XAF Mobile wrapper

Actual control(s) (widget or HTML element)

What the control displays

Accordion

Accordion

Collapsible layout groups

ActionSheet

ActionSheet

SingleChoiceAction with the ChoiceActionBase.IsHierarchical property set to true

or the SingleChoiceAction.ItemType property set to ItemIsOperation

Button

Button

A View with Reference Properties list when clicked

ColorPicker

ColorBox

Color Properties

DateBox

DateBox

Date and Time Properties

Fieldset

<div>

A group of controls with captions

FileImage

<input>+<img>

BLOB Image Properties

Form

Form

Groups of controls with captions

Image

<img>

BLOB Image Properties

Enumeration Properties

Input

TextBox

String Properties

Label

<div>

Numeric Properties

Date and Time Properties

Reference (Foreign Key, Complex Type) Properties

Enumeration Properties

Type Properties

LinkComponent

<a>

File Attachment Properties

List

List

Collection Properties

Objects in a List View

Lookup

Lookup

Reference (Foreign Key, Complex Type) Properties

Enumeration Properties

Type Properties

NumberBox

NumberBox

Numeric Properties

Passbox

TextBox with the mode property set to password

String Properties

ScrollView

ScrollView

A group of controls

StackPanel

<div> or ScrollView

A group of controls

Switch

Switch

Boolean Properties

TextArea

TextArea

String Properties

You can use DevExtreme widgets' property names as dictionary keys, except for the "type" key reserved for internal use. Refer to the DevExtreme API Reference to determine what keys are available for a particular widget. To access the Button and DateBox widgets' type property, use the "buttonType" and "format" keys accordingly.

The code snippet below demonstrates how to change the Button widget's text property value with the "text" dictionary key.

using DevExpress.ExpressApp.Mobile.MobileModel;
// ...
Button simpleButton = new Button();
simpleButton["text"] = "Click me!";

You can access an existing XAF Mobile wrapper using the ViewItem.Control and ListEditor.Control properties.

XAF Mobile custom modules allow you to show a DevExtreme widget that does not have a wrapper (see How to: Use a DevExtreme Chart in a Mobile Application).

The topics below show more examples of how to access and customize DevExtreme widgets in XAF Mobile applications: