Особенности разработки проектов

94

А теперь, когда на вашем компьютере установлены все инструментальные средства, необходимые для разработки приложений на платформе Windows Phone 7, рассмотрим конкретный пример создания проекта типа Windows Phone Application в среде Expression Blend IDE. Для этого в диалоговом окне New Project, открывающемся по команде Fileo --> New Project, выберите шаблон Windows Phone Application, и присвойте новому проекту имя FirstPhoneApp.

Монтажный стол на платформе Windows Phone 7

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

Вид монтажного стола на платформе Windows Phone 7

Проанализировав содержимое панели Objects and Timeline, вы обнаружите, что основным диспетчером компоновки, как и в проекте приложения WPF или Silverlight является объект LayoutRoot типа Grid. Этот объект представляет собой сетку, разбитую на две строки. В первой строке содержится блочная панель TitlePanel типа StackPanel с исходным текстом, отображаемым сверху, а во второй строке — объект ContentPanel, подчиненной сетки типа Grid, где, собственно, и конструируется пользовательский интерфейс разрабатываемого приложения.

Первоначальная разметка, описывающая эту систему компоновки, приведена ниже:

<Grid x:Name="LayoutRoot" Background="Transparent">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!-- Имя приложения и заглавие страницы -->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!-- Дополнительное содержимое -->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"/>
</Grid>

Системные стили, доступные на платформе Windows Phone 7

Если внимательно проанализировать определение элементов управления типа TextBlock, в приведенной выше разметке, то можно заметить, что в них автоматически применяются стили, характерные для платформы Windows Phone 7: PhoneTextNormalStyle и PhoneTextTitleStyle.

На платформе WPF предоставляется ряд простых стилей, которые относятся к категории Simple Styles и могут служить в качестве отправной точки для последующей специальной настройки под конкретные нужды разрабатываемого приложения. Аналогичным образом в приложении Windows Phone 7 можно (и должно, как показывают наилучшие примеры из практики оформления пользовательских интерфейсов) применять ряд встроенных системных стилей, относящихся к категории System Styles. Эти применяемые по умолчанию стили можно найти и просмотреть по указанной категории в библиотеке ресурсов или на панели Assets:

Системные стили, доступные на платформе Windows Phone 7

В процессе разработки пользовательского интерфейса эти стили связываются с элементами управления на панели Properties. А еще проще выбрать нужный стиль из категории System Styles в библиотеке ресурсов и перетащить его на монтажный стол. В качестве упражнения попробуйте перетащить выбранные объекты стилей на объект ContentPanel типа Grid и посмотреть, что из этого получится. Но не забудьте после этого удалить эти объекты стилей.

Построение представления данных с перечислением подробностей на панели Data

На данной стадии работы над рассматриваемым здесь примером проекта можете воспользоваться любыми способами, рассмотренными в предыдущих статьях по Expression Blend, для создания пользовательского интерфейса. В частности, можете воспользоваться панелью Data для построения конкретного представления данных с перечислением подробностей, создать специальный шаблон и простую анимацию.

Прежде всего нужно импортировать классы PurchaseOrder и PurchaseOrders (expression_blend/ui/level6/6_5.php), по команде меню Project --> Add Existing Item. После этого постройте свой проект по команде меню Project --> Build Project и далее воспользуйтесь панелью Data для создания нового источника данных объекта, привязываемого к специальной коллекции типа PurchaseOrders.

Как пояснялось в ранее, новый источник данных объекта можно создать, выполнив следующие действия:

Определив источник данных объекта, перетащите узел Description из панели Data на второй объект типа Grid, именуемый по умолчанию ContentPanel. Далее щелкните на кнопке Details Mode в левом верхнем углу панели Data, выберите все узлы ниже класса PurchaseOrders и перетащите их из панели Data на монтажный стол, чтобы создать взаимосвязь с перечисляемыми подробностями:

Компоновка пользовательского интерфейса с привязкой данных

Вы вольны изменить как угодно размеры, расположение или конфигурацию любых элементов пользовательского интерфейса, воспользовавшись панелью Properties.

Создание интерактивной графики

В проектах на платформе Windows Phone 7 имеется также возможность создавать интерактивную графику, хотя выбор готовых геометрических объектов несколько ограничен. Но вы можете по-прежнему рисовать произвольные формы инструментами Pen и Pencil. Кроме того, можете выбрать элементарные геометрические формы прямоугольника (Rectangle), эллипса (Ellipse) и линии (Line) на панели Tools.

Для целей рассматриваемого здесь проекта добавьте новый диспетчер компоновки типа Canvas к объекту ContentPanel типа Grid. Напомним, что отдельные графические элементы можно перетащить из панели Assets (но не из библиотеки ресурсом) на панель Objects and Timeline или же выбрать их по отдельности и нарисовать мышью на монтажном столе.

Нарисуйте эллипс (графический элемент типа Ellipse) на новом виртуальном полотне (объекте типа Canvas) и добавьте к нему объект поведения типа MouseDragElementBehavior. Для этого найдите данный объект поведения в категории Behaviors на панели Assets, выберите его и перетащите на эллипс, находящийся в данный момент на монтажном столе.

Далее выберите новый объект поведения типа MouseDragElementBehavior на панели Objects and Timeline, а затем установите флажок, активизирукмций свойство ConstrainToParentBounds:

Настройка объекта поведения

Теперь можете запустить свое приложение па выполнение, нажав функциональную клавишу <F5> или комбинацию клавиш <Ctrl+F5>. Как видите, эмулятор Window Phone 7 запускается автоматически для размещения вашего приложения! Проверьте, сможете ли вы взаимодействовать с графикой посредством мыши и просматривать подробности, перечисляемые при выборе отдельных элементов из списка.

Создание специального шаблона элемента управления

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

Нарисуйте сначала произвольную геометрическую форму инструментом Pen в нижней части объекта ContentPanel типа Grid, а затем щелкните на этой форме правой кнопкой мыши и выберите команду Make Into Control из всплывающего контекстного меню:

Создание нового шаблона элемента управления из существующей графики

Выберите элемент управления типа Button в открывшемся диалоговом окне Make Into Control. Присвойте ему имя, например TriangleButton (треугольная кнопка), и сохраните этот новый ресурс объекта на уровне приложения.

В данный момент вновь созданный шаблон отображается в среде Expression Blend IDE средствами визуального конструктора шаблонов. Напомним, что вы вольны изменить свойства элементов пользовательского интерфейса, дополнить их интерактивными средствами, воспользовавшись диспетчером визуальных состояний (VSM) и панелью States, а также внести любые другие коррективы в данный шаблон. Поэтому уделите немного времени правке этого шаблона, а затем, когда будете удовлетворены полученными результатами, перестройте свой проект по команде Project --> Build Project.

Настройка эмулятора Windows Phone 7 на панели Device

Прежде чем запускать свое приложение на выполнение, откройте файл разметки главной страницы MainPage.xaml в редакторе XAML на монтажном столе. А затем откройте панель Device (Устройство) из меню Window:

Открытие панели Device

Как показано на рисунке ниже, на этой новой для среды Expression Blend IDE панели имеется возможность настроить целый ряд параметров, касающихся порядка обработки приложения Windows Phone 7 при выполнении проекта.

Порядок запуска проектов

По умолчанию в среде Expression Blend IDE используется эмулятор Windows Phone 7, установленный вместе с SDK, но вы можете подключиться к конкретному мобильному устройству, совместимому с платформой Windows Phone 7, для выполнения своего приложения непосредственно на нем. Кроме того, можете воспользоваться панелью Device, чтобы изменить ориентацию и цветовую палитру отображения.

Таким образом, для создания простого иллюстративного проекта приложения, предназначенного для мобильного устройства и снабженного привязкой данных, векторной графикой, реакцией на действия мыши и специальным шаблоном элемента управления, оказалось достаточно всего нескольких строк разметки. В качестве примера на рисунке показано приложение, выполняющееся в эмуляторе. (В данном примере изменен текст надписей в элементах управления типа TextBlock, содержащихся в диспетчере компоновки TitlePanel.):

Эмулятор приложения на платформе Windows Phone 7
Лучший чат для C# программистов