Создание приложения для Windows Phone 7 от начала до конца. Часть 4. Создание нового проекта, добавление страниц

http://go.microsoft.com/fwlink/?LinkId=214312
  • Перевод
Предыдущая часть

После того, как вы создали эскизы страниц вашего приложения и определили пути навигации, вы можете приступить к созданию приложения в Visual Studio 2010 Express for Windows Phone.

В этой части вы узнаете:
  • Как создать новый проект Windows Phone в Visual Studio.
  • Как добавить новые страницы к вашему приложению.
  • Как задать свойства страницы.
  • Как добавить панель приложения.
  • Как добавить значки панели приложения.
Для начала, вы можете создать новый проект Windows Phone. Visual Studio включает в себя несколько шаблонов проектов. Шаблон проекта Windows Phone Application является начальной точкой для всех шаблонов Windows Phone, поэтому он является наиболее часто используемым.

Создание нового проекта Silverlight for Windows Phone

  1. Убедитесь, что у вас установлены Windows Phone Developer Tools.
  2. В Visual Studio создайте новый проект.
  3. В диалоговом окне New Project выберите Silverlight for Windows Phone, а затем выберите шаблон проекта.
image

После того, как вы создадите проект, Solution Explorer будет похож на следующее изображение.

image

Проект Silverlight for Windows Phone содержит следующие файлы:
Файл проекта Описание
AppManifest.xml Это файл манифеста приложения, необходимый для создания пакета приложения. Как правило, нет необходимости редактировать этот файл.
AssemblyInfo.cs Этот файл содержит в себе информацию о сборке такую, как имя и версию метаданных.
WMAppManifest.xml Это файл манифеста приложения, который содержит метаданные мобильного приложения. Этот файл в основном используется в процесс публикования приложения в Windows Phone Marketplace.
App files Эти файлы используются для определения логики уровня приложения. Класс App необходим для отображения пользовательского интерфейса.
MainPage.xaml Это файл стандартной стартовой страницы, использующийся для создания пользовательского интерфейса.
MainPage.xaml.cs Этот code-behind (отделённый код) файл содержит логику для стандартной стартовой страницы. Класс MainPage является производным от PhoneApplicationPage.
ApplicationIcon.png
Background.png
SplashScreenImage.jpg
Иконка по умолчанию и файлы изображений, которые вы можете впоследствии заменить.

Добавление новых страниц


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

Вы можете добавлять страницы в ваш проект с помощью диалогового окна Add New Item.

image

При создании нового проекта Windows Phone Application в Visual Studio стандартная стартовая страница с именем MainPage создаётся автоматически. Вы можете переместить или переименовать эту страницу, но если вы сделаете это, вы должны также изменить свойство NavigationPage элемента DefaultTask в файле WMAppManifest.xml.

Настройка свойств страницы


По умолчанию у страницы есть название приложения и название страницы. Название страницы — это дополнительный непрокручиваемый заголовок для страницы. Вы можете изменить эти названия в режиме просмотра XAML или в окне «Properties».

image

Чтобы добавить информацию о названии:
  1. В режиме дизайна выберите название приложения или название страницы.
  2. В режиме просмотра XAML или в окне «Properties» измените свойство «Text».
Рекомендация по проектированию интерфейса:
Название приложения в строке заголовка должно быть в верхнем регистре. Используйте все строчные буквы для большинства остального текста в приложении, включая заголовки страниц и названия списков.

Добавление панели приложения


Панель приложения — хорошее место для отображения общих задачи или навигационных средств, которые всегда видны, не зависимо от того, прокручена ли страница или отображена ли экранная клавиатура. В панели приложения вы можете использовать элементы управления ApplicationBarIconButton и ApplicationBarMenuItem. Вы должны использовать кнопки для наиболее распространенных задач и меню для менее распространенных задач или задач, которые трудно чётко выразить с помощью иконки. Вы ограничены четырьмя кнопками панели приложения и пять пятью пунктами меню. На следующем изображении показан пример панели приложения в развернутом состоянии.

image

Рекомендация по проектированию интерфейса:
Используйте панель приложения для выполнения общих задач приложения. Помещайте реже выполняемые действия в меню панели приложения.

При создании новых страниц файл XAML автоматически включает в себя закомментированный раздел, который можно использовать для быстрого добавления панели приложения.

image

Чтобы добавить панель приложения:
  1. В режиме просмотра XAML раскомментируйте раздел Application Bar.
  2. Измените кнопки, пункты меню и текст, как вам требуется.
Следующий XAML-код реализует панель приложения на странице заправки приложения Fuel Tracker, которая служит основной навигационной точкой приложения. В этом примере кнопки связанны с обработчиком события Click в C#-коде. Обработчики события Click в свою очередь выполняют переход на другую страницу.
  1. <phone:PhoneApplicationPage.ApplicationBar>
  2.     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
  3.         <shell:ApplicationBarIconButton IconUri="/Images/fillup.png"
  4.             Text="add fill-up" Click="FillupButton_Click" IsEnabled="False" />
  5.         <shell:ApplicationBarIconButton IconUri="/Images/car.png"
  6.             Text="add car" Click="CarButton_Click" />
  7.     </shell:ApplicationBar>
  8. </phone:PhoneApplicationPage.ApplicationBar>
* This source code was highlighted with Source Code Highlighter.
Совет:
В панели приложения любой добавленный вами текст автоматически отображается в нижнем регистре.

Иконки панели приложения


Есть несколько иконок панели приложения, которые устанавливаются вместе с Windows Phone Developer Tools. Вы можете найти эти иконки в одном из следующих мест:
  • На 32-битных операционных системах: C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons
  • На 64-битных операционных системах: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons
Если вам необходимо создать собственную иконку панеди приложения, иконка должна соответствовать следующим требованиям:
  • Размер 48 пикселей на 48 пикселей.
  • Должна быть белого цвета на прозрачном фоне.
  • Не включает в себя изображения круга, поскольку он отображается панелью приложения.
Ниже показаны иконки панели приложения, используемые в приложении Fuel Tracker.

image

Ниже показано, как иконки панели приложения выглядят при тёмной и светлой теме.

image

Чтобы добавить иконку панели приложения:
  1. Добавьте файл иконки в проект и установите Build Action в Content.
  2. В XAML-коде, установите свойству IconUri для элемента ApplicationBarIconButton относительный URI изображения, как показано в следующем фрагменте.
  1. <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png"
  2.         Text="Save Car" Click="SaveButton_Click" />
* This source code was highlighted with Source Code Highlighter.

Следующая часть
  • +13
  • 7,8k
  • 7
Поделиться публикацией
Комментарии 7
    0
    Хм, наверное интересно. Но если честно, я в глаза не видел ни одного телефона на Windows Phone 7. Потому и разрабатывать что либо смысла к сожалению не вижу. А так, да, интересно.
      0
      Просто пока нету русской локализации (она ожидается осенью этого года). Хотя телефон можно легко найти в продаже. Отсутствие на данный момент русской клавиатуры доставляет некоторые неудобства (хотя можно пропатчить ось и поставить русскую клавиатуру взамен другой, например испанской), но я брал себе телефон с целью разработки приложений под него.
      0
      Уж слишком у них все замешано на черно-белой гамме
        0
        Гамму вы можете выставить в принципе любую в телефоне. Ваше приложение может либо использовать дефолтную тему телефона, либо же вы можете сами определить нужные цвета.

        Черно-белая тема по дефолту выставлена из-за соображений энергосбережения, темная цветовая гамма потребляет намного меньше энергии, чем светлая.Это конечно зависит от экранов, установленных на телефоне.
        0
        Хотелось бы в следующих статьях увидеть пример создания страниц страниц с горизонтальной прокруткой (не знаю как точно выразиться), по аналогии как сделано в маркетплейсе, когда прокручивая влево или в право мы перемещаемся между категориями new, top, free и т.д.
        0
        Раскомментил блок для панельки, но ничего не отобразилось.
        Не пойму, что я делаю не так. Подскажите, пожалуйста.

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

        Самое читаемое