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

Глупая привычка, пришедшая с опытом создания 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.

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

Естественно, чтобы панель работала, необходимо реализовать обработчики событий 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>

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

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

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

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

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

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

Итак, первое, что необходимо сделать при публикации в Marketplace, это убедиться, что приложение обладает иконкой, отличной от той, которая используется по умолчанию. Таких иконок две: 62 на 62, используемая при отображении приложения в общем списке; 173 на 173, используемая при привязке приложения к основному окну.

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

Чтобы изменить иконку, в проекте Visual Studio достаточно заменить файлы ApplicationIcon.png и Background.png.

Если Вы добавили файлы со своими именами, то они должны находиться в корневой директории и иметь свойство Build Action установленным в Content. Далее можно отредактировать манифест приложения, используя дизайнер Visual Studio, перейдя в окно свойств проекта:

Имея готовый пакет для публикации, переходим к публикации приложения. Для этого нам нужны следующие компоненты:

· Сам пакет xap, содержащий приложение

· Иконки в формате png 173 на 173, 200 на 200, 99 на 99

· Минимум один скрин приложения 480 на 800

· Короткое описание приложения

Это тот минимум, который необходим для публикации приложений.

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

Третья ошибка связана с языком приложения. Естественно, создавая приложение для украинского рынка, нет никакого желания использовать английский язык. Вы с легкостью можете использовать русский или украинский, но при описании приложения, Вы должны включить два описания подряд, на английском и сразу же на русском:

Если Вы сделали это, то приложение примут.

Последняя, четвертая ошибка – приложение должно иметь окно типа About, содержащее информацию об авторе приложения, контактах для поддержки. Данное окно должно быть легко доступно. Если этого окна (даже примитивного MessageBox) нет, то приложение не примут.

Вот и все. Это основные ошибки, с которыми мы столкнулись при публикации приложений. Присылайте Ваши приложения для публикации.