Цель занятия: приобретение первичных навыков признакомстве с 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 или создать обработчик, используя окно “Свойства”. В обработчике напишем следующий код:

Теперь запустите приложение, кликните по кнопке и убедитесь, что в левом верхнем углу окна появится новая надпись. Как можно видеть в листинге, для создания надписи я сначала создал новый элемент 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">

<Grid Name="MasterGrid" >

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

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

<Ellipse Fill="#FFF4F4F5"HorizontalAlignment="Left" Height="100" Margin="286,100,0,0" Stroke="Black"VerticalAlignment="Top" Width="140"/>

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

<Rectangle Fill="#FFF4F4F5"HorizontalAlignment="Left" Height="70" Margin="38,10,0,0" Stroke="Black"VerticalAlignment="Top" Width="119"RenderTransformOrigin="0.5,0.5">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform Angle="7.239"/>

<TranslateTransform/>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Line X1="10" Y1="10" X2="50" Y2="50" Stroke="Black"StrokeThickness="4" Margin="178,-97,-121,150"RenderTransformOrigin="0.5,0.5" >

<Line.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform Angle="-33.135"/>

<TranslateTransform/>

</TransformGroup>

</Line.RenderTransform>

</Line>

</Grid>

</Window>

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

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

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

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

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

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

- Вывод.

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