Пользовательские кнопки AppBar современного пользовательского интерфейса

Я разрабатываю свое первое современное приложение для Windows 8, и мне, похоже, трудно найти правильную документацию для создания кнопок панели приложений, которые не похожи на кнопки по умолчанию.

Я пытаюсь сделать что-то вроде панели приложений в Microsoft Solitaire Collection, например: http://www.windows8core.com/wp-content/uploads/2012/08/2b1.png

Есть три вещи, на которые следует обратить внимание:

  1. Пользовательский значок (медведь, в первом)
  2. Это не похоже на кнопки по умолчанию с текстом под значком.
  3. Он прямоугольный, а его ширина пропорциональна ширине приложения в заполненном и полноэкранном ландшафтном режимах. (В закрепленном режиме кнопки просто исчезают, но для моего приложения я бы хотел, чтобы в закрепленном режиме были «только значки», если это возможно).

Я начал с использования <button>, поскольку семантически они являются кнопками, и кажется, что только <button> и <hr> относятся к панели приложений.

Я устанавливаю параметры в атрибутах data-win-options или это что-то делается в JavaScript?

Я использую JavaScript/HTML5, а не C++/C#/VB. Вот статьи MSDN, которые я прочитал о панели приложений.


appbar windows-runtime windows-store-apps winjs windows-8
person rink.attendant.6    schedule 03.03.2013    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Если это верхняя панель приложений, которая обычно используется для навигации, вы можете предоставить собственный пользовательский интерфейс, указав свойство layout в data-win-options со значением custom, как обсуждалось здесь.

Вы также можете прочитать об стилизации панелей приложений. .

И последнее, но не менее важное: ознакомьтесь с примером элемента управления HTML AppBar. , который, среди прочего, иллюстрирует использование пользовательского макета.

Чтобы получить дополнительные сведения о разработке приложений для Магазина Windows, зарегистрируйтесь в Generation App.

person devhammer    schedule 04.03.2013
comment
Да, это для верхней AppBar, используемой для навигации. Я посмотрю на образец, чтобы понять, как что-то делать, но я думаю, что пользовательский интерфейс моего приложения нуждается в незначительных изменениях. Спасибо. - person rink.attendant.6; 05.03.2013

arrow_upward
0
arrow_downward

И я бы посоветовал вам позаботиться о настройке значков на панели приложений. Значительные отклонения от принципов дизайна могут сделать ваше приложение менее популярным. Тестирование пользовательского интерфейса показывает, что пользователям нравится согласованность стандартного пользовательского интерфейса. Я видел, как это сделано очень со вкусом и эффективно (как в приложении Nook), но видел и плохо (не говоря уже об именах :) Получайте удовольствие.

person Jeremy Foster    schedule 04.03.2013

arrow_upward
0
arrow_downward

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

Для этого значка медведя вы можете сделать так

<AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Images/Bear.png" />
</AppBarButton.Icon>

Если вы хотите, чтобы панель приложений с поддержкой макета использовала CommandBar или с AppBar, вы должны программно обрабатывать изменения размера приложения.

см. здесь: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj662742.aspx

Я сделал то же самое в своем приложении.

person pooja_b    schedule 09.09.2014