Добавление панели приложения AppBar с настраиваемым содержимым (HTML)

Статья
03/04/2016

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

С помощью JavaScript можно добавить панель приложения AppBar с настраиваемым содержимым в приложение Магазина Windows. Элемент управления AppBar и содержащиеся в нем элементы AppBarCommand можно настроить разнообразными способами: добавить особое HTML-содержимое, создать всплывающие элементы, вставить команды переключения и т. д.

Примечание Чтобы создать постоянную панель навигации для приложения, используйте элемент управления NavBar. Подробнее о создании панели навигации см. в разделе Краткое руководство: добавление панели навигации.

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

Инструкции

Создание нового проекта с помощью шаблона "Пустое приложение"

Запустите Microsoft Visual Studio.
На вкладке Начальная страница выберите команду Создать проект. Откроется диалоговое окно Создание проекта.
На панели Installed (Установлено) разверните узлы Templates (Шаблоны) и JavaScript, а затем выберите шаблон Windows Store app (Приложение Магазина Windows). Шаблоны проектов для JavaScript отображаются на центральной панели диалогового окна.
На центральной панели выберите шаблон проекта Пустое приложение.
В текстовом поле Имя введите Custom AppBar demo.
Чтобы создать проект, нажмите кнопку ОК.

2. Добавление элемента управления панелью приложения и настройка ее команд

Вы можете настроить панель приложения AppBar с помощью настраиваемых команд AppBar. Вы можете изменить тип элемента управления AppBarCommand с помощью его свойства type. Некоторые типы команд панели приложения AppBar можно размещать только в определенных основных элементах HTML.

Свойство AppBarCommand.type принимает одно из пяти значений:

button — значение типа по умолчанию. Оно определяет стандартную кнопку и может применяться только к элементу <button>.
flyout — создает кнопку, открывающую смежный с ней фрагмент HTML (всплывающий элемент). Чтобы создать AppBarCommand для всплывающего элемента, задайте тип "flyout" и настройте его свойство flyout. Свойство flyout должно ссылаться на определенный элемент управления Flyout. AppBarCommand для всплывающего элемента может размещаться только в элементе <button>.
toggle — создает кнопку-переключатель. Когда кнопка выбрана, цвета значка AppBarCommand меняются на противоположные (например, черный становится белым, а белый — черным). AppBarCommand для переключателя может размещаться только в элементе <button>.
separator — создает горизонтальную линию в AppBar, визуально разделяя другие элементы управления AppBarCommand. AppBarCommand для разделителя может размещаться только в элементе <hr/>.
content — создает объект AppBarCommand, внутри которого может размещаться другая разметка HTML. Эта разметка может включать текст, теги <input> и даже подмножество элементов управления библиотеки Windows для JavaScript (WinJS). AppBarCommand для содержимого может размещаться только в элементе <div>.

Элементы управления AppBar и AppBarCommand можно создать декларативно в HTML или во время выполнения с помощью JavaScript. В данном примере показано, как декларативно создать панель приложения AppBar в разметке HTML default.html. В примере используются семь элементов управления AppBarCommand.

Hh780658.wedge(ru-ru,WIN.10).gif Добавление пользовательского содержимого на панель приложения AppBar

В обозревателе решений откройте файл default.html из корневой папки решения.

Замените разметку внутри тегов <body> указанной далее разметкой.

<div data-win-control="WinJS.UI.AppBar"
    data-win-options="{
        placement: 'bottom'
    }">
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'default'
            icon: 'placeholder',
            label: 'Button',
            type: 'button'
    }">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'flyout', 
            icon: 'volume', 
            label: 'Volume', 
            type: 'flyout',
            flyout: select('#volumeFlyout')}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'toggle', 
            icon: 'filter', 
            label: 'Filter', 
            type: 'toggle'}">
    </button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'separator' }"/>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <p>You can include a wide variety of HTML inside of a 'content' AppBarCommand, <br/>
        including HTML and some WinJS controls.</p>
    </div>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <div id="itemContainer"
             data-win-control="WinJS.UI.ItemContainer">
            <h3>Item Container</h3>
        </div>
    </div>
</div>
<div id="volumeFlyout"
     data-win-control="WinJS.UI.Flyout">
    <h3>Volume</h3> <input type="range" />
</div>

Сводка

В данном кратком руководстве мы добавили панель приложения AppBar с настраиваемыми кнопками в ваше приложение.

Создание панели навигации не рассматривается в этой статье. О создании панели навигации см. в разделе Краткое руководство: добавление панели навигации.

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

WinJS.UI.AppBar

WinJS.UI.AppBarCommand.type

WinJS.UI.AppBarCommand.flyout

Краткое руководство: добавление всплывающего элемента