Try Xenarius Free

Configuring Navigation and Device-Specific App Layout

Xenarius allows navigation within an app via navigation items. Based upon layout, these items will be rendered as slide-out menu items, tabs, etc. Regardless of the layout used, navigation items provide immediate access to specific views in your app.

To create the desired navigation logic in your app, open Application Options and expand the Navigation section. The following properties will be available to you:

  • Default View ID - the view identifier that’s opened on application startup.

  • Navigation Title - navigation menu title (displayed in the Split layout).

To create a navigation item, expand the Navigation Items section and click Add.

The following properties are exposed by navigation items:

  • IsView – if selected, the navigation item opens a view; if unselected, it executes a function.

  • Icon – an icon displayed in the navigation item. You can select from predefined images or load yours from a file.

  • Visible – if selected, the item is visible in the navigation menu.

If the IsView property is selected and the navigation item opens a view, the following property is also available.

  • View ID – a view that opens when the navigation item is triggered. Otherwise, a different property appears in the property grid.

  • Click Handler – a function to be executed when this navigation item is triggered.

Device-specific layout

Xenarius ships with a set of predefined layouts and allows you to specify an application layout for different devices.

To set up layouts, open the Application Options page and expand the Layouts section.

The following layouts are available.

  • For phones: Empty, Navbar, Simple, Slideout

  • For tablets: Empty, Navbar, Simple, Slideout, Split

  • For desktops: Desktop, Empty, Simple

The following is detailed information on each predefined layout:

Desktop layout

Desktop layout sample

Views registered as navigation items are organized in a tabbed layout. Command bar and view content is located within the tabs.

This layout is available on desktops only.

Empty layout

Empty layout phone sample

Empty layout tablet sample

Empty layout desktop sample

No navigation control is displayed. The command toolbar is hidden. Only the content of the current view is displayed.

This layout is available across all devices.

Navbar layout phone sample

Navbar layout tablet sample

Navigation is performed by using navigation buttons that correspond to application navigation items. These buttons are displayed within the navigation bar that is always visible.

Command toolbar is also displayed.

This layout is available in phones and tablets.

Simple layout

Simple layout phone sample

Simple layout tablet sample

Simple layout desktop sample

No navigation control is displayed. The command toolbar is displayed.

This layout is available for all device types.

Slideout layout

Slideout layout phone sample with closed menu Slideout layout phone sample with open menu

Slideout layout tablet sample

Navigation is performed via the slideout menu invoked by using the top left corner menu button. The command toolbar is displayed.

This layout is available for phone and tablet devices.

Split layout

Split layout sample

In this layout, a “master” and a “detail” pane will be displayed. The “master” pane generally displays a list of items and the “detail” pane displays detailed information on the item selected in the “master” pane.

Each pane corresponds to a specific application view. To mark a view as a master pane, set its Split Layout Pane property to “master”. Otherwise, the view will be considered a detail pane.

This layout is only available on tablet devices.