Skip to end of metadata
Go to start of metadata

This page describes how you can easily display a simple list in Crosslight apps using the powerful MVVM pattern. The MVVM pattern provides clear separation of concerns between the data source and the view representation of the data, allowing you to centralize all data-related logic in the view model and customize the platform-specific view representation of the data completely separated from the view model. Follow these simple steps to help you get started in displaying simple data in your Crosslight-powered apps. In general, you're going to create a centralized data source from the view model, then use the same view model across all platforms.

On this page:

Providing ItemsSource from the ViewModel

Before creating the view-specific codes that consumes the data source, it is imperative that you provide the items soruce from the view model.

Create a view model that derives from the ListViewModelBase(T) Class The ListViewModelBase(T) Class contains several pre-built features to make it easy to present a list of data. In the simplest implementation, you only need to provide the SourceItems property with the data source, refer to the following code example.

The SourceItems property represents the raw data source which means it is not necessary sorted or filtered. To present sorted data, override the OnSourceItemsChanged method and set the sorting expression using LINQ.

Define which property of the model that you wish to display in the list, which is commonly known as DisplayMemberPath . To set the display member path, you add a binding description to the binding provider, such as shown below.

You should use the AddBinding with isDirectSource overload which instructs the binding to retrieve the source directly from the specified value which in the above example is ProductName.

Now that you have the ViewModel class ready, you need to create the view context in the desired platforms. The view context consumes the shared ViewModel in loosely-coupled fashion and automatically perform data operations based on the application logic in the ViewModel.

To learn more how to implement the platform-specific view for data presentation, see Platform-specific Guides.

Displaying Simple List on iOS

Presenting data in iOS with Crosslight is a breeze. You start with a view controller that derives from UITableViewController(TViewModel) Class – a specialized table view controller that supports ViewModel and automates most data-related tasks based on the supplied ViewModel.

The results of the above simple declaration can be seen in the image below.

Note that the items presented in the table view controller is queried from the ViewModel through the binding definitions.

You typically group the binding definitions logically to a class, and then easily import it to your view controller through the ImportBindingAttribute Class – also shown in the example above. 

For more information about the basics of data binding in Crosslight, see Understanding Binding Providers.

For more information about iOS platform support in Crosslight, see Crosslight for iOS.

 

Displaying Simple List on Android

To display a simple list in Android, start by defining a list activity that derives from ListActivity(TViewModel) Class -- a specialized list activity that supports ViewModel and automates most data-related tasks based on the view model we've created earlier. You can also use the ListFragment(TViewModel) Class along with a FragmentActivity(TViewModel) Class to display a list of items.

This illustration is the result of code above,

You specify the InteractionMode by overriding the property and setting it into None. Then register the ListView at runtime to a view identifier called TableView as specified in the binding provider which is specified using the ImportBindingAttribute Class.

For more information about the basics of data binding in Crosslight, see Understanding Binding Providers.

For more information about Android platform support in Crosslight, see Crosslight for Android.

Displaying Simple List on Windows Phone

To display a simple list on Windows Phone, we'll create a page that consumes the view model.

And the code behind

The results of the above simple declaration can be seen in the image below.

Note that the items presented in the ListView is queried from the ViewModel through binding.

For more information about Windows Phone platform support in Crosslight, see Crosslight for Windows Phone.

Displaying Simple List on Windows Store

Likewise, displaying a simple list on Windows Store apps is as easy as creating a simple page that consumes the view model and define a ListView in the XAML page.

 

And the code behind is as follows:

The results of the above simple declaration can be seen in the following image .

Note that the items presented in the ListView is queried from the ViewModel through binding.

For more information about Windows 8 platform support in Crosslight, see Crosslight for Windows Store.