Style=» {StaticResource PhoneTextExtraLargeStyle}»
Foreground=«#FFFF9A00»
HorizontalAlignment=«Stretch»
TextWrapping=«Wrap»
TextAlignment=«Center»
FontWeight=«Bold» />
…
Щелкните вкладку Design с правого края окна, чтобы перейти в режим конструирования.
2.11.6 Обработка событий
Теперь необходимо определить обработчики событий, которые отвечают на действия из интерфейса пользователя, в частности событие нажатия кнопки. Включите в конструкторе режим Design. Для этого дважды щелкните вкладку Design с правого края окна конструктора. Щелкните кнопку Click Me на поверхности конструктора, чтобы выбрать ее, а затем нажмите клавишу F4, чтобы открыть окно свойств этой кнопки. На панели Properties щелкните вкладку Events , чтобы отобразить окно со списком доступных событий. Найдите в этом списке событие Click и введите ClickMeButton_Click в текстовом поле рядом с этим событием. Нажмите клавишу Enter, чтобы создать обработчик событий с этим именем, и откройте файл с выделенным кодом для отображения заглушки метода, созданной Visual Studio (рис.).
Рисунок 2.12 Задание обработчика события Click
Существует альтернативный механизм создания обработчика событий. В Visual Studio можно дважды щелкнуть элемент управления в конструкторе, чтобы создать обработчик для его события по умолчанию: для элементов управления в виде кнопок это событие Click.
Реализация метода (который пока является пустым) находится в файле MainPage. xaml. cs. Вставьте следующий код в тело метода ClickMeButton_Click.
private void ClickMeButton_Click (object sender, RoutedEventArgs e)
{
BannerTextBlock. Text = MessageTextBox. Text;
MessageTextBox. Text = String. Empty;
}
Этот код считывает текст, введенный пользователем в текстовом поле, а затем создает баннер с этим текстом.
2.11.7 Проверка
Проверим, работает ли приложение ожидаемым образом. Кроме того, мы зададим точку останова и с помощью отладчика пройдем по исходному коду, анализируя значения переменных, чтобы составить краткое представление о том, как с помощью Visual Studio выполнять отладку приложений, запущенных в эмуляторе.
При необходимости повторно откройте файл с выделенным кодом для страницы MainPage. xaml. Для этого щелкните данный файл правой кнопкой мыши в обозревателе решений и выберите команду View Code.
Теперь определите точку останова для прекращения выполнения в обработчике событий для кнопки Click Me . Для задания точки останова найдите первую строку метода ClickMeButton_Click исходного файла и щелкните в области серого поля, расположенного на левой стороне окна редактора рядом с этой строкой. Красный кружок указывает положение вставленной точки останова (рис.). Либо щелкните строку в окне редактора, чтобы выбрать ее, а затем нажмите клавишу F9.
Рисунок 2.13 Установка точки останова
Чтобы включить или выключить точку останова, щелкните в области поля или щелкните строку, содержащую точку останова, и нажмите клавишу F9.
Для создания и развертывания приложения в эмуляторе Windows Phone нажмите клавишу F5 и начните сеанс отладки. Подождите, пока приложение запустится и появится его главная страница.
В окне эмулятора щелкните текстовое поле, чтобы активировать его. После этого появится экранная панель ввода (SIP). Введя тот или иной текст в текстовое поле, нажмите кнопку рядом с ним. Введенный текст должен отобразиться в верхней части программы.
Вернитесь в Visual Studio. Обратите внимание, что выполнение прекращается в заданной ранее точке останова и следующий выполняемый оператор выделяется желтым (рис.).
Рисунок 2.14 Срабатывание точки останова
Изучите текущее содержимое текстового поля в отладчике. Для этого в окне исходного кода наведите указатель мыши на свойство MessageTextBox. Text . Появится окно подсказки (совета) с текущим значением свойства, которое должно совпадать с текстом, введенным в окно эмулятора. Убедитесь, что указатель находится над частью Text. Иначе в подсказке будут отображаться сведения об объекте MessageTextBox (рис.).
alt=«Проверка значений переменных в отладчике»>
Нажмите клавишу F10, чтобы в пошаговом режиме выполнить текущую команду и отобразить в баннере текст, соответствующий содержимому текстового поля. Отобразите подсказку для свойства BannerTextBlock. Text , чтобы убедиться, что его значение соответствует значению текстового поля (рис.).
Рисунок 2.15 Проверка текущих значений переменной
При нажатии клавиши F10 отладчик выполняет текущую команду. А клавиша F11 обеспечивает пошаговое выполнение с заходом в вызываемые методы и функции. В этом случае, если команда включает вызов метода, отладчик выполняет заход в соответствующий метод для его отладки.
Нажмите клавишу F10 еще раз, чтобы выполнить следующий оператор и очистить содержимое текстового поля. Вновь отобразите совет для свойства MessageTextBox. Text , которое по-прежнему доступно, и убедитесь, что теперь оно пустое. Нажмите клавишу F5, чтобы возобновить выполнение приложения. Вернитесь в эмулятор Windows Phone.
Нажмите в эмуляторе кнопку Back , чтобы перейти на предыдущую страницу. Обратите внимание, что при этом сеанс отладки завершается и в отладчике отображается главное меню: вы уходите с первой (и единственной) страницы приложения (закрываем ее), а других активных приложений нет.
Чтобы возобновить отладку после окончания текущего сеанса, нажмите клавишу F5 для повторного запуска приложения и присоединения отладчика. Однако обратите внимание, что при этом приложение запустится заново, а предыдущее состояние будет недоступно.
При закрытии эмулятора приложение останавливается, а отладчик отсоединяется. При отсоединении отладчик Visual Studio отображает сообщение о разрыве подключения к устройству.
2.11. 8 Видео
Вы также можете посмотреть видео о том, как создать первое приложение Windows Phone 7 – [2].
2.12 Создаем страницы с навигацией
Теперь мы узнаем, как можно сделать навигацию между страницами. В предыдущем примере приложение состояло всего лишь одной страницы. Иногда этого недостаточно. В Silverlight навигация между страницами осуществляется очень просто. В этом вы сейчас сами убедитесь. Заодно вы увидите, как работает кнопка Back (Назад) в подобных приложениях. С ее помощью можно возвращаться на предыдущие страницы (напоминает поведение браузеров при посещении веб-страниц).
2.12.1 Создание приложения с навигацией
Запустите Visual Studio и создайте новый проект PageNavigation (смотрите День первый). Далее необходимо добавить еще несколько новых страниц. Щелкните правой кнопкой мыши на имени проекта в Solution Explorer и выберите команду Add→New Item… и в диалоговом окне выберите элемент Windows Phone Portrait Page (портретная ориентация).
Рисунок 2.16 Выбор нового проекта
Сейчас мы пока не будем обсуждать вопросы, связанные с ориентацией экрана. Создайте три новых страницы Page1.xaml, Page2.xaml, Page3.xaml. Так как они выглядят совершенно одинаково, нам будет трудно ориентироваться среди них. Предлагаю сделать следующее. Откройте каждую созданную страницу и измените текст в них. Я, например, в место слов PAGE NAME использовал имена котов: Рыжик, Барсик, Васька. Теперь мы не запутаемся.
2.12.2 Создание гиперссылок на другие страницы
Навигацию между страницами будем делать при помощи гиперссылок. Найдите на панели инструментов элемент HyperlinkButton и добавьте трижды данный элемент на панель эмулятора. После добавления измените код XAML следующим образом:
<HyperlinkButton Content=«Рыжик» NavigateUri="/page1.xaml»
Name=«hiperlinkbutton1» Height=«30» Width=«200»
HorizontalAlignment=«Left» VerticalAlignment=«Top»
Margin=«0,6,0,0» />
<HyperlinkButton Content=«Барсик» NavigateUri="/page2.xaml»
Name=«hiperlinkbutton2» Height=«30» Width=«200»
HorizontalAlignment=«Left» VerticalAlignment=«Top»
Margin=«0,6,0,0» />
<HyperlinkButton Content=«Васька» NavigateUri="/page3.xaml»
Name=«hiperlinkbutton3» Height=«30» Width=«200»
HorizontalAlignment=«Left» VerticalAlignment=«Top»
Margin=«0,6,0,0» />
Мы поменяли у гиперссылок текст, а также установили размеры и расположение на странице. При желании этого же результата можно добиться, изменяя соответствующие свойства в окне свойств. И самое главное – мы указали в атрибуте NavigateUri нужные имена страниц.
Удивительно, мы не написали еще ни одной строчки кода на C#, но тем не менее, приложение уже работает. Убедитесь сами. Запустите приложение и попробуйте нажимать на ссылки. Вы будете переходить на первую, вторую или третью страницу в зависимости от выбранной ссылки. Обратите внимание, что для возврата на основную страницу вы можете использовать аппаратную кнопку Back. При этом, если вы находитесь на главной странице и нажмете на кнопку Back, то тем самым вы закроете приложение.
2.12.3 Навигация через код
Мы осуществили навигацию при помощи XAML-кода. Такого же результата можно добиться и через код на C#. Для этого добавим в проект три новых элемента Button (кнопка). Чтобы не писать одинаковый код для каждой кнопки, создадим общий обработчик событий для них. Для этого нам нужно знать имена кнопок.
[XAML]
Name=«button1» VerticalAlignment=«Top» Width=«160»
Click=«Button_Click» />
Name=«button2» VerticalAlignment=«Top» Width=«160»
Click=«Button_Click» />
Name=«button3» VerticalAlignment=«Top» Width=«160»
Click=«Button_Click» />
[C#]
private void Button_Click (object sender, RoutedEventArgs e)
{
Button clickedbutton = sender as Button;
switch (clickedbutton.Name)
{
case «button1»: NavigationService.Navigate (new Uri (»/page1.xaml», UriKind.Relative));
break;
case «button2»:
NavigationService.Navigate (new Uri (»/page2.xaml», UriKind.Relative));
break;
case «button3»:
NavigationService.Navigate (new Uri (»/page3.xaml», UriKind.Relative));
break;
}
}
Снова запустите проект и убедитесь, что навигация при помощи кнопок работает так же, как и в примере с гиперссылками.
Рисунок 2.17 Вид программы в окне эмулятора
Для перехода назад вы можете использовать метод NavigationService. GoBack , который возвращает к экземпляру предыдущей страницы. Конечно, это дублирует функциональность кнопки «Назад», так что вы, скорее всего, будете вызывать этот метод как часть какой-либо другой функциональности.
private void button1_Click (object sender, RoutedEventArgs e)
{
NavigationService. GoBack ();
}
2.12.4 Передача параметров
Иногда требуется не просто перейти на другую страницу, но и передать ей некоторые данные с предыдущей страницы. Добавьте на первую страницу текстовое поле и кнопку под именем passParam .
Добавьте код для обработчика щелчка кнопки
private void passParam_Click (object sender, RoutedEventArgs e)
{
NavigationService.Navigate (new Uri (»/SecondPage. xaml? msg=" + textBox1.Text, UriKind.Relative));
}
Вы видите, что при навигации на вторую страницу мы передаем строковые данные, которые берутся из текстового поля. Чтобы получить передаваемые данные, добавьте на второй странице текстовый блок (TextBlock) под именем textBlock1. В файле SecondPage. xaml. cs создайте следующий метод:
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base. OnNavigatedTo (e);
string msg = «»;
if (NavigationContext.QueryString.TryGetValue («msg», out msg)) textBlock1.Text = msg;
}
Запустите приложение, введите текст на первой странице и убедитесь, что он отображается на второй странице.
2.12.5 Аппаратная кнопка Back
Одним из требований к устройствам под управлением Windows Phone 7 является наличие аппаратной кнопки Back (Назад). По умолчанию кнопка Back работает как в обычном браузере. Она автоматически запоминает посещаемые страницы приложения, а также закрывает само приложение, если приложение состоит из одной страницы или пользователь вернулся к основной странице из других страниц и больше некуда возвращаться.
Переопределяем работу кнопки Back
Если вас не устраивает логика работы кнопки Back по умолчанию, то вы можете переопределить ее работу в нужном вам направлении. Делается это очень просто.
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
// Ваш код здесь
e.Cancel = true; //Cancels the default behavior.
}
Давайте попробуем посмотреть работу переопределенной кнопки на примере. Возьмем предыдущий проект с навигацией по страницам PageNavigation и откроем редактор кода для страницы Page3.xaml. cs . Напишем следующий код:
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
// Ваш код здесь
NavigationService.Navigate (new Uri (»/page1.xaml», UriKind.Relative));
e.Cancel = true; //Cancels the default behavior.
}
Запустим проект, нажмем на кнопку или ссылку Васька . Далее нажимаем аппаратную кнопку Back и убеждаемся, что теперь мы возвращаемся не на основную страницу MainPage. xaml, а на страницу Page1.xaml.
Как видите, код работает – мы переопределили работу аппаратной кнопки под свои нужды. Но не спешите радоваться. С переопределением кнопки Back нужно быть очень осторожным. Если вы еще не закрыли пример и находитесь на странице Page1.xaml (страница Рыжика), то нажмите на Back еще раз. Как и ожидалось, вы вернетесь обратно на Page3.xaml, с которого вы пришли. Нажимаем кнопку Back и замечаем, что снова попадаем на страницу Рыжика. Получился замкнутый круг – мы больше не можем никуда попасть и попеременно оказываемся на страницах Page1.xaml и Page3.xaml.
Поэтому тщательно тестируйте свою программу, если решили изменить поведение кнопки Back. Иначе, вы рискуете попасть в неприятную ситуацию.
Кнопка Back для XNA-приложений
Описанный нами пример в основном применяется для Silverlight-приложений. Мы еще не знакомы с разработкой приложений на основе XNA, но, забегая вперед, скажу, что в XNA-программах есть класс GamePad , имеющим cвойство Buttons.Back. Поэтому вам придется встречаться с такой конструкцией:
// выйти, если нажата кнопка Back
if(GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
2.13 Ориентация дисплея
Пора поговорить о вашей ориентации. Если вы, разговаривая по телефону, держите его правой рукой, то вы… обычный пользователь, который держит телефон в портретной ориентации (вертикально). Если вы смотрите на устройстве фотографии, то удобнее его развернуть горизонтально – это уже альбомная ориентация. О том, как в программах для Windows Phone 7 управлять обеими ориентациями, и будет посвящена сегодняшняя статья.
2.13.1 Ориентация
Вам необходимо запомнить, что существуют два положения экрана. Вертикальное расположение называется портретным (Portrait), а горизонтальное – альбомным (Landscape). По умолчанию, приложения на Silverlight запускаются в портретном режиме, а XNA-приложения запускаются в альбомном, так как игры лучше смотрятся именно в этом режиме (посмотрите на ваш монитор). Но вы можете управлять режимами исходя из ваших задач. Жесткой привязки к ориентации нет. Более того, часто необходимо поддерживать два режима одновременно.
2.13.2 Рекомендация по проектированию интерфейса
Если приложение поддерживает ввод текста, вы должны поддерживать альбомную ориентацию из-за возможности существования аппаратной клавиатуры.
Существуют различные способы гарантировать правильное отображение содержимого как в портретной, так и в альбомной ориентации. Два основных метода – это прокрутка (scrolling) и сетка (grid layout). Эти методы могут использоваться отдельно или в сочетании друг с другом.
Scrolling использует элемент управления StackPanel, который находится в элементе управления ScrollViewer. Используйте этот метод, если содержимое отображается в виде списка или если различные элементы управления следуют один за другим на странице. StackPanel позволяет установить порядок расположения дочерних элементов одного за другим, а элемент управления ScrollViewer позволяет прокручивать содержимое StackPanel, если элементы пользовательского интерфейса не помещаются на экране.
2.13.3 Управление ориентацией экрана в Silverlight
Если вы откроете предыдущие примеры на Silverlight и повернете устройство набок, то обнаружите, что изображение на экране не изменило свое расположение при смене ориентации. Это легко исправить. Посмотрите код в файле MainPage. xaml и найдите строчку:
SupportedOrientations=«Portrait» Orientation=«Portrait»
Данный код говорит о том, что проект поддерживает только портретный режим и в этом же режиме и запускается. Свойство SupportedOrientations поддерживает следующие режимы (рис.):
Рисунок 2.18 Набор свойств ориентации экрана
– Portrait (по умолчанию)
– Landscape
– PortraitOrLandscape
Достаточно заменить указанную выше строчку на SupportedOrientations=«PortraitOrLandscape» , и ваше приложение будет реагировать на смену режима автоматически.
Вероятно, вы уже догадались, что свойство Orientation отвечает за начальный режим во время запуска приложения. Только вы не должны забывать о поддержке выбранного режима. Иными словами, если вы хотите, чтобы приложение запускалось в альбомном режиме, то у свойства SupportedOrientation должно быть значение Landscape или PortraitOrLandscape . Возможно, вас удивит, что свойство поддерживает целых шесть различных значений.
– Landscape
– LandscapeLeft
– LandscapeRight
– Portrait
– PortraitDown
– PortraitUp
Используя эти значения, вы можете даже задать портретный режим вверх тормашками (PortraitUp). PortraitDown – это обычный портретный режим, а Portrait – общее свойство для двух портретных режимов, когда уточнение не требуется. Аналогично справедливо и для альбомных режимов.
2.13.4 События изменения ориентации
Итак, вы можете настроить ориентацию экрана еще во время разработчки дизайна приложения через свойство SupportedOrientation. В этом случае система сама позаботится о нужном режиме. Тут нужно проявить аккуратность. Как правило, разработчик не препятствует пользователю вращать устройством во время работы с приложением. Но здесь может возникнуть одна небольшая неприятность. Взгляните на рисунки ниже. Предположим, вы написали программу-калькулятор, который красиво смотрится в портретном режиме. Вы ввели поддержку альбомного режима, и пользователь развернул телефон горизонтально. Как видите, нижняя часть интерфейса программы стала невидимой, уйдя за пределы экрана (рис.).
