Skip to end of metadata
Go to start of metadata

One of the most powerful features in Crosslight for Windows Phone is the comprehensive support for building data form. Based on the form metadata defined in the shared application layer, Crosslight automatically creates a beautiful data form complete with the layout and editing controls. Crosslight for Windows Phone includes support to all editor types defined in the Crosslight foundation – from basic editors such as text field, multiple text field, check box, date time picker to advanced editors like image picker, selection control.

This section explains the features and desired behaviors of the each editor type on the Windows Phone platform. For more information about the basics of form metadata and the available editor types, see Building Rich Data Entry Form.

On this page:

Introducing Phone Form Page

Creating astounding data forms in Windows Phone with Crosslight is easier than ever. With just a single declaration of code, you can create data forms that presents a decent layout rendering with rich editing controls. Introducing PhoneFormPage Class, the class that will automatically reads the form metadata defined from the shared application layer. The following example shows the usage of PhoneFormPage Class.

 

The code behind:

Crosslight Windows Phone Form Builder Features

In general, Crosslight Form Builder for Windows Phone includes the following key features:

  • Versatile data editing form based on list view user interface pattern.
  • Conforms to the Microsoft design standards and guidelines.
  • Supports both plain and grouped style.
  • Include pre-built layouts such as left detail, right detail, and row detail.
  • Advanced composite section style rendered in pixel-perfect fashion, supports image and fields to be positioned side-by-side.
  • Automatic rotation handling.
  • Thoughtfully-designed user experiences, for instance, opened picker will be re-opened after rotation – all in smooth animation.
  • Includes a sophisticated image picker supporting take photo from camera, choosing from existing library, image editing (move, scale and crop), as well as delete photo which binds directly to the model.
  • High performance and memory-efficient image processing allows you to obtain both full size thumbnail image in the ViewModel.
  • Supports advanced image picker features that let you add your own custom commands and intercept the image results in the ViewModel.
  • Supports runtime interactivity such as expanding/hiding and enabling/disabling certain controls based on certain conditions.

For details, see the following illustration.

Keep in mind that the editors and their behaviors are not controlled in the Windows Phone application layer. Instead, they are defined in the form metadata at the shared application layer which enable other platforms such as iOS and Android to consume the same metadata.

For more information about form metadata, see Form Builder Overview

For more information about data validation, see Validating Data

Customizing Editor Features Programmatically

In the previous sections, you have learnt about Crosslight Form Builder and how it enables you to build beautiful, fully-functional data form in minutes with the form metadata attributes. The form metadata is specifically designed for cross-platform compatibility in mind. In general, it does not focus on the platform-specific features. 

The best practices and most recommended guidelines to build cross-platform data form with Crosslight is to use the Form Builder to define behaviors that work consistently in all platforms. If platform-specific editor customization is needed, then perform additional customization only for the particular platform in its own layer.

Crosslight lets you elegantly customize the platform-specific features and behaviors for every editor generated by the Form Builder. In Windows Phone, you can access the generated editor views from the Form property provided in PhoneFormPage, then invoke the GetProperties method to get all property definitions across all sections defined in the form definition.

The Following code example shows to access the Quantity property definition, and then customize the background color of the content view. Note that the View conforms to IComponentView interface.