A TileNavPane is a hierarchical tile menu (consisting of up to three levels) that provides navigation in a touch-friendly manner.
In the non-expanded state, the Tile Nav Pane is a nav bar that provides the Main Button, from which navigation starts, and navigation breadcrumbs that help an end-user to keep track of the current location in the navigation hierarchy. It is also possible to add custom buttons to the nav bar that will perform an action on a click.
Each navigation hierarchy level is rendered as a dropdown bar, in which elements are presented by tiles. The top hierarchy level is a bar displaying categories (TileNavCategory) as tiles. The second hierarchy level is a bar displaying items (TileNavItem) as tiles. And the last hierarchy level is a bar displaying sub-items (TileNavSubItem) as tiles.
The figure below demonstrates a sample Tile Nav Pane displaying the contents of the TileNavPane.Categories collection.
The following example shows how to create a TileNavPane, populate it with navigation elements and add custom buttons to the nav bar.
In the XAML markup, four buttons are added to the TileNavPane.NavButtons collection. Buttons added to this collection are displayed in the nav bar. The first, which is aligned at the left margin of the nav bar, is the Main Button. The IsMain property of this button is set to true. Other buttons are aligned to the right using the HorizontalAlignment property. The second button contains items, and so a drop-down tile bar is invoked when this button is clicked.
Button glyphs are differently aligned (the GlyphAlignment property) and the rightmost button does not have a textual content (the Content property). All glyphs are specified to be displayed with the glyph theming feature enabled (the AllowGlyphTheming property).
One category (TileNavCategory) is added the TileNavPane.Categories collection. This category contains one child item, which in turn contains two sub-items. The textual and graphical content of tiles is specified with the TileContent and TileGlyph properties. Textual content of the corresponding buttons in the nav bar is specified with the Content property.
The result of the markup in this example is shown below.