Skip to end of metadata
Go to start of metadata

In this tutorial, you're going to learn how to perform simple data binding, in MVVM-fashion with Crosslight, such as:

  • Binding text to labels and text boxes
  • Binding numeric values to slider, text boxes and stepper
  • Binding boolean values to switch
  • Binding DateTime values to DateTime picker
  • Binding image to image view
  • Binding simple list of data to a list

At the end of this tutorial, your app will look like the following:

Samples:

CrosslightDataBinding.zip

Follow these steps:

Prerequisite

Before starting the walkthrough, it is recommended that you have followed these walkthroughs in order:

It is also recommended that you have read through these conceptual topics in order to get a better understanding:

Let's get started. 

Preparing the Project

Create a new Blank project using Crosslight Project Wizard and give it a name of CrosslightDataBinding.

Determining the UI Bindings

Before starting out, it's recommended to get an overall high-level overview of what your app is going to look like. This will help you ease development and provides clear guidelines.

Scrolling down further,

When clicking on the Select Image button, you'll be able to select an image from the photo library, or taking one with your camera. When you click on the Open List button, you should get the following result.

Preparing the ViewModel

Open up the SimpleViewModel.cs located inside CrosslightDataBinding.Core/ViewModels folder and use the following code.

The ViewModel above contains various properties that will bound to the view. Let's elaborate:

  • In the Binding Text section, both of the LblBindText and TxtBindText will be bound to BoundText property of the ViewModel, with its value initialized as "BoundText" in the ViewModel's constructor.
  • In the Binding Numeric Values section, LblBindNumeric, SliderBindNumeric, TxtBindNumeric and StepperBindNumeric will be bound to BoundNumeric, with its value initialized to 30 int he ViewModel's constructor.
  • In the Binding Boolean Values section, LblBindBool and SwitchBindBool will be bound to BoundBool, with its value initialized to True in the ViewModel's constructor.
  • In the Binding DateTime section, LblBindDate and DateBindDate will be bound to BoundDate, with its value initialized to DateTime.Now in the ViewModel's constructor
  • In the Binding Image section, BtnBindImage will be bound to the SelectImageCommand in the ViewModel, which will show an action presenter that will allow you to choose the image from the photo library, or take one with your device camera (if it's supported). The latter feature is not supported in the iOS Simulator, and should be deployed to an iPhone. The ImgBindImage will be bound to the BoundImage property in the ViewModel.
  • In the Binding to List section, BtnBindList will be bound to the OpenListCommand in the ViewModel, which will simply open up a new screen with the list of items.

Preparing the List of Items

For the last section, Binding to List, there are several things to be done for this feature to work properly. Copy the entire Assets folder found in this link and place it inside the CrosslightDataBinding.Core project. Don't forget to set the entire contents' BuildAction to EmbeddedResource.

Also do this for Categories.xml and Inventories.xml located inside Assets/Data folder.

Create a new Crosslight ViewModel, give it a name of SimpeListViewModel and place it under CrosslightDataBinding.Core/ViewModels folder. Use the following code.

In the ViewModel, there's nothing much here, except for the initialization of items when this ViewModel is constructed. Here, we simply parse from the XML and put them inside SourceItems property of the ViewModel. Next, create a new Crosslight BindingProvider file called SimpleListBindingProvider and place it under CrosslightDataBinding.Core/BindingProviders folder. Use the following code.

This is the glue that will bind the Items from the ViewModel to the view. We simply prepare an ItemBindingDescription to be used as the ItemTemplateBinding for our list with the iD specified to TableView. This is Crosslight's built-in identifier when using the TableView/RecyclerViewFragment.

Preparing the BindingProvider

Next, open up SimpleBIndingProvider.cs located inside CrossslightDataBinding.Core/BindingProviders folder and use the following code.

I've commented each section that explains how you can bind the views to the properties in the ViewModel, as previously discussed. For label controls, usually you'll only need to perform one-way binding as the label cannot update the values back to the ViewModel, while for input controls, you need to two-way binding as the input controls can set values back to the ViewModel, we need these values to properly synced with each other, and therefore two-way binding is used.

Running on iOS

Let's get this sample up and running on iOS. Copy over the MainStoryboard.storyboard file and replace the one you found inside CrosslightDataBinding.iOS/Views folder. This storyboard contains the finished layout for the iOS view. Next, create a new Crosslight iOS Table ViewController for iPhone file and give it a name of ListViewController, place it under CrosslightDataBinding.iOS/ViewControllers folder, the replace the contents with the following code.

We simply set the image size to be used, and the presentation style by specifying the CellStyle.

Next, simply run the iOS project. You should get the following result.

Running on Android

On Android, open up main.axml located under CrosslightDataBinding.Android/Resources/layout folder and replace everything there with the following code.

The above layout contains the finished layout for Android so you can run the sample without any problems. Similar to iOS, let's prepare the Fragment that will display our list of items. Create a new Crosslight RecyclerViewFragment file, name it ListFragment, and place it under CrosslightDataBinding.Android/Fragments folder. Use the following code.

Similar to iOS, all we did is just specify the CellStyle to be used. Run the project and you should get the following result.

Conclusion

Congratulations! You've just finished learning how to bind basic data types with Crosslight. To learn more about advanced binding features, please check out MVVM Samples and run it on the simulator.

Sample

You can also find the resulting sample here: CrosslightDataBinding.zip. Simply open this sample with Xamarin Studio or Visual Studio, restore the NuGet packages and run the project.