Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Flat navigation, start to finish (XAML)

Applies to Windows only

Use a flat navigation pattern for your Windows Store app when it has a small number of pages and its information is not organized in a hierarchy. In other words, when the pages, tabs, and modes are logical peers.

Your app should let users focus on the importance of what is in the app, not the where or the why. If your app doesn’t have a lot of information density, many pages, or scenarios that need hierarchy and structure, consider a flat structure that lets users quickly navigate between pages. However, if your app provides a variety of experiences and content with organization and structure that should be traversed in a preferred sequence or order, have a look at the Hierarchical navigation, start to finish.

Here, we cover how to create a Windows Store app using C++, C#, or Visual Basic that uses the flat navigation pattern and meets all basic Windows Store certification requirements, from start to finish. This includes:

  • Image resources to expose your app throughout the operating system
  • App bars to support navigation and commanding
  • Data roaming to sync your app across sessions and devices
  • Settings to provide privacy, help, and other app info
  • Globalization to reach customers in countries and regions around the world
  • Accessibility to help users accomplish tasks regardless of physical ability and input device

The guidelines, tasks, and sample code here are specific to developing Windows Store apps using C++, C#, or Visual Basic. For the Windows Store app using JavaScript version, see Flat navigation, start to finish.

Here's a basic flat structure alongside a wireframe of the flat navigation pattern in a Windows Store app.

A basic implementation of the flat navigation pattern

Wireframe of the sample app.

 

As these images demonstrate, the flat content structure defined by this pattern requires that each page in the app be accessible from every other page. A user can move forwards and backwards randomly through the pages, with no branching.

Use the navigation app bar (shown in the wireframe above) for fast switching between pages in flat navigation apps. This bar is a transient element that can be revealed at the top edge of the screen when users swipe from the top or bottom edge (right-click with a mouse, Windows Logo Key+Z, or menu key with a keyboard).

Here's how our Calculator app implements the flat navigation pattern. Note how it uses a persistent navigation bar instead of the standard transient navigation bar. This is an example of how the Windows Store app platform can adapt to specific scenarios unique to your apps.

Flat navigation example: Standard calculator pageFlat navigation example: Scientific calculator pageFlat navigation example: Converter calculator page
Standard calculator pageScientific calculator pageConverter calculator page

 

Using the correct navigation pattern, along with the appropriate UI layout (see Windows Store app UI, start to finish (XAML)), helps you eliminate the clutter of persistent controls and lets users focus on the important content in your app.

Prerequisites

If you're new to developing Windows Store apps using C++, C#, or Visual Basic, have a look through these topics to get familiar with the technologies discussed here.

Flat navigation sample

In addition to the samples and code snippets included in the topics we reference below, we developed a basic Flat navigation sample. This Windows Store app sample demonstrates the principles, recommendations, and implementation details discussed here in an app that meets all basic Windows Store certification requirements.

See how we put our guidance into practice. Then you can save some time, and use this sample as the foundation for your inspiration!

Here's a brief description of the sample

In the sample, we provide a Windows Store certification-compliant shell, or template, for you to customize as you require. It's a starting point for you to fill with your content and experiences.

Here are screen shots from the sample app that show the basic functionality of the sample. It includes two pages: a home page that introduces the app, and a second page where you can lay out your wares. Extend the app with additional pages, as required.

Sample app showing page 1

Sample app showing page 1 with the navigation app bar

Sample app showing page 2

For now, here's a loose outline of tasks to help you build a basic app that follows the best practices for building Windows Store apps using the flat navigation model. We cover navigation details, and the minimum functionality required for store compliance. Each task links to a corresponding topic with more detail. Where appropriate, we also identify relevant code in the companion sample.

We recommend that you review each step if you're new to Windows Store app development, or if you are unfamiliar with the various aspects of store compliance. You'll find related details grouped together.

Windows Store compliance

The Windows Store is the primary means of distributing Windows Store apps to customers and connecting those customers to as many great apps as possible. The Windows Store is curated, and apps must be certified for compatibility and content.

The companion sample implements the functionality discussed here and the basic requirements of all Windows Store apps to pass certification, including:

  • Splash screen and tile images
  • Full support for touch, mouse, and keyboard input
  • Support for various window sizes, device orientations, and display sizes
  • Roaming and session state
  • Privacy statement on Description page and in the Windows Settings charm
  • Optimized for globalization, localization, and accessibility

Here are some general pointers to help guide you and take your little (or not so little) app to market.

start icon

Sign up

Get a Microsoft account and a Windows Store developer account if you don't already have them. You'll need both to get your apps in the Windows Store.

As you develop your app, consider the App certification requirements for the Windows Store and try to avoid common certification failures.

step icon

Create your app

Follow the steps here to create your own flat navigation app. You can start with the accompanying Flat navigation pattern template or you can create a Blank App Windows Store project in Microsoft Visual Studio.

step icon

Take your app to market

When you've set up your account and built your app, get it into the Windows Store.

Target your app to the right audience before you submit.

Begin the distribution process.

Use the promotion tools available through the Windows Store to help customers discover your app.

Use telemetry data to analyze usage data and improve app quality and performance.

 

Now we move on to the details of how to implement the UI and functionality for the flat navigation pattern in a Windows Store app.

The companion sample implements all the following items, but to keep things flowing we won't walk through the code here. Each step has a "Find it in the sample" call out to help you find the code quickly.

Some of these details might not apply to your app. Pick and choose the details that apply to you.

Navigation concepts

With the basics of getting your app to market covered, it's time to review the various navigation patterns commonly used by Windows Store apps and included as templates in Microsoft Visual Studio. These are:

step icon

Navigation patterns

Choose the best navigation pattern for your app and its content.

We use the Flat navigation pattern companion sample to show the concepts discussed here, so download the sample and try things out.

After you've confirmed that the flat navigation pattern is the most suitable structure for your app, continue following these steps, or jump right in and use the sample as a template in the design and development of your own app.

step icon

Inspiration

Be inspired by the navigation examples in these case studies and idea books.

 

Navigation implementation

step icon

The companion sample for this topic is derived from the Blank App project template in Visual Studio, so it would be helpful to review these topics.

  • C#, VB, and C++ project templates for Windows Store apps

    Summarizes the Windows Store apps using C++, C#, or Visual Basic templates. This includes implementation details about the navigation model, data model, handling of view state, and so on.

    The navigation models highlighted here load XAML pages into a single app-wide context, typically in response to user actions. This is often referred to as single-page navigation.

  • C#, VB, and C++ item templates for Windows Store apps

    App files containing commonly used code that can be added to a project template to reduce development time.

step icon

Quickstart: Navigating between pages

Goes into detail about how Frame and Page objects support single-page navigation. (The Frame class displays and manages navigation between pages.)

 

Image resources

Specify image resources (visual assets such as splash screen and tile images) for your app on the Application UI tab of the application manifest. To do this, open package.appxmanifest from the Solution Explorer. See Using the Manifest Designer.

Note  The companion app includes placeholder images that meet Windows Store requirements. For demonstration purposes, additional images that support accessibility with varied contrast settings, and localization in French (fr-FR) have been included with the template. Most images are provided at multiple resolutions.

step icon

Optimizing images for different screen resolutions

Create image resources for your app, add them to your project, and identify them in the application manifest.

step icon

Choosing your app images

Specify images that provide the best experience possible. Include scaled versions for different screen resolutions.

Your app requires a basic set of images to pass store certification.

  • Store logo

    Displayed with your app's listing in search results and with the app's description in the listing page.

  • Logo

    Displayed in the square tile for the app on the Start screen. See Creating tiles and App tiles and badges sample.

  • Small logo

    The small logo appears with your app's display name in search results that are returned on the Start screen. It also appears in the list of searchable apps, and when the Start page is zoomed out.

  • Splash screen

    Displayed when an app is launched, and dismissed as soon as the app is ready for interaction. The splash screen is composed of an image and a background color, both of which can be customized. See Adding a splash screen and Splash screen sample.

step icon

Quickstart: Using file or image resources

Follow these instructions for naming and organizing your file resources in folders. For a more detailed example, see the App tiles and badges sample.

 

App bars

The companion app provides navigation commands that are accessible from the navigation bar. Other commands are included in the standard app bar.

step icon

Quickstart: adding app bars

Present navigation, commands, and tools to users on demand. The app bar shows commands relevant to the user's context, usually the current page, or the current selection. Customize as required. For a more detailed example, see XAML AppBar control sample.

 

Roaming application data

step icon

Accessing app data

Manage application data, including runtime state, user preferences, and other settings. This data is created, read, updated, and deleted when the app is running.

step icon

Quickstart: Roaming application data

Keep your app's data and state in sync across multiple devices and reduce setup tasks and repetitive work for the user on their other devices. Windows replicates data to the cloud when it is updated, and synchronizes data to the other devices on which the app is installed.

 

Settings

Depending on the capabilities and declarations in your app manifest, your app might be required to provide a privacy statement through the Settings charms.

The Private Networks (Client & Server) capability is set in the companion app, which requires that a privacy statement be provided. See certification requirement 4.1.

The companion app includes both a privacy statement and help content that are accessible from the Settings charm. The privacy statement must also be shown on the description page of your app.

step icon

Adding app settings

Provide access to all settings relevant to the user's current context. Customize as required. See Application settings sample.

step icon

Your app's description

Make your app's description as detailed as possible so that it clearly represents what your app does.

 

Globalization

Be consistent with globalization and make sure your screen shots demonstrate that you've localized your app. Keep in mind that languages are not the same as markets.

step icon

App resources and localization

Design Windows Store apps so that their resources can be independently maintained and localized, and also customized for different scaling factors, accessibility options, and other user and machine contexts. See Application resources and localization sample.

step icon

Localizing the package manifest

Localize your app's display name, description, and other identifying features, which are described in the application manifest.

step icon

Globalizing your app

Adapt your software for additional languages, markets, cultures, and regions.

 

Accessibility

Declare your app as accessible only if you have specifically engineered and tested it for accessibility scenarios.

step icon

Testing your app for accessibility

Discover the accessibility testing tools, included with the Windows Software Development Kit (SDK) for Windows 8, that help you verify the accessibility of your app.

step icon

Declaring your app as accessible in the Windows Store

If you have tested your app for accessibility, indicate that by checking the Accessibility checkbox on the Selling details page.

 

Wrap up

store requirements icon

Certify your app with the Windows App Certification Kit.

Run the Windows App Certification Kit to help ensure your app fulfills Windows Store requirements. Do this whenever you add major functionality to your app.

stop icon

You’re done! Your app should be compact, free of clutter, and easy to navigate.

Sit back and bask in your success.

 

Want to know more?

Planning Windows Store apps

Learn more about what experience you want to provide your users.

Design for accessibility

Learn more about the wide range of abilities, disabilities, and preferences of your users.

Design for different form factors

Learn more about handling different devices, input methods, and screen orientations.

Index of UX Guidelines

Browse the full list of user experience guidelines.

Samples

 

 

Show:
© 2014 Microsoft