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

Expression Blend --- Windows Phone 7 --- Особенности разработки проектов

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

Монтажный стол на платформе 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:

В процессе разработки пользовательского интерфейса эти стили связываются с элементами управления на панели 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.

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

• Щелкните на кнопке раскрывающегося списка Create data source, доступного на панели Data.

• Выберите из этого списка вариант Create Object Data Source.

• Выберите в открывшемся диалоговом окне нужный класс (в данном случае 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:

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

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

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