Блог Сергея Байдачного

Мой блог о технологиях

Windows Phone 7: Application Bar

3 комментария

Глупая привычка, пришедшая с опытом создания Windows и Web приложений – создание всех интерфейсных элементов в окне приложения. Я сам на это купился, создавая свое первое приложение для Windows Phone 7 – Пятнашки. В основном окне этого приложения есть две кнопки: Refresh и About. Выглядят они странно (особенно About) и явно лишними. И все хорошо, пока в Вашем приложении нет полей редактирования, инициирующих вызов клавиатуры, закрывающей часть необходимых кнопок. Представьте приложение, имеющее поле редактирования на весь экран, а внизу экрана кнопку Send, позволяющую отправить сообщение. При вводе текста, кнопка Send будет перекрыта клавиатурой, а начинающий пользователь будет ломать голову, что с этим делать и как добраться до кнопки. Именно поэтому, Windows Phone 7 приложения имеют возможность использовать специальную панель для элементов управления Application Bar.

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

Application Bar не может быть перекрыт клавиатурой или другими элементами, а при вызове «сдвигает» весь интерфейс. Правда это происходит в том случае, если прозрачность установлена в 1. Если прозрачность установлена в значение меньшее 1, то Application Bar начинает перекрывать экран, используя эффект прозрачности.

Итак, попробуем создать простой Application Bar. Первое, что необходимо сделать, это определиться с иконками. Некоторые иконки доступны в папке C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\dark, а остальные нужно нарисовать самостоятельно. При создании иконки есть несколько рекомендаций: 1). Иконку рисуют белым цветом на прозрачном фоне. При изменении темы, такая практика позволяет сделать иконку видимой для пользователя; 2). Размер иконки должен быть 48 на 48 пикселей, но все, что Вы нарисовали, нужно уместить в прямоугольник 26 на 26 пикселей и расположить изображение по центру. Все от того, что любое изображение будет заключено в окружность радиусом 14. Если Ваше изображение будет больше, то возникнут пересечения.

Итак, чтобы добавить кнопку Refresh и About в Application Bar приложения, достаточно в MainPage.xaml добавить следующий код:

   1:      <phone:PhoneApplicationPage.ApplicationBar>
   2:          <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
   3:              <shell:ApplicationBarIconButton 
       IconUri="/Images/appbar.refresh.rest.png"  
       Text="Refresh" Click="ClickRefresh"/>
   4:              <shell:ApplicationBarIconButton 
       IconUri="/Images/appbar.questionmark.rest.png" 
       Text="About" Click="ClickAbout"/>
   5:          </shell:ApplicationBar>
   6:      </phone:PhoneApplicationPage.ApplicationBar>
 

Иконки я выбрал из SDK, установив Build Action в Content и Copy to Output Directory в Copy Always.

Вот такая панель у нас получилась:

clip_image001[1]

Естественно, чтобы панель работала, необходимо реализовать обработчики событий ClickAbout и ClickRefresh.

Добавим к этой панели возможность выбора языка интерфейса. Для этого расширим Application Bar двумя пунктами меню:

   1:      <phone:PhoneApplicationPage.ApplicationBar>
   2:          <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
   3:              <shell:ApplicationBarIconButton 
        IconUri="/Images/appbar.refresh.rest.png"  Text="Refresh" Click="ClickRefresh"/>
   4:              <shell:ApplicationBarIconButton 
        IconUri="/Images/appbar.questionmark.rest.png" Text="About" Click="ClickAbout"/>
   5:              <shell:ApplicationBar.MenuItems>
   6:                  <shell:ApplicationBarMenuItem Text="Russian" 
        Click="SetLanguageClick"></shell:ApplicationBarMenuItem>
   7:                  <shell:ApplicationBarMenuItem Text="English" 
        Click="SetLanguageClick"></shell:ApplicationBarMenuItem>
   8:              </shell:ApplicationBar.MenuItems>
   9:          </shell:ApplicationBar>
  10:      </phone:PhoneApplicationPage.ApplicationBar>

 

В результате мы увидим следующую панель:

clip_image002[1]

Нужно сказать, что меню в Application Bar очень часто не оправдывают себя. С таким же успехом я мог бы разместить кнопку Language и переводить пользователя на отдельную страницу, по выбору языка.

Проблема в Application Bar состоит в том, что это элемент управления Windows Phone 7, и он не поддерживает возможности Silverlight-элементов управления, например, связывание с данными. Несмотря на это, элемент управления поддерживает возможность динамического заполнения из языка программирования C#.

Так, класс ApplicationBar находится в пространстве имен Microsoft.Phone.Shell. Доступ к ApplicationBar осуществляется через соответствующее свойство класса PhoneApplicationPage.

В общем штука хорошая, поэтому пользуйтесь.

Реклама

Written by Sergiy Baydachnyy

07.03.2011 в 20:41

Опубликовано в Windows Phone

Tagged with ,

комментария 3

Subscribe to comments with RSS.

  1. Хорошая статья. Спасибо.
    Удобный компонент 🙂
    Только есть одна проблема — если работать с компонентом ApplicationBar в коде, то он не отображается на форме (:
    Ниже привожу фрагмент кода, написанный с помощью источника
    http://msdn.microsoft.com/en-us/library/ff431786(v=vs.92).aspx
    public partial class MainPage : PhoneApplicationPage
    {
    // Constructor
    ApplicationBar ab;
    public MainPage()
    {
    InitializeComponent();
    ab = new ApplicationBar();
    ab.IsVisible = true;
    ab.IsMenuEnabled = true;
    ApplicationBarMenuItem mi = new ApplicationBarMenuItem(«Hello»);
    ab.MenuItems.Add(mi);
    } …..
    С этой страницы XAML отображается, а код -нет
    P:s строка — using Microsoft.Phone.Shell; само собой добавлена

    Elena

    08.06.2011 at 00:11

  2. […] назад я писал о работе с ApplicationBar в Windows Phone приложениях https://baydachnyy.com/2011/03/07/windows-phone-7-application-bar/. Как ни странно, сегодня многие разработчики забывают […]

  3. […] Еще одна полезная вещь, о которой я писал ранее, и которую игнорируют многие разработчики – настройка клавиатуры. О возможности установить свой тип клавиатуры можете почитать тут. […]


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: