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

Первым делом рассмотрим начальные возможности 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">

<Grid x:Name="LayoutRoot" Background="White"></Grid>

</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:DesignWidth="640" d:DesignHeight="480" KeyDown="UserControl_KeyDown">

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

<Grid x:Name="LayoutRoot" Background="White">

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

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

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

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

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

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

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

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

<TextBlock HorizontalAlignment="Stretch" Name="textBlock1" VerticalAlignment="Stretch" TextAlignment="Center">

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

<LineBreak/>

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

<LineBreak/>

<LineBreak/>

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

<LineBreak/>

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

<LineBreak/>

<LineBreak/>

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

<LineBreak/>

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

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

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

<Button Content="Полноэкранный режим" Grid.Row="1" Grid.Column="0" x:Name="button1" Height="23" VerticalAlignment="Center" HorizontalAlignment="Center" Width="150" Click="button1_Click" IsTabStop="False" />

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

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

<TextBlock x:Name="textBlock2" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center" FontSize="26" />

<TextBlock x:Name="textBlock3" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center" FontSize="36" />

Двойным нажатием по единственной кнопке в конструкторе инициализируем событие 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: включен полноэкранный режим страницы