Использование технологии WPF

Глава 16. Использовании технологии WPF.

Что может нам дать WPF?

До сих пор мы обсуждали возможности программирования на С# либо настольных Windows-приложений (частный случай — консольные приложения), ко­торые пользователи запускают непосредственно (например, ехе-файлы), либо Web-(приложений. выполняющихся внутри браузера. Оба этих приложения имеют свои положительные качества и недостатки. Например, настольные (автономные) при­ложения обладают большей гибкостью и реактивностью, выражающейся, напри­мер, практически в отсутствии задержки при выполнении команд. Даже если вы решаете систему уравнений большой размерности на современном компьютере в Windows-приложении, вы практически не ощущаете "запаздывания" с получением решения системы. В Web-приложении любая отправка данных серверу порождает задержку с ответом. Так, обычный запрос имени учетной записи пользователя (логин) и пароля в процедуре аутентификации пользователя к удаленной базе данных из Web-приложения может затянуться на продолжительное время с учетом скорости пропуска сетевого трафика. С другой стороны, к Web-приложениям могут иметь доступ одновременно многие пользователи.

Однако последнее время мы наблюдаем "сближение" возможностей Windows и Web-приложений. Так, например, благодаря появлению Web-служб Windows-приложения (также как и Web-приложения) получили возможность обрабатывать нe только данные, которые имеются непосредственно на винчестере данного настольного компьютера, но и данные, предоставленные той или иной Web-службой. А помощь (справка — <F1>) в использовании того или иного Windows-приложения часто осуществляется посредством обращения к Интернету. Все большую гибкость Web-приложения получают вследствие применения технологий JavaScript (выпол­нение сценариев на стороне браузера, а не на стороне сервера, что обеспечивает уменьшение "задержек" в работе приложения), благодаря AJAX полное обновле­ние Web-страницы выполняется реже, Flash-технологии обеспечивают яркую и скоростную графику и т. д. Тем самым Web-приложения все больше становятся похожими на настольные приложения.

Технология Windows Presentation Foundation (WPF, графическая презентационная подсистема) задумана компанией Microsoft для того, чтобы еще более уменьшить этот разрыв. Приложение, написанное на основе WPF-технологии (WPF-приложение), способно функционировать как в виде автономного настольного Windows-приложения, так и в виде Web-приложения, выполняющегося в браузере. При этом разработчик WPF-приложения получает возможности мощного графического ядра и программного интерфейса для отрисовки различных графических элементов. Приведем маленький пример по поводу графических возможностей. При разработке Windows-приложений свойство Оpacity (уровень непрозрачности) имеет только вся экранная форма, между тем в WPF-приложении это свойство имеют практически все элементы управления. Создается впечатление, что Microsoft по графическим возможностям в WPF-технологии стремится создать альтернативу Аdobe Flash и Java-апплетам.

Еще одна очень важная особенность WPF-приложений — это возможность их работы в различных операционных средах. То есть разработанное вами на основе WPF-приложения автономное настольное приложение или приложение, выполняемое в браузере (так называемое XAML Browser Applications, ХВАР-приложение), будет работать как в операционной системе Windows, так и в операционных системах семейства UNIX/Linux, операционных системах Solaris и Mac OS X. В результате этого практическая польза для Web-разработчиков состоит в следующем. Мы с вами говорили о том, что Web-хостинг, т. е. услуга по размещению в сети Web-границ, существует в основном под уравлением операционных систем семейства UNIX/Linux. Хостингов на основе ASP.NET на Windows-платформе сравнительно немного. А это ограничивает написание Web-страниц на языках среды Visual Studio. Однако если мы будем писать Web-страницы на основе WPF-технологии, то проблема поиска необходимого хостинга отпадает, поскольку Web-страница, написанная на основе WPF-технологии, будет благополучно работать как на сервере под управлением UNIX/Linux, так и на Windows-сервере.

Пример 119. Создание простейшего WPF-приложения. Компоновка элементов управления с помощью сетки Grid

Поставим следующую задачу: требуется создать интерактивную Web-страницу, содержащую в себе текстовое поле, метку и кнопку. Данное приложение вычисляет значение квадратного корня из числа, введенного пользователем. После щелчка на кнопке приложение производит диагностику введенных символов, и если пользователь действительно ввел число, то на текстовую метку выводим результат извлечения корня. Это совсем маленькая задача, но на ее основе мы сможем рассмотреть все этапы создания WPF-приложения.

Итак, запустим Visual Studio 2010, закажем новый проект шаблона WРF Browser Application С# (из инсталлированных шаблонов Windows), назовем новый проект WpfXbapSqrt. После щелчка на кнопке ОК попадаем на вкладку Page1.xaml. В WPF-приложении, так же как и в ASPX-приложении, имеем файлы разметки, здесь они написаны на языке XAML. Язык XAML (Extensible Application Markup Language) — язык разметки для декларативного программирования WPF-приложений. Так же как и в ASP-технолонии кроме xaml-файлов разметки имеем соответствующие хaml.cs-файлы программной поддержки. На вкладке Page1.xaml размещают элемен­ты управления, которые перетаскивают из панели элементов Toolbox на проектируе­мую Web-страницу. То есть создание WPF-приложений практически не отличается от создания приложений на основе Windows Forms.

Однако, перед тем как размещать и компоновать необходимые элементы, от­кроем вкладку Page1xaml в режиме XAML (листинг 16.1). Обратите внимание на тег <Grid>, его назначение — определять сетку с рядами Row и столбцами Column для размещения в ячейках этой сетки (таблицы) элементов управления. Элемент управления Grid иногда называют контейнером макета страницы. Линии сетки (Grid-линии) делают невидимыми ShowGridLines = false, это позволяет компоно­вать элементы управления в нужном порядке.

Листинг 16.1. Проектируемая Web-страница на языке XAML

<Раgе х:Class="WpfXbapSqrt.Page1"

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

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

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

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

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300"

Title="Pagel">

<Grid>

</Grid>

</Page>

Мы намереваемся управлять этой сеткой из соответствующего файла программной разметки и обращаться к обсуждаемой сетке, как к программному объекту. Однако на данный момент у этой сетки нет имени, поэтому в файле разметки для тега <Grid> зададим имя сетки таким образом: <Grid Name="grid1">. Мы будем использовать это имя позже, а сейчас перенесем на форму из панели элементов Тoolbox (эту панель можно вызвать, как обычно, комбинацией клавиш <Ctrl>+ Alt>+<X>) необходимые нам текстовое поле TextBox, метку Label и командную кнопку Button. Можно было бы, просто последовательно дважды щелкая по упомянутым элементам в панели Toolbox, добавлять их на Web-страницу, в этом случае они расположились бы один под другим, как это нам необходимо. Однако хотелось бы иметь гибкую методику размещения элементов управления в любом месте Web-страницы. Эля этого как раз мы и упоминали сетку Grid. Вообще говоря для целей размещения элементов на Web-странице имеем ряд компонентов, входящих в состав WPF:

                    Canvas — дочерние компоненты могут сами управлять своим расположением

                    DockPanel — дочерние компоненты выравниваются по краям панели;

                    Grid — дочерние компоненты располагаются в рядах и колонках;

                    StackPanel — дочерние компоненты располагаются в одну строку вертикально или горизонтально;

                    VirtualizingStackPanel — дочерние компоненты выравниваются по одной ли­нии — горизонтальной или вертикальной;

                    WrapPanel — дочерние компоненты располагаются слева направо и "заворачи­ваются" на следующую строку, когда заканчивается место на текущей строке.

Прежде чем перейти на вкладку программного кода, зададим, что сетка, в ячей-сах которой мы собираемся размещать эти три элемента управления, имеет одну солонку и три ряда. Для этого через контексное меню дизайнера Web-страницы попадаем на вкладку Properties (Свойства). И для сетки grid1 находим свойство СolumnDef initions. Щелкая на многоточии, добавляем (Add) одну колонку. Аналогично в строке свойства RowDefinitions добавляем три ряда. Вообще говоря, можно было задать колонку и три ряда в программном коде, но сделать это в свойтвах сетки Grid совсем просто.

Теперь переходим на вкладку программного кода Pagel.xaml.cs и вводим текст программы, представленный в листинге 16.2.

Листинг 16.2. Содержание файла программной поддержки простейшего WPF-приложения

// Данное WPF-приложение вычисляет значение квадратного корня из числа, введенного пользователем в текстовое

// поле. После щелчка на кнопке приложение производит диагностику введенных символов, и если пользователь

// действительно ввел число, то в текстовую метку выводим результат извлечения корня

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

// Другие директивы using удалены, поскольку они не используются в данной программе

namespace WpfXbapSqrt

{

/// <summary>

/// Interaction logic for Page1.xaml

/// </surnmary>

public partial class Page1:Page

{

public Page1()

{

InitializeComponent();

// Строка заголовка Web-страницы:

this.WindowTitle = "Извлекаю корень";

// Компонуем элементы управления с помощью сетки Grid:

grid1.Width = 200; grid1.Height = 100;

// Сетку grid1 размещаем в левом верхнем углу Web-страницы:

grid1.НогizontalAlignment = System.Windows.HorizontalAlignment.Left;

grid1.VerticalAlignment = System.Windows.VerticalAlignment.Top;

// Удобно для отладки показать линии сетки:

// grid1.ShowGridLines = true;

// Расстояния от краев Web-страницы до сетки grid1:

grid1.Margin = new Thickness(10, 10,  10,  10);

// Цвет объекта grid1:

grid1.Background = Brushes.LightGray;

// Указываем, что текстовое поле расположить в нулевой колонке в нулевом ряду:

Grid.SetRow(textBox1,  0); Grid.SetColumn(textBox1,  0);

Grid.SetRow(label1,1);     Grid.SetColumn(label1, 0);

Grid.SetRow(button1,- 2);    Grid.SetColumn(button1,  0);

// Текстовое поле располагаем в левом нижнем углу ячейки, сдвинув его на 10 пикселов:

textBox1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;

textBox1.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;

textBox1.Margin = new Thickness(10, 0,  0, 0); textBox1.Focus();

label1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;

label1.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;

label1.Margin = new Thickness(10,  0, 0,  0);

button1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;

button1.VerticalAlignment = System.Windows.VerticalAlignment.Top;

button1.Margin = new Thickness(10, 0,  0,  0);

button1. Content = "Извлечь корень"; button1 .Width = 120;

label1.Content = "Введите число в текстовое поле";

label1.Foreground = Brushes.Blue; // - синий цвет текста на метке

}

private void button1_Click(object sender, RoutedEventArgs e)

{

Single X; // - из этого числа будем извлекать корень

// Преобразование из строковой переменной в Single:

bool Число_ли = Single.TryParse(textBoxl.Text, System.Globalization.NumberStyles.Number,

System.Globalization.NumberFormatlnfo.Currentlnfо, out X);

// Второй параметр - это разрешенный стиль числа (Integer, шестнадцатиричное число, экспоненциальный

// вид числа и прочее). Третий параметр форматирует значения на основе текущего языка и региональных //параметров из Панели управления | Язык и региональные стандарты число допустимого формата.

// Метод возвращает значение в переменную X.

if  (Число_ли == false)

{    // Если пользователь ввел не число:

Label1.Content = "Следует вводить числа";

Label1.Foreground = Brushes.Red; // - красный цвет текста на метке
return;              // - выход из процедуры

}

Single Y =  (Single)Math.Sqrt(X);        // - извлечение корня

label1.Foreground = Brushes.Blue;      // - синий цвет текста на метке

label1.Content = string.Format("Корень из {0} равен {1:F5}", X, Y);

}

}

}

Как видно из программного кода, задачу компоновки элементов управления в ячейках сетки grid1 решаем сразу после выполнения процедуры InitializeComponent. При обработке события "щелчок на кнопке" button1 прове­ряем, число ли ввел пользователь в текстовое поле, и выводим результат извлече­ния корня в метку label1.

Фрагмент работы данного WPF-приложения представлен на рис. 16.1.

Рис. 16.1. Результат диагностики вводимых данных

Теперь очень интересно проверить, как это WPF-приложение будет работать при размещении его на каком-нибудь хостинге, работающем под управлением ОС UNIX (таких хостингов подавляющее большинство, а хостингов из-под Windows значительно меньше). Мы не случайно в самом начале назвали данный проект WpfXbarSqrt, использовав при этом только английские буквы, поскольку имена файлов в ОС UNIX не должны содержать кириллицы. Файлы, которые следует раз­мещать на хостинге, расположены в папке bin\Debug, этих файлов — четыре, они имеют следующие типы: exe, pdb, xbap и manifest. Это исполняемый файл, он содержит скомпилированный код, манифест приложения содержит метаданные, связанные с приложением, и непосредственно xbap-файл, который открывает браузер. В качестве браузера следует использовать Internet Explorer или Mozilla Firefox с соответствующими плагинами. Убедиться в работоспособности программы можно, открыв решение в папке WpfXbarSqrt.

Пример 120. Использование одного из эффектов анимации

Как уже упоминалось, Microsoft стремится по графическим возможностям в WPF-технологии приблизиться к возможностям Adobe Flash. Покажем на следую­щем примере возможность анимации (т. е. способности двигаться) кнопки и изо­бражения при щелчке мышью на них. При щелчке на кнопке она резко расширится, а затем плавно вернется в исходное состояние. Аналогично при щелчке на изображении его размер увеличится с последующим плавным уменьшением до первона­чального. Здесь использована наиболее распространенная техника анимации — это анимация интерполяцией, при которой свойство модифицируется плавно от на­чальной точки до конечной.

Для демонстрации этой возможности запустим Visual Studio 2010, выберем сре­ди инсталлированных шаблонов Windows шаблон WPF Browser Application и назовем его WpfXbapAнимe. Чтобы на вкладке Page1.xaml появились кнопка и изображение, на панели элементов Toolbox дважды щелкнем по элементам управ­ления Button и Image.

Скопируем в папку проекта изображение poryv.png, а затем добавим это изо­бражение в проект командой Project | Add Existing Item. Теперь перейдем на вкладку программного кода Page1.xaml.cs и введем текст программы, представленный в листинге 16.3.

Листинг 16.3. WPF-приложение демонстрирует одну из возможностей анимации

// WPF-приложение выводит на Web-страницу командную кнопку и изображение. При щелчке на кнопке и на