Skip to end of metadata
Go to start of metadata

In common use of mobile apps right now, navigation system in mobile apps is one of the most important aspects that determine the overall user experience and quality of the apps. Microsoft has provided a set of design guidelines that rule out how developers should design the navigation in their Windows Store apps, so that user can achive 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.
  • Split Navigation, used to display list of item and the detail page of selected item.
  • Group Detail Navigation, a page that display details for a single group and previews each item in the group.

On this page:

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

 



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

Modal and Nested Modal Navigation Support

Modal navigation is fully support by Crosslight for Windows Store as well as more nested modal navigation. Nested modal navigation allows you to build wizard-like interface to capture user input that go across multiple screens. Crosslight for Windows Store conforms to the navigation specification as described in the Designing Consistent Navigation Interface – Part 3 section.

Because the navigation logic is called from the shared application layer – instead of the Windows Store 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.

Using List Navigation

To create navigation application in Windows Store, simply create a new view page class that derive from Intersoft’s 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.

Customizing Navigation Parameter

Crosslight for Windows Store 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 Store:

  • 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. By default, the value is chosen based on the mobile platform standard.
  • 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 reate 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.