Windows apps
Collapse the table of content
Expand the table of content

Hub

[This documentation is preliminary and is subject to change.]

Windows app: a hub control

Windows app: a hub control

Windows Phone app: a hub control

Windows Phone app: a hub control

Control description

The hub control is a starting point for designing a visually stunning app. The hub control gives you a framework and gives you the flexibility to customize your app to fit your brand.

Many apps use a hierarchical system of navigation. The hub, or landing page, is the user's entry point into an app and to additional levels of content including section and details pages. It should offer a lot of visual variety, engage users, and draw them in to different parts of the app.

Explore navigation functionality in more depth as part of our App features, start to finish series :   Hierarchical navigation, start to finish (HTML and XAML)

Usage guidance

Use the hub control as a starting point for creating a hierarchical pattern for your app. Customize the pages to reflect your app's personality and brand. Make sure that the main image on the hub page works well with overlaid text. Use interactive headers from the hub page and section pages to make it easy for users to navigate deeper into the content details.

Related topics

For designers
Command patterns
Layout
Hub
Back button
Hub control design guidelines for Windows apps
Hub control design guidelines for Windows Phone apps
For developers (Windows Store apps using JavaScript and HTML)
WinJS.UI.Hub object
HTML Hub control sample
Navigation and navigation history sample
Your first app - Part 3: PageControl objects and navigation
Quickstart: Using a hub control for layout and navigation
Navigating between pages (HTML)
For developers (Windows Store apps using C#/VB/C++ and XAML)
Windows.UI.Xaml.Controls Hub class
XAML Hub control sample
XAML Navigation sample
Quickstart: Using a Hub
Your first app - Part 3: Navigation, layout, and views
Your first app - Add navigation and views in a C++ Windows Store app (tutorial 3 of 4)
Navigating between pages (XAML)

 

 

Show:
© 2016 Microsoft