Skip to end of metadata
Go to start of metadata

Commonly used in mobile apps, navigation pattern is one of the most important aspects that determine the overall user experience and quality of the app. Microsoft has provided a set of design guidelines that rule out how developers should design the navigation in their Windows Phone apps, so that user can achieve the expected user experience. Modeled based on the Microsoft standards, Crosslight sports a sophisticated navigation framework that is designed toward data-oriented UI pattern.

Generally, Crosslight supports navigation patterns such as explained in the following:

  • List navigation, consisted of push and modal navigation.
  • Nested modal navigation, typically used to capture a series of input in multiple screens.
  • Multi-screen navigation, also known as Pivot and Panorama navigation.

Next following illustration visualizes the common navigation patterns supported in Windows Phone apps.

To learn more how to build navigation apps that target Windows Phone and other platforms, see Understanding Crosslight Navigation Services.

Modal and Nested Modal Navigation Support

Modal navigation and nested modal navigation are fully supported by Crosslight for Windows Phone. Nested modal navigation allows you to build wizard-like interface to capture user input that go across multiple screens. Crosslight for Windows Phone conforms to the navigation specification as described in the Designing Consistent Navigation Interface section.

Since the navigation logic is called from the shared application layer – instead of the Windows Phone layer – you use the same way to perform navigation, i.e., calling this. NavigationService.Navigate method in your ViewModel. To learn more about triggering modal navigation and receive the callback, see Performing Modal Navigation.

On this page:

Using List Navigation

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

As seen in the image, when the application runs, Crosslight automatically discovers the navigation source, configures the view 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 Class and the basic of navigation concept in Crosslight, see Designing Consistent Navigation Interface.

Using Tabbed Navigation

Aside from list navigation, tabbed navigation is also a common navigation pattern in mobile apps. In Windows Phone, tabbed navigation is introduced in a new fashion with two new types of Page, called as Pivot and Panorama page. Crosslight provides a specialized Pivot page that supports ViewModel. The specialized pivot automatically reads the navigation source from the Items property of the ViewModel. Selection-related properties are automatically synchronized in two-way mode, allowing you to change selected pivot page from within the ViewModel.

The following code shows how to define the navigation items in the ViewModel. Notice that the class derives from MultiPageViewModelBase Class instead of ViewModelBase Class.

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

The code behind

This illustration is the result of code above,

As illustrated, the Pivot page will produce pivot item as much as user need. Often times, you want to control the selection from the ViewModel. For instance, you would like to navigate the screen to the second tab when user tapped on a button. This can be easily done by implementing the PhonePivotPage Class.

Cuztomizing Navigation Parameter

Crosslight for Windows Phone natively supports most of the parameter exposed in the NavigationParameter Class which can be optionally passed to the navigation service.Following list describes the properties that affect the navigation behaviors in Windows Phone:

  • NavigationMode
    Specifies the navigation mode to apply to the navigation session. Supported values: Push and Modal. The default value is Push.
  • Animated
    Indicates whether the animation transition should be applied when navigating. The default value is true.
  • ModalTransitionStyle
    Specifies the transition style when performing modal navigation. Supported values: Default, Slide, Flip, Fade and Curl. By default, the value is chosen based on the mobile platform standard UI guidelines.
  •  CommandId
    Specifies an identifier to the command that invoke the navigation. This is an optional value and is meant to provide a way for developers to recognize a particular command that raise the navigation then perform additional actions based on the identifier.

For most cases, you can create a new instance of NavigationParameter Class and set the properties that you desire, then pass it to the Navigate method overload that accepts navigation parameter. This is the easiest and standard way to perform navigation with customized behaviors.

For more information about the fundamentals of Crosslight navigation, see Designing Consistent Navigation Interface.