The requested page is not available for the requested platform. You are viewing the content for Default platform.

Mobile Detail View Layout

XAF supports an extended Detail View layout. The new layout adapts to the device's screen resolution and provides extended customization features. This topic describes this layout's specificities and explains how to use it in your application.

This is the default layout of all new Mobile applications created using Solution Wizard. To enable this layout in applications created in version 17.2 or earlier, open the MobileApplication.cs (MobileApplication.vb) file and set the MobileApplication.EnableExtendedDetailViewLayout field to true in the application's constructor:

public partial class MySolutionMobileApplication : MobileApplication {
    // ... 
    public MySolutionMobileApplication() {
        EnableExtendedDetailViewLayout = true;
        // ...
    }
}

Adaptive Layout for Mobile and Tablet Devices

This layout style uses the Form DevExtreme widget. The widget displays layout items in one column on mobile devices and in several columns on tablets. The following image demonstrates how different devices display a View with two columns:

adaptive-mobile-layout

The column count depends on the number of child groups a displayed group contains. The following image shows the layout's Model Editor settings:

layout-group-with-two-columns

You can specify a group direction - horizontal or vertical - using the layout group's Direction property in the Model Editor.

Collapsible Groups

You can make your layout groups collapsible and display them using the Accordion DevExtreme widget by setting the group's IsCollapsible property to true in the Model Editor.

collapsible-groups-runtime

The IsCollapsible property is available only for groups that meet the following conditions:

  • a group is not tabbed;
  • a group is not placed in a tabbed group;
  • there is only one simple group on each previous nesting layer;
  • a group is not the only node in a current nesting level except for tabbed groups.

A group cannot be collapsible if its property grid does not display the IsCollapsible property.

In the image below, the green arrows point to groups that can be collapsible:

collapsible-groups-modeleditor

You can also specify a default group state - collapsed or not - using the IsCollapsed property. This property appears in a property grid only when its IsCollapsible property is set to true.

Note

Mobile applications do not save a group state that is changed at runtime.

Tabbed Groups

The extended Detail View layout allows you to display groups as tabs.

tabbed-groups-runtime

To do this, create a new TabbedGroup and add more than one layout group to it. Note that XAF does not generate tabs for empty groups and groups with one collection property. Also, XAF displays tabbed groups that contain only one group as simple layout groups. You can change this default behavior as described in the How to: Customize Tab Groups Generation in Mobile Applications topic.

You can specify an icon and caption for each tab in the Model Editor. We recommend that using only icons when you want to display many tabs.

Caption Location

You can specify a layout item's caption location in the Model Editor in two ways:

  • for all items in your Mobile application

    Navigate to the Options | LayoutManagerOptions node and specify the CaptionLocation property;

  • for a certain item

    Navigate to the Views | <DetailView> | Layout | <LayoutGroup> | <LayoutItem> node and specify the CaptionLocation property.

Note

The Bottom value has no effect, the Default value is used instead.

The following image demonstrates a layout with the CaptionLocation property set to Left for all layout items:

captionlocation-mobile