Windows Phone 7: Application Bar
Глупая привычка, пришедшая с опытом создания 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]](https://baydachnyy.files.wordpress.com/2011/03/clip_image0011.png "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]](https://baydachnyy.files.wordpress.com/2011/03/clip_image0021.png "clip_image002[1]")
Нужно сказать, что меню в Application Bar очень часто не оправдывают себя. С таким же успехом я мог бы разместить кнопку Language и переводить пользователя на отдельную страницу, по выбору языка.
Проблема в Application Bar состоит в том, что это элемент управления Windows Phone 7, и он не поддерживает возможности Silverlight-элементов управления, например, связывание с данными. Несмотря на это, элемент управления поддерживает возможность динамического заполнения из языка программирования C#.
Так, класс ApplicationBar находится в пространстве имен Microsoft.Phone.Shell. Доступ к ApplicationBar осуществляется через соответствующее свойство класса PhoneApplicationPage.
В общем штука хорошая, поэтому пользуйтесь.
Хорошая статья. Спасибо.
Удобный компонент 🙂
Только есть одна проблема — если работать с компонентом 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
[…] назад я писал о работе с ApplicationBar в Windows Phone приложениях https://baydachnyy.com/2011/03/07/windows-phone-7-application-bar/. Как ни странно, сегодня многие разработчики забывают […]
Application Bar в Windows Phone 7.5 « Блог Сергея Байдачного
12.12.2011 at 15:02
[…] Еще одна полезная вещь, о которой я писал ранее, и которую игнорируют многие разработчики – настройка клавиатуры. О возможности установить свой тип клавиатуры можете почитать тут. […]
Настройка клавиатуры в Windows Phone 7.5 « Блог Сергея Байдачного
14.12.2011 at 14:42