Главная » Разработка для Windows Phone 7 » Стандартные файлы Silverlight

0

Загрузив проект в Visual Studio, заглянем в Solution Explorer. Там мы найдем две пары ключевых файлов: App.xaml и App.xaml.cs, MainPage.xaml и MainPage.xaml.cs. Файлы App.xaml и MainPage.xaml – это файлы XAML, тогда как App.xaml.cs и MainPage.xaml.cs – это файлы C#. Такой своеобразный принцип именования файлов подразумевает, что два файла C#-кода являются файлами выделенного кода, связанными с двумя XAML-файлами. Они содержат код для поддержки разметки. Это основная концепция Silverlight.

Сделаем небольшой обзор этих четырех файлов. В файле App.xaml.cs можно найти описание пространства имен, которое совпадает с именем проекта, и класс App, производный от Silverlight-класса Application (Приложение). Приведем фрагмент этого файла, чтобы продемонстрировать его общую структуру:

Проект Silverlight: SilverlightHelloPhone Файл: App.xaml.cs (фрагмент)

namespace SilverlightHelloPhone {

public partial class App : Application {

public App() {

InitializeComponent();

}

}

}

Во всех приложениях на Silverlight имеется класс App, производный от Application. Этот класс осуществляет все рутинные операции по общей инициализации приложения, запуску и завершению выполнения. Можно заметить, что этот класс определен как partial (частичный). Это говорит о том, что проект, вероятно, должен включать еще один C#-файл с дополнительными членами класса App. Но где этот файл?

В проекте также есть файл App.xaml, общая структура которого такова: Проект Silverlight: SilverlightHelloPhone Файл: App.xaml (фрагмент)

<Application

x: Class="SilverlightHelloPhone.App"

xmlns="http://schemas.microsoft.com/winfx/2 0 0 6/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2 0 0 6/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"> </Application>

Данный файл выглядит как XML, или, точнее, это XAML-файл, являющийся важной составляющей концепции Silverlight. В частности, разработчики часто используют файл App.xaml для хранения ресурсов, используемых приложением. Эти ресурсы могут включать цветовые схемы, градиентные кисти, стили и т.д.

Корневым элементом является Application – класс Silverlight, от которого наследуется класс App. Корневой элемент включает описания четырех пространств имен XML. Два из них являются общими для всех приложений Silverlight, два – используются только в приложениях для телефонов.

Первым объявляется пространство имен «xmlns», стандартное для Silverlight. Оно используется компилятором для определения местоположения и идентификации классов Silverlight, таких же как сам класс Application. Как и большинство описаний пространств имен XML, этот URI не указывает ни на что конкретное, это просто URI, принадлежащий Майкрософт и определенный для этой цели.

Второе пространство имен XML связано с самим XAML и позволяет ссылаться в файле на некоторые элементы и атрибуты, являющиеся, скорее, частью XAML, а не Silverlight. По общепринятым правилам это пространство имен ассоциируется с префиксом «х» (что означает «XAML»).

К таким атрибутам, поддерживаемым XAML и обозначаемым префиксом «х», относится Class (Класс), который часто называют «x class». В этом конкретном XAML-файле x:Class присвоено имя SilverlightHelloPhone.App. Это означает, что класс App в пространстве имен .NET SilverlightHelloPhone наследуется от Silverlight-класса Application, корневого элемента. Это описание того же класса, что мы видели в файле App.xaml.cs, но с использованием совершенно другого синтаксиса.

Файлы App.xaml.cs и App.xaml описывают две части одного и того же класса App. Во время компиляции Visual Studio проводит синтаксический разбор App.xaml и формирует еще один файла кода App.g.cs. «g» означает «generated» или «автоматически сформированный». Этот файл можно найти в подпапке \obj\Debug проекта. App.g.cs также является частичным описанием класса App и включает метод InitializeComponent (Инициализировать компонент), который вызывается из конструктора в файле App.xaml.cs.

Файлы App.xaml и App.xaml.cs можно редактировать, но не стоит тратить время на App.g.cs. Этот файл создается повторно при каждой сборке проекта.

При запуске программы класс App создает объект типа PhoneApplicationFrame (Рамка приложения для телефона) и присваивает этот объект собственному свойству RootVisual. Это рамка шириной 480 пикселов и высотой 800 пикселов, которая занимает весь экран телефона. После этого объект PhoneApplicationFrame ведет себя подобно Веб-браузеру и переходит к объекту MainPage (Главная страница).

MainPage – второй основной класс любого приложения на Silverlight, он описывается во второй паре файлов: MainPage.xaml и MainPage.xaml.cs. В небольших приложениях на Silverlight больше всего внимания разработчики уделяют именно этим двум файлам.

Если не брать во внимание длинный список директив using, файл MainPage.xaml.cs очень прост:

Проект Silverlight: SilverlightHelloPhone Файл: MainPage.xaml.cs (фрагмент)

using

System;

 

 

using

System.

Collections.Generic;

using

System.

Linq;

 

using

System.

Net;

 

using

System.

Windows;

 

using

System.

Windows.

Controls;

using

System.

Windows.

Documents;

using

System.

Windows.

Input;

using

System.

Windows.

Media;

using

System.

Windows.

Media.Animation;

using

System.

Windows.

Shapes;

using

Microsoft.Phone.Controls;

 

namespace SilverlightHelloPhone {

public partial class MainPage : PhoneApplicationPage

;

 

// Конструктор

 

public MainPage() {

}

}

{

InitializeComponent();

}

Директивы using для пространств имен, начинающихся со слов System.Windows, предназначены для классов Silverlight; иногда их необходимо дополнить еще некоторыми директивами using. Пространство имен Microsoft.Phone.Controls включает расширения Silverlight для телефона, в том числе и класс PhoneApplicationPage (Страница приложения для телефона).

Опять же, перед нами еще одно частичное (partial) описание класса. В данном случае описывается класс MainPage, производный от Silverlight-класса PhoneApplicationPage. Этот класс определяет визуальные элементы, которые пользователь видит на экране при выполнении программы SilverlightHelloPhone.

Вторая половина класса MainPage описывается в файле MainPage.xaml. Привожу практически полный файл, он был лишь немного переформатирован соответственно печатной странице. Также из него изъят раздел в конце, который закомментирован, но являет собой довольно устрашающий фрагмент разметки:

Проект Silverlight: SilverlightHelloPhone Файл: MainPage.xaml (практически полностью)

<phone:PhoneApplicationPage

x:Class="SilverlightHelloPhone.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2 0 0 6/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2 0 0 6/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2 0 0 8" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2 0 0 6" mc:Ignorable="d" d:DesignWidth="4 8 0" d:DesignHeight="7 68" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">

<!–LayoutRoot – это основной контейнер, в котором располагается все содержимое страницы–>

<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions>

<RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>

<!—TitlePanel

включает имя приложения и заголовок страницы–>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,2 8">

<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>

 

 

<!–ContentPanel – место для размещения

дополнительного содержимого–>

<Grid x:Name="ContentPanel" Grid.Row="1′

Margin="12,0,12,0">

</Grid>

 

</Grid>

 

</phone:PhoneApplicationPage>

 

Первые четыре описания пространств имен XML аналогичны приведенным в файле App.xaml. Как и в файле App.xaml, атрибут x:Class также находится в корневом элементе. Здесь он показывает, что класс MainPage в пространстве имен SilverlightHelloPhone наследуется от Silverlight-класса PhoneApplicationPage. Этот класс PhoneApplicationPage требует собственного описания пространства имен XML, поскольку не является частью стандартного Silverlight.

Описания пространств имен, ассоциированные с префиксами «d» («designer1») и «mc» («markup compatibility2»), предназначены для программ визуального редактирования XAML, таких как Expression Blend и дизайнер в самой Visual Studio. Атрибуты DesignerWidth (Ширина дизайнера) и DesignerHeight (Высота дизайнера) игнорируются во время компиляции.

При компиляции программы автоматически формируется файл MainPage.g.cs (его можно найти в подпапке \obj\Debug), содержащий еще одну часть описания класса MainPage. Она включает метод InitializeComponent, который вызывается из конструктора в файле MainPage.xaml.cs.

Теоретически, файлы App.g.cs и MainPage.g.cs формируются автоматически в процессе сборки исключительно в целях внутреннего использования компилятором, и разработчики могут абсолютно не обращать на них никакого внимания. Однако порой, когда изобилующая ошибками программа формирует исключение, на экране появляется один из этих файлов. Анализ этих файлов до того, как они загадочным образом появляются перед вашими глазами, может помочь в понимании проблемы. Тем не менее, не пытайтесь редактировать их, чтобы устранить проблему! Она, скорее всего, кроется в соответствующем файле XAML.

В корневом элементе MainPage.xaml можно найти настройки FontFamily (Семейство шрифтов), FontSize (Размер шрифта) и Foreground (Цвет шрифта), применяемые к странице в целом. Элемент StaticResource (Статический ресурс) и данный синтаксис будут рассмотрены в главе 7.

Тело файла MainPage.xaml включает несколько вложенных элементов Grid (Сетка), StackPanel (Стек-панель) и TextBlock (Блок текста).

Обратите внимание на то, что я использую слово элемент. В разработке на Silverlight оно имеет два значения. Это термин XML, используемый для обозначения элементов, ограниченных начальными и конечными тегами. Но также элементами в Silverlight называют визуальные объекты. И, кстати, слово элемент появляется в именах двух Silverlight-классов.

1    Дизайнер (прим. переводчика).

2     Совместимость разметки (прим. переводчика).

Многие используемые в Silverlight классы являются частью этой важной иерархии классов: Object

DependencyObject (абстрактный) UIElement (абстрактный)

FrameworkElement (абстрактный)

Не только UIElement (Элемент пользовательского интерфейса), а и многие другие классы Silverlight наследуются от DependencyObject (Объект с поддержкой зависимостей). Но UIElement отличается тем, что является классом, который может отображаться на экране как визуальный объект и принимать пользовательский ввод. (В Silverlight все визуальные объекты могут принимать пользовательский ввод.) Традиционно ввод осуществляется с клавиатуры и мыши. На телефоне он выполняется преимущественно посредством сенсорного ввода.

Единственный класс, наследуемый от UIElement – FrameworkElement (Элемент структуры). Разделение этих двух классов в Windows Presentation Foundation сложилось исторически. В WPF разработчики могут создавать собственные уникальные структуры, наследуясь от UIElement. В Silverlight это невозможно, поэтому данное разделение и имеет такое большое значение.

Одним из классов, наследуемых от FrameworkElement, является Control (Элемент управления) (в контексте разработки графических пользовательских интерфейсов этот термин употребляется чаще, чем элемент). Некоторые объекты, которые в других программных средах обычно называют элементами управления, в Silverlight более корректно именовать элементами. К производным от Control относятся кнопки и ползунки, которые обсуждаются в главе 10.

Еще один класс, наследуемый от FrameworkElement – Panel (Панель). Он является родительским классом элементов Grid и StackPanel, которые мы видели в файле MainPage.xaml. Панели – это элементы, в которых могут размещаться и компоноваться определенным образом множество дочерних элементов. Более подробно панели будут рассмотрены в главе 9.

Также от FrameworkElement наследуется класс TextBlock (Блок текста) – элемент, который чаще всего используется для отображения блоков текста размером до абзаца. Два элемента TextBlock в файле MainPage.xaml обеспечивают отображение двух фрагментов текста заголовка программы Silverlight.

PhoneApplicationPage, Grid, StackPanel и TextBlock – все это классы Silverlight. В разметке они становятся элементами XML. Свойства этих классов становятся атрибутами XML.

Вложенные элементы в MainPage.xaml, как говорится, формируют дерево визуальных элементов. В Silverlight-приложении для Windows Phone 7 дерево визуальных элементов всегда начинается с объекта типа PhoneApplicationFrame, который занимает всю поверхность отображения телефона. В программе на Silverlight для Windows Phone 7 всегда есть только один единственный экземпляр PhoneApplicationFrame, в просторечии называемый рамкой.

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

В нашем простом приложении всего одна страница, которая названа MainPage, соответственно. Эта MainPage включает Grid, в котором располагается StackPanel с парой элементов TextBlock, и еще один Grid. Все они образуют иерархическое дерево. Визуальное дерево, создаваемое Visual Studio для программы на Silverlight, выглядит следующим образом:

PhoneApplicationFrame

PhoneApplicationPage

Grid под названием «LayoutRoot»

StackPanel под названием «TitlePanel»

TextBlock под названием «ApplicationTitle» TextBlock под названием «PageTitle» Grid под названием «ContentPanel»

Нашей первоначальной целью было создать приложение на Silverlight, выводящее некоторый текст в центре экрана. Но поскольку у нас имеется пара заголовков, немного подкорректируем формулировку задачи: цель состоит в отображении в центре страницы текста, не являющегося ее заголовком. Область страницы для отображения содержимого представлена элементом Grid, описанным в конце файла после комментария «ContentPanel – место для размещения дополнительного содержимого». Этот Grid имеет имя «ContentPanel» (Панель для содержимого). Я так и буду его называть, панель или сетка для содержимого. Область экрана, соответствующую этому Grid, не включая заголовки, обычно именуют областью содержимого.

В ContentGrid можно вставить новый TextBlock:

Проект Silverlight: SilverlightHelloPhone Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="Hello, Windows Phone 7!"

HorizontalAlignment="Center" VerticalAlignment="Center" />

</Grid>

Text (Текст), HorizontalAlignment (Выравнивание по горизонтали) и VerticalAlignment (Выравнивание по вертикали) – все это свойства класса TextBlock. Свойство Text типа string (строка). Свойства HorizontalAlignment и VerticalAlignment типа перечисление HorizontalAlignment и VerticalAlignment, соответственно. Для ссылки на тип перечисления в XAML необходимо указать только имя члена.

При редактировании MainPage.xaml можно также немого подкорректировать элементы TextBlock, чтобы они не выглядели так стандартно. Меняем

<TextBlock … Text="MY APPLICATION" … />

на

<TextBlock … Text="SILVERLIGHT HELLO PHONE" … />

и

<TextBlock … Text="page title" … />

на:

<TextBlock . Text="main page" . />

В одностраничном приложении на Silverlight особого смысла в заголовке нет. Поэтому второй TextBlock можно удалить. Внесенные в данный XAML-файл изменения будут отражены в конструкторе. Теперь эту программу можно откомпилировать и запустить:

Размер данного снимка экрана и большинства снимков экрана в данной книге примерно соответствует реальному размеру телефона. Хромированная окантовка еще более усиливает ощущение того, что это реальный телефон или его эмулятор (surrounded by some simple "chrome" that symbolizes either the actual phone or the phone emulator).

Несмотря на всю свою простоту, данное приложение демонстрирует некоторые основополагающие принципы разработки на Silverlight, включая динамическую компоновку. Файл XAML определяет компоновку элементов в дереве визуальных элементов. Каждый элемент может самостоятельно динамически менять свое местоположение и размеры. В зависимости от значений свойств HorizontalAlignment и VerticalAlignment элемент может размещаться в центре другого элемента или (о чем несложно догадаться) вдоль одного из краев экрана, или в одном из углов. TextBlock – это лишь один из целого ряда элементов, доступных для использования в программе на Silverlight. К ним относятся растровые изображения, фильмы и такие привычные элементы управления, как кнопки, ползунки и списки.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии