Элемент Grid упорядочивает свои дочерние элементы управления на странице на основе ширины каждого столбца, как указано в коллекции ColumnDefinitions. Обратите внимание, что ширина первого столбца указывается как *. Это позволяет столбцу растягиваться и заполнять неиспользуемое пространство в строке после размещения всех остальных столбцов. Ширина второго столбца указывается как Auto, что позволяет изменять размер столбца в соответствии с размером его содержимого.
Чтобы завершить конструирование страницы, добавьте третью строку, которая будет содержать баннер с сообщением, вводимым пользователем. Для создания этой строки вставьте следующую разметку XAML сразу перед конечным тегом внешней сетки.
<Grid x: Name=«LayoutRoot» Background=«Transparent»>
<Grid Grid.Row=«2»>
<TextBlock Name=«BannerTextBlock»
Style=» {StaticResource PhoneTextExtraLargeStyle}»
Foreground=«#FFFF9A00»
HorizontalAlignment=«Stretch»
TextWrapping=«Wrap»
TextAlignment=«Center»
FontWeight=«Bold» />
</Grid>
</Grid>
Щелкните вкладку 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 и выберите команду AddNew 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»