BUILD 2015 session recap: Universal Commanding and Navigation in your XAML

Session url: http://channel9.msdn.com/events/Build/2015/2-97

Note: This is a pre-recorded session instead of live session.

Navigation patterns

Several of the navigation patterns from the different platforms are now grouped under UWP:

• Hub
• Pivot
• AppBar
• SplitView (new)

Note that for the SplitView there isn’t a default ‘hamburger button’, but the hamburger icon is available as part of the Segoe MDL2 Assets font family as glyph 0xE700. The recommended font size is 24 (or 32).

Building a top-level navigation app

Where we were used to the app having a Frame which wraps all navigation between Pages, things are now a bit more complex: AppShell > SplitView > Frame > Page.

The AppShell is a Page:

• Design-time experience.
• Adjusts size for visible bounds.
• Listens to navigation events on Frame.

The SplitView control exists out of a Pane (typically for navigation) and a Content (holds the Frame) part. Use styled radio buttons for menu items.

Commanding deep dive

Some history:

• Windows 8: AppBar (was not supported on phone)
• Windows 8.1: CommandBar with Primary (right) and Secondary commands (left)

The CommandBar control mostly had the same API, but separate binaries and tailored behavior between Windows and Windows Phone, e.g. CommandBar on Windows shows at the logical top/bottom while on Windows Phone it’s always on the physical short edge (no matter how you turn your phone). Now with UWP it’s 1 API, 1 assembly, but there are still some tailored behaviors for layout.

AppBar

• Visible (by default) in minimal size with a ‘…’ button to open/close.
• Responds to unhandled right clicks to open/close.
• Affects visible bounds when at the root of your page: will push your content up/down when being opened.

CommandBar

• Visible (by default) in compact view.
• Does not respond to a right-click.
• Can host custom content.
• Tailored experience for all screen sizes, so it’s not limited to full width top/bottom edges.
  • Layout is affected by the ClosedDisplayMode.
  • Secondary command menu is affected by the window size.
    • Window size < 480 (phone): menu uses the full width of window
    • Window size > 480: menu sizes to the content

Upgrading your app from Windows/WP 8/8.1

• Use CommandBar where possible, the recommendation is to move from AppBar to CommandBar when upgrading.
• SymbolIcon / FontIcon now use Segoe MDL2 Assets by default instead of Segoe UI Symbol.
• Icons now get a 20x20 box, tip: use a ViewBox for your PathIcon to prevent clipping.

Extra links

• Navigation: https://msdn.microsoft.com/en-US/library/windows/apps/dn958438.aspx
• Commanding: https://msdn.microsoft.com/en-us/library/windows/apps/dn958433.aspx
• SplitView control: https://msdn.microsoft.com/en-us/library/windows/apps/dn997787.aspx