Skip to end of metadata
Go to start of metadata

Most mobile apps development involved in working with data – at least presenting a list of data to the user interface. The Windows Phone platform ships with versatile user interface components that allows you to present a list of items, navigate through hierarchically structured data, present an indexed list of items, as well as present a selectable list of options.

Crosslight takes care most of the details in the table view implementation for you such as the data source provider, UI virtualization, memory allocation and automatic object disposal, smooth animation and much more. Crosslight makes data presentation a breeze – thanks to the MVVM design pattern built to the core of Crosslight. In most cases, you only need a single line of class declaration to present your data – throwing away nearly hundred lines of code typically required to implement such tasks. As a result, you can expect exponentially increased productivity and time saving in building great Windows Phone apps.

On this page:

Displaying Simple Data

Presenting data in Windows Phone with Crosslight is simple. You can start with a view model that derives from ListViewModelBase<T> and then create respective view to consume 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.  

Displaying Grouped Data

Much alike to simple data presentation, displaying grouped data in Crosslight is quite simple.

This illustration is the result of code above,

And the code behind

Keep in mind that the underlying ViewModel is required to supply the grouped data in the items source. For more information, see Displaying Grouped List.

Customizing Group Style

You can present grouped data in two group styles – plain group or sectioned group. In most cases, you typically use the plain group style such as shown in the previous section. However, if you prefer, you can use the sectioned group style.

This illustration is the result of code above,

The code behind

Showing Group Section Index

If your data contains fairly large number of groups, you may want to show the group index to allow users to easily jump to a specific group.

You can easily enable this feature through a Windows Phone – and let Crosslight do the rest of process. By default, it will show all section names in rectangle shape it can be in tile mode or list mode.

This illutration is the result of code above,

Enable Searching

In Windows Phone, you typically add the search functionality by presenting a search bar on top of the table view. Crosslight has streamlined the searching functionality in ViewModel. The search bar should be put on top as per Windows Phone guidelines.

Code behind:

This illustration is the result of code above,

When user types on the search bar, user should trigger the Filter method of the ViewModel – if the ViewModel implements IFilteredSource Interface. By default, certain data-aware ViewModel base classes such as ListViewModelBase(T) Class that ships with Crosslight has implemented the necessary interfaces to streamline the data operations.

For more information about filtering data in ViewModel, see Implementing Search. For more information about the ViewModel base classes available in Crosslight, see Selecting a ViewModel Base Class to Get Started.

Customizing Cell Styles

The list view comes with four predefined cell styles that you can quickly customize through a property configuration. The supported cell styles are: Right Detail, Left Detail, Subtitle, and Subtitle with Image.

As Windows Phone provides great flexiblity to customize the list view items directly, we do not provide predefined cell templates in Windows Phone's Page Class. Instead, you can consult our Data Samples that replicates the same behavior on Windows Phone platform.

The following illustration shows the various predefined cell styles supported in Crosslight for Windows Phone.

Using Custom Cell Template

In addition to the predefined cell styles, you can also specify your own custom template as list view item template – also known as custom cell template. Look at the following custom sample. Crosslight supports the custom cell template feature by seamlessly providing the required data item on demand. As a result, you can achieve this task in just a few line of code, eliminating away hundreds lines of code typically needed to achieve such task. 

This illustration is the result of code above,

Customizing Item Styles

At some point, you will want to show changes to the UI when certain property has changed from the model. Crosslight provides a MVVM-compliant technique to customize the item appearance called item style selector which enable you to easily customize item styles that automatically synchronizes to the view when the affected properties of the model has changed – this is made possible because of the two-way data binding in Crosslight.

Capturing Selection

In addition to displaying a list of items, the list view can also capture selection which is a common requirement in most data-driven apps. When users tap on one more or more items, a selection item will be highlighted within the item cell which indicates that the item is selected.

Configuring the ListView SelectionMode is easy and straightforward. Simply set SelectionMode property in AdvancedListBox control, you can choose single, multiple, or extended.

Editing List View

The list view is great for presenting data, however sometimes you need to make changes to the list view itself, for example, deleting one or multiple data.

The following code shows how to enable multiple delete on the list view.

Responding to Delete Action

When bound to the DeleteCommand and user tapped on the delete button in Page, it will automatically invoke the DeleteCommand implementation in the ViewModel. The following example shows the delete command implementation in the ViewModel.

This illustration is the result of code above,

 In XAML this is how you bind an ICommand to ApplicationBar button.

Responding to Reorder Action

This illustration is the result of code above,

Performing Batch Update

Crosslight offers streamlined programmability and maximizes code sharing by allowing you write user interaction logic in the shared application layer. Windows Phone is a platform that strongly focused on great user experiences and usability that put in thoughtful considerations on numerous scenarios. When multiple items are changing dynamically at runtime – for instances, several new email messages arriving while users delete other messages at the same time – table view can react to these changes in smooth animation instead of just refreshing the data source directly. The smooth animations allow users to intuitively understand what’s happening with the list they’re currently seeing.

Crosslight supports this collective changes with smooth animation – also known as batch update. In the ViewModel, you simply set the property to true before performing collective changes to the collection, then set it back to false afterward. 

See the following code for an example of batch update implementation.

This illustration is the result of code above,

As seen in the above example, making changes to the table view can be done as simple as modifying the collection source through the Insert and Remove method. This is made possible thanks to the powerful observable data source implemented in Crosslight’s table view.