Skip to end of metadata
Go to start of metadata

Navigating between menus in the app is an essential feature to all enterprise applications. As Crosslight is built around the MVVM pattern, it's very easy and straightforward to implement list of menus for users for navigating around your app. This page discusses how you can easily implement a list of NavigationItem Class and reuse them across all platforms. If you wish to learn more about using the NavigationItem Class for navigation, see this page.

On this page:

Providing NavigationItems in the ViewModel

In addition to display a list of data, it’s also a common practice to use the list design pattern as navigation interface. Since the list control accepts any IEnumerable kind of source, you can provide a collection of NavigationItem Class and set it as the SourceItems property in the ViewModel. This allows you to easily create dynamic, data-driven navigation menu.

Crosslight provides NavigationItem Class that represents the model for navigation source that you can directly consume in your apps. The NavigationItem Class contains several members commonly used in navigation.

The following example shows how to use NavigationItem Class as the source for the navigation interface.

In the BindingProvider Class, you can easily register the item binding for the display, navigation as well as the image member path which will be used by the data controls, see the following example.

In summary, Crosslight offers a vast array of time-saving features that let you easily build beautiful data-driven mobile apps. Many cross-platform challenges related to data management that were previously difficult to address – or took lot of time with tedious workarounds – are now elegantly addressed with Crosslight. In this guide, you have learnt how to work with data, from simple list and grouped list to item template customization and list editing. Note that this guide is focused on the shared application layer that are independent to the view platform. For more information about platform-specific features related to data presentation, see Platform-specific Guides.

Using List Navigation on iOS

To get started with navigation application in iOS, simply create a new view controller class that derive from UITableViewController(TViewModel) Class. With the specified ViewModel, the table view controller automatically reads the navigation source from the Items property of the ViewModel.

Suppose that you have a ViewModel with the following navigation items.

The next step is simply creating a new table view controller class that consumes the ViewModel.

At runtime, Crosslight automatically discover the navigation source, configure the table to use grouping style and prepares the table item accordingly to indicate a navigation flow. See the following screenshot for the result.


As seen in the image above, the iOS table group style can be used because the ViewModel supplies the navigation items in grouped object which is represented in the GroupItems property. In addition, make sure the related properties such as TableViewStyle, InteractionMode and ShowGroupHeader are properly overridden in the UITableViewController(TViewModel) Class.

The NavigationItem class includes several properties such as title, category, image and the target ViewModel type to navigate. To learn more about NavigationItem and the basic of navigation concept in Crosslight, see Designing Consistent Navigation Interface.

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

Using List Navigation on Android

Getting started with list navigation in Android is very simple, just create a new activity class that derive from ListActivity(TViewModel) Class with InteractionMode property set to Navigation. You can customize the appearance of the group header by overriding the GroupItemLayoutId as well as overriding the list item appearance by overriding ContentLayoutId with a provided layout xml. With the specified ViewModel, the ListActivity(TViewModel) Class automatically reads the navigation source from the Items property of the ViewModel.

Assuming that you have a ViewModel with the following navigation items.

 

The next step is simply creating a new ListActivity(TViewModel) Class that consumes the ViewModel.

At runtime, Crosslight will automatically discover the navigation source, configuring the list view to use grouping style and prepares the table item accordingly to indicate a navigation flow which will produce the following result:

As seen in the image above, the Android table group style can be used because the ViewModel supplies the navigation items in grouped object which is represented in the GroupItems property. In addition, make sure the related properties such as InteractionMode, ContentLayoutId, and GroupLayoutId are properly overridden in the ListActivity class.

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

Using List Navigation on Windows Phone

To create navigation application in Windows Phone, simply create a new view page class that derive from Intersoft’s PhoneApplicationPage Class. With the specified ViewModel, view page automatically reads the navigation source from the Items property of the ViewModel.

Let assume that you have a ViewModel with the following navigation items.

The next step is simply creating a XAML that consumes the ViewModel.

Note that you will need to enable NavigationService.EnableItemNavigation in LongListSelector control, or any List control. Also specify the NavigationService.DetailNavigationTarget to target View Model

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

Using List Navigation on Windows Store

To create navigation application in Windows Store, simply create a new view page class that derive from LayoutAwarePage. With the specified ViewModel, view page automatically reads the navigation source from the Items property of the ViewModel.

Assume that you have a ViewModel with the following navigation items.

 

The next step is simply creating a XAML class that consumes the ViewModel.

It is important that you enable NavigationService.EnableItemNavigation in ListView control, or any list control. 

The code behind:

When the application runs, Crosslight automatically discovers the navigation source, configures the view to use grouping style and prepares the list item accordingly to indicate a navigation flow. See the following screenshot for the result.

The NavigationItem Class includes several properties such as title, category, image and the target ViewModel type to navigate. To learn more about NavigationItem and the basic of navigation concept in Crosslight, see Designing Consistent Navigation Interface.

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