Skip to end of metadata
Go to start of metadata

This page discusses how you can customize the appearance of items contained in a list view to match your business requirements. It is expected that you have successfully displayed a list of data before continuing. 

Your apps look better when the items are presented more intuitively, for instances, sold inventories are formatted with strikethrough text effect, important tasks appear with more attractive color, and so on. Crosslight has provided techniques that will help you easily customizing the look of your items.

In general, you will learn how to customize item styles on each platform using techniques that adhere to each platform's UI guidelines.

Using StyleAttributes in Value Converter

Customizing item styles in iOS and Android require fairly large number of code and involve a number of steps such as updating the view’s elements from different entry points and synchronize model and view manually. Based on MVVM design pattern, Crosslight provides techniques called item style selector which enable you to easily customize item styles which automatically synchronize the views when the affected properties of the model has changed – thanks to the two-way data binding made possible in Crosslight. In general, you create a class that implements the style selector logic in the shared application layer, then bind the class through a converter to the table view in the binding provider. There are no configurations required at the iOS and Android layer.

The following example shows how to set a strikethrough text style for items marked as sold.

The definition for the label in the binding provider class looks like the following.

The ItemBindingDescription Class represents the binding information specific to the view elements in the cell template.

In the above example, it binds the IsSold property to the TextLabel’s StyleAttributes. In the converter class, an appropriate style will be provided based on the value of the IsSold property. If the item’s IsSold is true, the label will be styled as strikethrough, otherwise the normal style will be used.

Note that the code above is defined in the Shared project. There are no additional configurations needed in the platform-specific layer.

To learn more about data binding in Crosslight, see Understanding Data Binding and MVVM Design Pattern. To see this feature in action, please refer to Inventory Tracker sample.

See the results in the image below.