Цель занятия: приобретение первичных навыков признакомстве с WPF в VS 2013 на C#

МИНОБРНАУКИ РОССИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

Анапский филиал «Московский государственный гуманитарный университет имени М.А. Шолохова»

Предмет: Устройство и функционирование информационной системы

Практическая работа №2. Знакомство с WPF.

Тема: Знакомство с WPF.

Цель занятия: приобретение первичных навыков признакомстве с WPF в VS 2013 на C#.

Максимальное время выполнения задания: 4 часа.

Выполняется в VS 2013 на языке C#

WPF, byadmin.

Пора немного познакомиться с WPF (WindowsPresentationFoundation), познакомиться с возможностями системы и попробовать написать простенькое приложение с использованием WPF.

Надо сказать, что первое знакомство с этой системой ввело меня в некоторый ступор. Всё-таки, что бы ни говорили, а многолетний стаж программирования в Delphi оставляет свой отпечаток – довольно тяжко свыкнуться с тем, что разработка интерфейса программы проводится отдельно от логики приложения и более того, для разработки интерфейса требуется знать ещё ОДИН язык, помимо основного. Но всё оказалось не так уж и страшно. И сегодня мы попробуем с Вами написать простенькое приложение с WPF.

Вначале, немного общих сведений о том, что такое WPF. Вот, что говорит нам MSDN:

WindowsPresentationFoundation (WPF) ― это система следующего поколения для построения клиентских приложений Windows с визуально привлекательными возможностями взаимодействия с пользователем. C WPF можно создавать широкий спектр как автономных приложений, так и приложений, размещенных в веб-обозревателе. В основе WPF лежит векторная система визуализации, не зависящая от разрешения и созданная с расчетом на возможности современного графического оборудования. WPF расширяет базовую систему полным набором функций разработки приложений, в том числе ExtensibleApplicationMarkupLanguage (XAML), элементами управления, привязкой данных, макетом, 2-D- и 3-D-графикой, анимацией, стилями, шаблонами, документами, мультимедиа, текстом и оформлением. WPF входит в состав Microsoft.NET Framework и позволяет создавать приложения, включающие другие элементы библиотеки классов.NET Framework. В WPF дополнительно совершенствуется процесс программирования для разработки клиентских приложений Windows.

Одним из очевидных усовершенствований является возможность разрабатывать приложения с помощью разметки и кода программной части.

Разметка ExtensibleApplicationMarkupLanguage (XAML) обычно используется для реализации внешнего вида приложения.

Для реализации поведения используется ОДИН из языков программирования (кода программной части).

То есть, говоря кратко, всё, что относится к внешнему виду (внешний вид кнопок, панелей, расположение их на форме и т.д.) реализуется с помощью разметки на XAML. Всё, что касается взаимодействия – обработка событий элементов управления, классы, РАБОТА с объектами и т.д. реализуется на одном из языком программирования, с которыми Вы знакомы, например, как в моем случае – на C#.

Такой подход к реализации приложения с одной стороны имеет большое количество положительных сторон, одной из которых можно назвать –независимость внешнего вида от языка программирования и, соответственно более гибкая схема разработки приложения. Например, дизайнер с помощью XAML создает внешний вид приложения и ему нет особого дела до того, что делаете Вы, занимаясь разработкой программной части – каждый занимается своим делом. Также, использование XAML упрощает перенос приложения на другой язык, поддерживающий.NET – не требуется полная переработка приложения, надо только сменить программную часть, а интерфейсная останется без изменения.

Но, с другой стороны, WPF осложняет работу программистов-одиночек. Скажем, если Вы решите написать приложение для себя, то Вам придется разбираться самостоятельно с XAML, а это в свою очередь, дополнительные затраты времени. Но это уже отдельная тема – стоит или не стоит использовать WPF в небольших приложениях, а мы пока перейдем к рассмотрению примеров.

Как всегда, начнем с простенького приложения типа “Hello, World”. Открываем VisualStudio, создаем новый проект “Приложение WPF”, назовем его “HelloWPF”:

Студия создаст нам новый проект. При этом внешний вид редактора будет другим, нежели при создании приложения “WindowsForms” – теперь в главном окне мы видим:

1. Макет

2. Редактор разметки XAML

Пустое приложение теперь состоит из файлов. содержащих разметку приложения (эти файлы имеют расширение *.xaml) и файлы программной части, в нашем случае эти файлы имеют расширение *.cs.

Наш пустой проект содержит 1 окно с заголовком MainWindow и в этом окне содержится Grid – сетка для размещения в ней других элементов управления.

Вначале, обратимся к редактору разметки. Сейчас наш файл разметки содержит совсем немного информации и разобраться будет по-проще. Например, давайте сменим заголовок окна. Для этого переходим в редактор и меняем значение атрибута Title у узла Window, например, на “HelloWPF”. Запустите приложение и увидите, что заголовок сменился:

Аналогичным образом, используя редактор разметки, можно менять и другие свойства окна, например, изменить длину и ширину окна, сменить СТИЛЬ и т.д. Можно было бы пойти и более простым путем – воспользоваться редактором свойств. Для этого просто кликаем по элементу и в редакторе изменяем все необходимые свойства. При этом разметка будет меняться автоматически.

Теперь посмотрим на реализацию программной части. Для примера, разместим в главном окне приложения кнопку, клик по которой создаст на форме текстовый блок, содержащий текст “HelloWorld!”.

Открываем панель элементов (ToolBox), выбираем элемент Button и помещаем его в главном окне приложения. При этом обратите внимание на разметку – в редакторе XAML жестко прописывается размер кнопки (атрибуты Width и Height) и положение (атрибут Margin).

Можете немного поэкспериментировать с этими свойствами и посмотреть на поведение кнопки в запущенном приложении, например, попробуйте СДЕЛАТЬ так, чтобы кнопка находилась по горизонтали всегда по центру или изменяла свои размеры в зависимости от размеров окна. Всё это можно задать, используя разметку.

Теперь отредактируем ОДИН из атрибутов узла узлаbutton – атрибут Name. Зададим ему значение “HelloButton”. Теперь при реализации программного кода мы всегда сможем обратиться к кнопке по её имени. Можно было бы, в качестве примера, и не менять имя элемента управления, но это плохая практика программирования – оставлять стандартные имена. Для порядка можете изменить и свойство Content, чтобы задать надпись кнопки.

Теперь, в редакторе XAML задайте имя для сетки (Grid), например, назовем её MasterGrid:

Для чего мы это сделали, посмотрим на примере обработчика события у кнопки.

Теперь создадим обработчик Click для нашей кнопки. Для этого достаточно дважды кликнуть по Button или создать обработчик, используя окно “Свойства”. В обработчике напишем следующий код:

privatevoid HelloButton_Click(object sender, RoutedEventArgs e) { TextBlocktb=newTextBlock(); //создалиновыйэлемент tb.Text=”Hello World!””; //задалитекст //задаем положение элемента в окне Thicknessmrgn=newThickness(0, 0, 0, 0); tb.Margin=mrgn; //добавляем элемент на сетку MasterGrid.Children.Add(tb); }

Теперь запустите приложение, кликните по кнопке и убедитесь, что в левом верхнем углу окна появится новая надпись. Как можно видеть в листинге, для создания надписи я сначала создал новый элемент TextBlock, задал ему положение и затем, используя имя сетки, заданное в редакторе XAML, разместил новую надпись на сетке, добавим TextBlock в коллекцию Children.

Вот простой пример того, как можно разрабатывать приложения с помощью WPF и размещать новые элементы управления в окне в runtime’е. Можно было бы поступить и по другому – заранее размесить на форме TextBlock и в обработчике просто обратиться к элементу по его имени – результат был бы тот же.

Ниже пример рисования эллипса, линий, прямоугольника. Нарисуйте что-нибудь, типа, дом.

<Window x:Class="WpfApplication3.MainWindow"

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

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

Title="MainWindow" Height="350" Width="525">

<Button Content="Button"HorizontalAlignment="Left"VerticalAlignment="Top" Width="75" Margin="127,142,0,0"

Name="HelloBeby" Click="HelloBeby_Click"/>

<ProgressBarHorizontalAlignment="Left" Height="92"VerticalAlignment="Top" Width="158" Margin="286,142,0,0"/>

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Line.RenderTransform>

</TransformGroup>

</Line.RenderTransform>

</Line>

</Grid>

</Window>

Содержание отчета

Отчет должен содержать следующие разделы:

- Номер практического занятия

- Тема занятия

- Цель занятия

- Ход работы, в котором описывается пошаговое выполнение работы с приложением необходимых скриншотов.

- Вывод.

Кроме того, отчет должен содержать титульник (см. приложение) и содержание, собранное автоматически! Последние 5 человек, сдавшие отчет, сдают отчет в печатном виде, остальные в электронном виде, в имени файла указав фамилию и номер практической и по какой дисциплине, напр. Иванов ИИ 2практ по УФИС.docx