Skip to end of metadata
Go to start of metadata

This page describes how you can add custom binding properties that are not included in Crosslight's built-in bindable properties. Since Crosslight leverages MVVM, Crosslight provides a way to bind the property of View to the property of ViewModel through BindingProvider class in the Core project. To learn more about Crosslight data binding, please refer to Understanding Data Binding and MVVM Design Pattern.

Crosslight includes predefined common bindable properties that work across all platforms such as Text, ImageSource, Value, and so on. However, Crosslight was designed with extensible architecture that enables you to extend or add your own custom bindable properties. This page guides you how to create custom bindable properties and implement the binding adapter for each platform, including iOS and Android.

For more information on built-in bindable properties available in Crosslight, please see BindableProperties class.

In the following example, you will learn how to create a bindable property for TextSize which supports two-way data binding to the Android EditText and iOS UITextField control. Please follow the steps in the section below.

On this page:

Register Property to BindableProperty

First, you will need to register the name of property that you want to add. To achieve this, you need to create a class in Core project that inherits BindableProperties, and register the name and type of the property to BindableProperty.

Core - EditTextProperties

Add BindingAdapter Class in Android and iOS Project

Since the view's API is different in Android, iOS and WinPhone – for example EditText in Android and UITextField in iOS – then you need to add BindingAdapter class in every platform project and define what you would like you to do with the view in association to the custom bindable property. When the value in the bound model change, Crosslight's binding framework automatically invoke the binding adapter associated to the view. This allows the view to react seamlessly in response to the value change.

In this example, the binding adapter class will set the text size of Android's EditText and iOS's UITextField based on the bound value in ViewModel. 

Android - CustomEditTextBindingAdapter
iOS - CustomTextFieldBindingAdapter

Register BindingAdapter in AppInitializer

Next, you register the binding adapter by calling the AddBindingAdapter<TControl, TAdapter> method in AppInitializer.cs of your Android and iOS project. The API usage is straightforward, you simply pair the control type with its corresponding binding adapter in the provided generic parameters, such as shown in the example code below.

Android - AppInitializer
iOS - AppInitializer

Use Custom BindableProperties in Binding Provider

Finally, you can now consume the custom TextSize bindable property in the BindingProvider, and bind it to a property in ViewModel in the same way as built-in bindable properties does.

Core - BindingProvider

Change TextSize Property in ViewModel

With the TextSizeProperty bound to TextSize property, now you can change the control's text size in both iOS and Android by simply changing the TextSize property in ViewModel.

Core - CustomBindingViewModel

The result will look like this: 

Samples

The sample code for this article can be downloaded from our Git server: http://git.intersoftpt.com/projects/CROS-SUPP/repos/custombinding-sample/browse.