Поделиться через

Краткое руководство: использование одностраничной навигации (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Ознакомьтесь с моделью одностраничной навигации и способами ее реализации в собственном приложении с помощью объектов PageControl и возможностей WinJS.Navigation.

Справочные сведения по выбору оптимального шаблона навигации для конкретного приложения см. в разделе Шаблоны навигации.

Кроме того, вы можете посмотреть шаблоны одноуровневой навигации и иерархической навигации в действии в нашей серии демонстраций Компоненты приложения от начала до конца.

Необходимые условия

Создание базовой ссылки

Одной из простейших и чаще всего используемых форм навигации является гиперссылка. В следующем примере кода HTML создается гиперссылка для перехода на страницу page2.html.

<p><a href="page2.html">Go to page 2</a></p>

Так как это относительная ссылка, то система предполагает, что page2.html — это локальная страница, являющаяся частью приложения и задаваемая относительно базового URL-адреса текущего документа. Например, если ссылка отображается в файле /folder/default.html, то она ведет на страницу /folder/page2.html.

Примечание  Если вы оптимизировали свое приложение для локализации (что всегда полезно), результаты будут изменяться в зависимости от папок локализованного содержимого в /folder/. См. раздел Глобализация приложения.

 

Если вы хотите явным образом указать полный универсальный код ресурса (URI) для локального файла в вашем приложении, используйте новую схему URL-адресов пакетного содержимого (ms-appx), аналогичную следующей:

  • **ms-appx://package name/**file path

При желании имя пакета можно опустить.

  • **ms-appx:///**file path

См. пример.

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

С помощью новой схемы URL-адресов ms-appx можно сослаться на любой файл, включенный в пакет приложения. Однако рекомендуется использовать относительные URL-адреса, поскольку они автоматически разрешаются по базовому URL-адресу документа.

Одностраничная навигация: рекомендуемая модель

В предыдущем примере было показано, как создать ссылку для навигации верхнего уровня. Это прекрасно подходит для веб-страницы, но не следует выполнять навигацию верхнего уровня в приложении по ряду причин, включая следующие.

  • Экран становится пустым, когда приложение загружает следующую страницу.
  • Контекст сценария уничтожается, и его необходимо снова инициализировать. Приложение может получать системные события, но не может их обработать из-за уничтожения и повторной инициализации контекста сценария.

Применение одностраничной навигации обеспечивает более высокую производительность и более привычное пользователям взаимодействие с приложениями по сравнению с навигацией верхнего уровня. Элементы управления навигацией не предоставляются автоматически в новых проектах Microsoft Visual Studio, поэтому после перехода на новую страницу в навигации верхнего уровня нет возможности вернуться на первую страницу, если не создать вручную ссылку или другой навигационный механизм для возврата. Кроме того, на начальной странице приложения следует определить — каким образом приложение будет управлять своим жизненным циклом: как оно будет реагировать на запуск, завершение работы или приостановку. Если есть несколько страниц верхнего уровня, то каждая из них должна содержать логику для управления жизненным циклом и состоянием приложения.

Какой элемент управления следует использовать для загрузки содержимого на главную страницу?

  • Для загрузки документов из другого источника вы можете использовать модель DOM.
  • Для простого HTML-содержимого (содержимого, которое не является интерактивным и не содержит ссылки на сценарии) используйте объект HtmlControl.
  • Для внешнего веб-содержимого по возможности используйте элемент управления x-ms-webview. По сравнению с iframe этот элемент управления обеспечивает лучшую изоляцию, навигацию, доступность фильтра SmartScreen и поддержку для сайтов, которые невозможно размещать в iframe.
  • Для всего остального содержимого используйте элемент управления Page.

В Visual Studio включено несколько шаблонов проектов JavaScript для приложений, упрощающих управление навигацией. Эти шаблоны проектов предоставляют средство управления навигацией PageControlNavigator, которое можно использовать для навигации между объектами PageControl. Класс PageControlNavigator представляет собой пример использования элементов управления PageControl для реализации одностраничной навигации.

На следующих шагах будет показано, как создать приложение, содержащее несколько объектов PageControl, и как использовать модель одностраничной навигации для перемещения между этими страницами.

Шаг 1. Создание проекта приложения навигации

  1. Запустите обновление 2 для Visual Studio 2013.

    Примечание  При первом запуске Visual Studio вам будет предложено получить лицензию разработчика.

     

  2. Выберите пункты Файл > Создать проект или выберите команду Создать проект на вкладке Начальная страница. Откроется диалоговое окно Создание проекта.

  3. На панели Шаблоны слева разверните Установленные => Шаблоны => JavaScript => Приложения Магазина.

  4. Выберите тип шаблона Универсальные приложения. Доступные шаблоны проектов для JavaScript отображаются на центральной панели диалогового окна.

  5. На центральной панели выберите шаблон проекта Приложение навигации (Универсальные приложения).

  6. В текстовом поле Имя введите имя для вашего проекта. В примерах в этом разделе используется имя "NavigationAppExample".

    В диалоговом окне “Новый проект” отображаются шаблоны универсальных приложений JavaScript.

  7. Чтобы создать проект, нажмите кнопку ОК.

    Новый проект Приложение навигации содержит начальную и домашнюю страницы, а также несколько вспомогательных файлов. В обозревателе решений это выглядит примерно так.

    Файлы в новом проекте приложения навигации.

    Новый проект Приложение навигации содержит несколько файлов. Некоторые специфичны для приложений для Windows, некоторые — для приложений для Windows Phone, а некоторые используются в обоих.

    Проект содержит следующие HTML-файлы:

    • default.html—Это начальная страница. Она загружается в первую очередь. Она содержит экземпляр элемента PageControlNavigator, который загружает каждую страницу в главное окно. На ней следует создавать объект AppBar, если он будет использоваться в вашем приложении.Примечание  Единым контейнером содержимого HTML-страниц является элемент div, объявленный в default.html. В файле default.html контейнер для содержимого — элемент div — объявлен как элемент управления типа PageControlNavigator при помощи атрибута HTML data-win-control из библиотеки Windows для JavaScript (WinJS).  
    • home.html— домашняя страница. На ней отображается приветствие.

    Проект содержит следующие файлы JavaScript:

    • default.js— описывает поведение приложения при запуске.
    • home.js— описывает реакции на события для домашней страницы.
    • navigator.js— реализует объект PageControlNavigator, поддерживающий модель навигации в шаблонах JavaScript для приложений Магазина Windows.

    Проект содержит следующие файлы CSS:

    • default.css— задает стили каскадных таблиц стилей (CSS) для страницы узла содержимого и приложения в целом.
    • home.css— описывает стили CSS для домашней страницы.

    Кроме того, проект содержит файл package.appxmanifest с описанием пакета приложения. И наконец, в проект включено несколько файлов изображений, например splashscreen.png для экрана-заставки и storelogo.png для Магазина Windows.

  8. Запустите приложение. Выберите Отладка > Начать отладку или нажмите клавишу F5. (Чтобы остановить отладку и вернуться в Visual Studio, нажмите клавиши SHIFT+F5.)

    Вот снимок экрана приложения для Windows.

    Новое приложение навигации Windows.

    Вот снимок экрана приложения Windows Phone.

    Новое приложение навигации Windows Phone.

    Обратите внимание, что отображаемое содержимое не определено в файле default.html. Оно определено в файле home.html, который представляет отдельную страницу. Содержимое домашней страницы извлекается и отображается внутри файла default.html с помощью элемента PageControlNavigator.

    Элемент управления навигацией PageControlNavigator показан здесь. Он определяет некоторые функции, используемые для навигации. navigator.js реализует этот элемент управления.

    
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});

    Инициализацию элемента управления навигацией выполняет функция конструктора. К некоторым основным задачам инициализации относится настройка обработчиков событий WinJS, таких как событие WinJS.Navigation.onnavigating, и настройка домашней страницы приложения. (Домашнее значение определено в элементе contenthost DIV, в атрибуте data-win-options.)

    
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);

    Элемент DIV, объявленный элементом управления навигацией приложения (в default.html), предоставляет узел содержимого для всех страниц приложения. Элемент DIV использует атрибут WinJS data-win-control, чтобы объявить себя элементом управления навигацией. Этот элемент управления предоставляет модель навигации приложения. Все содержимое страницы загружается в этот DIV.

    Ниже приведена полная разметка страницы default.html.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- NavigationAppExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" 
        data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}">
        </button>
    </div> -->
</body>
</html>

    На этой иллюстрации показаны различные блоки содержимого, отображаемые в окне приложения:

    Структура содержимого для приложения навигации.

На следующих шагах вы узнаете больше о добавлении страниц с помощью PageControlNavigator и объекта PageControl.

Шаг 2. Создание новой страницы

Элемент управления PageControl — это модульная единица HTML, CSS и JavaScript, функционирующая как логическая страница.

При добавлении новой страницы в проект Visual Studio 2013 необходимо:

  1. Добавить новую страницу с помощью шаблона элемента управления Page в Visual Studio.
  2. Добавить код для перехода на новую страницу с помощью функции WinJS.Navigation.navigate. Совет  Эта функция не выполняет непосредственный переход, а вызывает событие WinJS.Navigation.onnavigated, которое обрабатывается в файле navigator.js. Код в файле navigator.js вызывает функцию ready на новой странице. Обычно файл navigator.js не нужно изменять.  
  3. При необходимости добавить для приложения пользовательский интерфейс и обработчики событий для вызова кода навигации по страницам.

Страница имеет набор предопределенных методов, которые библиотека вызывает автоматически в заранее определенном порядке. Функция WinJS.UI.Pages.define предоставляет эти методы для реализации.

Hh452768.wedge(ru-ru,WIN.10).gifДобавление страницы

  1. В обозревателе решений щелкните правой кнопкой мыши папку pages и выберите команду Добавить > Создать папку.Примечание  В этом примере добавляется общая страница. При необходимости можно добавить уникальные страницы в проекты Windows или Windows Phone.

     

  2. Назовите новую папку page2.

  3. Щелкните правой кнопкой мыши папку page2 и выберите Добавить > Создать элемент.

  4. В диалоговом окне Добавление нового элемента выберите элемент Элемент управления страницей на центральной панели.

  5. Назовите страницу page2.html и нажмите кнопку Добавить.

    Файл page2.html создается в папке page2 вместе с двумя другими файлами проекта: page2.css и page2.js. Вместе эти файлы представляют логическую страницу.

    Совет  Если вы добавите шаблон элемента в каком-либо другом месте проекта, вам понадобится обновить сценарий и ссылки CSS в файле page2.html.

     

  6. Откройте файл page2.js и убедитесь, что в функции define правильно указан универсальный код ресурса (URI). Он должен выглядеть так.

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

Шаг 3. Настройка вашей страницы

Теперь измените новую страницу так, чтобы на ней отображалось другое сообщение и день недели.

  1. Откройте файл page2.html. Шаблон элемента управления Page создает HTML-страницу, содержащую раздел заголовка (с кнопкой "Назад") и раздел основного содержимого страницы.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

  2. Замените раздел основного содержимого следующим.

    
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

    Теперь ваш файл page2.html должен выглядеть так:

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

  3. Откройте файл page2.js. Элемент управления PageControl содержит набор предопределенных функций, которые вызываются автоматически в заранее установленном порядке. Шаблоны "Элемент управления страницей" включают функцию ready, а также функции updateLayout и unload.

    PageControlNavigator вызывает функцию updateLayout, когда пользователь переключается между книжной и альбомной ориентацией или изменяет размеры окна приложения. В этом разделе не показано, как определять функцию updateLayout, но это необходимо делать в каждой программе. См.: Рекомендации по изменению размера окна для высоких и узких макетов и Гибкое оформление 101 для приложений универсальной платформы Windows (UWP).

    Функция ready вызывается, когда модель DOM страницы загружена, элементы управления активированы, а сама страница загружена в основную модель DOM.

    (PageControl поддерживает дополнительные функции для жизненного цикла страницы. Подробнее: Добавление элементов управления страницей.)

    Вот файл page2.js, который был создан шаблоном "Элемент управления страницей".

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

  4. Измените функцию ready, чтобы она загружала набор, который вы создали на шаге 2 ("dayPlaceholder"), и назначала его свойству innerText текущий день.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

Вы создали и настроили страницу. На следующем шаге вы предоставите пользователю, запустившему приложение, возможность перейти на вашу страницу.

Шаг 4. Использование функции навигации для перехода между страницами

Если запустить приложение прямо сейчас, отобразится страница home.html, с которой нельзя будет перейти на страницу page2.html. Простым способом перехода на page2.html является ссылка на нее из home.html.


<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

Если приложение запущено и вы щелкаете ссылку, кажется, что все хорошо работает: в приложении отображается page2.html. Проблема в том, что приложение выполняет навигацию верхнего уровня. Вместо перехода со страницы home.html на страницу page2.html оно выполняет переход со страницы default.html на страницу page2.html.

Выполнение навигации верхнего уровня.

Мы же хотим заменить содержимое страницы home.html страницей page2.html.

Переход на страницу page2.html рекомендуемым способом.

К счастью, элемент управления PageControlNavigator позволяет выполнять навигацию этого типа довольно легко. Код PageControlNavigator (в файле navigator.js вашего приложения) обрабатывает событие WinJS.Navigation.onnavigated. При возникновении события элемент PageControlNavigator загружает указанную в нем страницу.

Событие WinJS.Navigation.navigated возникает при использовании для навигации функции WinJS.Navigation.navigate, WinJS.Navigation.back или WinJS.Navigation.forward.

Вы сами должны вызвать WinJS.Navigation.navigate, а не использовать поведение гиперссылки по умолчанию. Можно заменить ссылку кнопкой и использовать обработчик события нажатия кнопки для вызова WinJS.Navigation.navigate. Либо можно изменить поведение гиперссылки по умолчанию так, чтобы при выборе ссылки пользователем приложение использовало WinJS.Navigation.navigate для перехода к целевому объекту ссылки. Для этого необходимо обработать событие click гиперссылки и использовать это событие, чтобы запретить поведение гиперссылки по умолчанию, а затем вызвать функцию WinJS.Navigation.navigate и передать ей целевой объект ссылки. Вот как это можно сделать:

  1. В файле home.js определите обработчик событий click для ваших гиперссылок.

    
function linkClickEventHandler(eventInfo) {

}

  2. Вызовите метод preventDefault для отмены заданной по умолчанию обработки ссылок (непосредственного перехода на указанную страницу).

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}

  3. Получите гиперссылку, которая вызвала событие.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
}

  4. Вызовите функцию WinJS.Navigation.navigate и передайте ей целевой объект ссылки. (Можно также передать объект состояния, описывающий состояние данной страницы. Дополнительные сведения: WinJS.Navigation.navigate.)

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}

  5. В функции ready файла home.js присоедините обработчик событий для гиперссылок.

        WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

Это последний шаг. Ниже показан полный код для файла home.js.


// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

Запустите приложение и щелкните ссылку на страницу page2.html. Вот что вы увидите.

Экран страницы page2.html с кнопкой “Назад”

На этот раз страница отображается с помощью правильной схемы навигации.

Структура содержимого после перехода на страницу page2.html.

Шаблон элемента управления Page содержит кнопку "Назад", которая становится активной при использовании функций WinJS.Navigation для навигации. При использовании функций WinJS.Navigation приложение сохраняет журнал навигации. Журнал навигации можно использовать для перехода назад с помощью функции WinJS.Navigation.back или для перехода вперед с помощью функции WinJS.Navigation.forward.

Примечание  Приложения Магазина Windows обычно используют один из двух шаблонов навигации (одноуровневую и иерархическую). Не рекомендуется использовать объект BackButton в приложениях с одноуровневой навигацией. Подробнее: Схемы навигации.

 

Сохранение журнала навигации при приостановке приложения

Журнал навигации не сохраняется автоматически при приостановке или завершении работы приложения, но эти сведения можно легко сохранить самостоятельно. Используйте свойство WinJS.Navigation.history для получения журнала навигации, а объект WinJS.Application.sessionState — для его хранения. Чтобы обеспечить плавный переход между приостановкой и возобновлением, лучше всего сохранять эту информацию в ходе навигации пользователя.

При возобновлении приложения получайте сведения из объекта WinJS.Application.sessionState и используйте их, чтобы установить свойство WinJS.Navigation.history.

Пример того, как использовать объект WinJS.Application.sessionState, чтобы сохранять и возобновлять данные сеанса, см. в разделе Часть 2. Управление жизненным циклом и состоянием приложения. Подробнее о приостановке и возобновлении см. в разделе Запуск, возобновление и многозадачность.

Сводка

Теперь вы умеете использовать объекты и методы пространства имен WinJS.UI.Pages для поддержки модели одностраничной навигации.

Вы научились создавать приложения на основе модели одностраничной навигации. Вы использовали класс PageControlNavigator на основе шаблонов для реализации этой модели в вашем приложении при помощи объектов PageControl и функций WinJS.Navigation.

Связанные разделы

Для разработчиков

Ваше первое приложение. Часть 3. Объекты PageControl и навигация

Добавление панелей приложения

Краткое руководство: добавление панели навигации (NavBar)

Краткое руководство: использование элемента управления "Главный раздел" для макета и навигации

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

Пример элемента управления "Главный раздел" на HTML

Пример элемента управления AppBar на HTML

Пример элемента управления NavBar на HTML

Пример навигации и журнала навигации

Для конструкторов

Схемы навигации

Шаблоны команд

Макет

Кнопка "Назад"

Руководство по элементу управления Hub

Руководство по панелям приложения (приложения Магазина Windows)

Создание панели приложения со специальными возможностями