Модификация приложения Silverlight : первые шаги и полноэкранный режим

⇐ ПредыдущаяСтр 66 из 92Следующая ⇒

Первым делом рассмотрим начальные возможности Silverlight. Как уже стало ясно, основу приложения в текущем проекте составит приложение WPF. О том, что такое WPF и как с ним работать было рассказано в предыдущих лабораторных работах практикума.

Основное отличие данного WPF и «чистого» WPF-приложения состоит в изменённом и расширенном коде файла App . xaml . cs для главного файла, а также наличие файла AppManifest . xml в папке Properties:

Двойным нажатием открываем Конструктор для главной редактируемой страницы проекта MainPage . xaml. Код XAML должен быть изначально таким:

<UserControl x:Class="LWP17Silverlight.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

</UserControl>

Ищем:

mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

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

Либо впишем:

mc:Ignorable="d" Height="300" Width="400">

Итак, поменяем эту строчку следующим кодом (изменим размеры для дизайна):

mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="640">

Теперь инициализируем событие нажатия любой клавиши в фокусе страницы. Для этого на панель Свойства и перейдём в вкладку События. Двойным нажатием по событию KeyDown инициализируем метод UserControl _ KeyDown (где UserControl — имя формы):

Код XAML:

mc:Ignorable="d" d:Designd:DesignHeight="480" KeyDown="UserControl_KeyDown">

Отредактируем сетку Grid. Для этого найдём в XAML-коде конструктора код:

Мышкой жмём на слово «Grid». На панели свойство ищем свойство Background (группа свойств Кисти):

Вписываем Azure либо выбираем понравившийся цвет. Далее редактируем свойство RowDefinitions, жмём «...»:

В окне Редактор коллекции: RowDefinition добавляем пять элементов RowDefinition, свойство Height первого и последнего ставим как «2*»:

Рис. 3. 1. Добавляем разделители на строки для элемента сетки

Также поступаем для столбцов. Открываем свойство для элемента Grid: ColumnDefinitons. Добавляем два новых ColumnDefinition в редакторе коллекции. Свойство Width второго вписываем как «2*». Итоговый элемент Grid должен выглядеть так:

Рис. 3. 2. Завершённый элемент Grid, разделённый на строки и столбцы

В первую клетку сетки (строка: 0, столбец: 0) вставляем в панели элементов простой TextBlock ( ):

Выделим XAML-код добавленного элемента и заменим его следующим кодом:

Нажмите кнопку "Полноэкранный режим" для перехода в полноэкранный режим.

Нажмите кнопку "Обычный режим" для перехода в режим окна браузера.

В обычном режиме опробуйте нажатие клавиш на клавиатуре в фокусе окна браузера.

Нажатая клавиша будет отображена на на странице.

В полноэкранном режим будут работать только следующие клавиши:

Стрелки клавиатуры, пробел, Tab, Page Up, Page down, Home, End и Enter.</TextBlock>

Данный помещает текст не внутрь свойства Text, а в границы открывающего и закрывающего тэгов < TextBlock ...>Текст</ TextBlock >. Размещённый текст располагается по центру в элементе. Сам элемент растягивается до границ ячейки сетки.

В ячейку ниже [1, 0] добавим кнопку (Button), и сразу же замени код кнопки следующим XAML-кодом:

Замену в этом случае можно не проводить. Свойства Grid . Row «1» и Grid . Column «0» определяются в момент размещения элемента внутри сетки. Остальные свойства кнопки: Width установлено в «150», а в свойствах VerticalAligment и HorizontalAligment выбирано Center. IsTabStop: галочка снята.

В ячейки [2, 0] и [3, 0] вставляем ещё два TextBlock со следующим XAML-кодом:

Двойным нажатием по единственной кнопке в конструкторе инициализируем событие Click. Код такой:

private void button1_Click(object sender, RoutedEventArgs e)

{

if (!App.Current.Host.Content.IsFullScreen)

button1.Content = "Оконный режим";

else button1.Content = "Полноэкранный режим";

// Переключение в полноэкранный или оконный режимы

App.Current.Host.Content.IsFullScreen = !App.Current.Host.Content.IsFullScreen;

}

Код события нажатия клавиши KeyDown меняем так:

private void UserControl_KeyDown(object sender, KeyEventArgs e)

{

// Перехватываем нажатие клавиши в textBlock3

this.textBlock3.Text = "Нажата кнопка: " + e.Key.ToString();

}

В коде файла MainPage.xaml.cs находим:

public MainPage()

{

InitializeComponent();

}

Изменяем на:

public MainPage()

{

InitializeComponent();

// Подключаем событие Loaded чтобы подключить события на этапе загрузки страницы

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

// Подписываемся на события из SilverlightHost и вызываем соответствующий метод при срабатывании

App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged); // Событие состояния страницы: окнонный/полноэкранный

App.Current.Host.Content.Resized += new EventHandler(Content_Resized); // Событие изменения размеров окна

}

void Content_Resized(object sender, EventArgs e)

{

// Когда изменяются размеры страницы, обновляем данные об этом

// вызывом функцию вывода размеров Silverlight плагина

RefreshTextBlockShowSize();

}

void Content_FullScreenChanged(object sender, EventArgs e)

{

// Когда изменяются состояния страницы (оконный/полноэкранный), обновляем данные об этом

// вызывом функцию вывода размеров Silverlight плагина

RefreshTextBlockShowSize();

}

private void RefreshTextBlockShowSize()

{

// Показывает размеры плагина Silverlight plug-in в textBlock2

this.textBlock2.Text = string.Format("Размер страницы: {0}*{1}",

App.Current.Host.Content.ActualWidth,

App.Current.Host.Content.ActualHeight);

}

Компилируем, проверяем работоспособность. Следуя инструкции, написанной на странице, выполняем различные действия, и наблюдает за результатом.

Рис. 3. 3. Результат работы приложения Silverlight: нажата клавиша «пробел»

Рис. 3. 4. Результат работы приложения Silverlight: включен полноэкранный режим страницы

Дата добавления: 2019-09-13; просмотров: 188; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 61 62 63 64 656667 68 69 70 Следующая ⇒

Мы поможем в написании ваших работ!