3) Создание обработчиков событий

4. Нажмите клавишу F5 для выполнения проекта.

5. В открывшемся приложении нарисуйте рисунок в элементе управления InkCanvas. Если допущена ошибка, можно нажать кнопку «Очистить», чтобы начать заново.

6. Нажмите кнопку «Закрыть», чтобы закрыть приложение.

Задание к лабораторной работе

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

Варианты индивидуальных заданий

1. поменяйте расположение кнопок и поля ввода местами

2. добавьте кнопки для сохранения и загрузки

3. добавьте текстовое поле с возможностью его редактирования

4. добавьте главное меню с пунктами «Файл» (Открыть, Сохранить, Выход) и «Правка» (Копировать, Вырезать, Вставить)

5. добавьте произвольное фоновое изображение к главному окну приложения

Контрольные вопросы

1. Что такое WPF?

2. В чем принципиальное отличие WPF от WindowsForms?

3. Что такое XAML?

4. Как в VisualC# создать новый проект приложения WPF?

5. Какие свойства объектов отвечают за ширину и высоту?

Лабораторная работа 2 Подробное введение в разработку приложений wpf

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

План лабораторного занятия:

1. Ознакомление с управлением проектами WPF в MSVisualStudio

2. Установка элементов управления

3. Установка параметров элементов управления

4. Создание тестового приложения WPF

Теоретические сведения

1. Ознакомление с управлением проектами wpf в msVisualStudio

Чтобы создать проект для первого приложения WPF необходимо выполнить следующую последовательность действий:

1. Запустить VisualStudio 2010.

2. В меню File («Файл») выбрать команду New («Создать»), а затем команду New - Project («Проект») (рис. 2.1).

Рис.2.1. Выбор меню создания проекта

3. После выполнения выше перечисленных действий откроется диалоговое окно NewProject («Создание проекта»)(рис. 2.2).

Рис. 2.2. - Диалоговое окно создания проекта

Примечание. В поле со списком TargetFrameworkVersion («Целевая версия платформы») по умолчанию выбрано последнее использованное значение. При создании проекта убедитесь в том, что выбрана нужная версия платформы.

Шаг 1. Выберите язык C#, а затем выберите пункт Windows. Шаг 2. Выберите пункт WPFApplication («Приложение WPF»). Шаг 3. Введите имя проекта.

Примечание. Хотя в имени проекта можно использовать пробелы, делать это не рекомендуется.

Шаг 4. Нажмите кнопку ОК, чтобы создать новое приложение WPF.

Изменение заголовка окна. Присвоим приложению заголовок. Свойство Title находится в верхней левой части хрома окна.

1. Выберите объект Window. Для этого щелкните границу окна в конструкторе или поверхность разработки за пределами содержимого окна. Обратите внимание, что на четырех углах объекта Window появились декоративные элементы для изменения его размера с помощью мыши. Обратите внимание, что в окне Properties («Свойства») отображаются свойства объекта Window и выбрано свойство Title.

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

2. Измените значение свойства Title на FirstWPFApplication («Первое приложение WPF»), пример на рисунке 2.3.

Рис. 2.3. - Окно свойств

Конструктор обеспечивает синхронизацию всех окон инструментов и представления.

Рис. 2.4. - Конструктор WPF и редактор XAML

Добавлять элементы управления можно с помощью панели элементов и путем редактирования текста в редакторе XAML.

С помощью панели элементов можно разными способами добавлять элементы управления:

4. Щелкните элемент управления на панели элементов, чтобы выбрать его, а затем — поверхность разработки там, где требуется создать элемент управления.

5. Щелкните элемент управления на панели элементов, чтобы выбрать его, а затем перетащите его на поверхность разработки туда, где требуется создать элемент управления.

6. Щелкните элемент управления и перетащите его из панели элементов на поверхность разработки (рис.2. 5).

7. Когда целевой элемент управления выбран на поверхности разработки, дважды щелкните элемент управления на панели элементов.

Рис.2.5. - Создание элемента управления

8. Попробуйте создать на поверхности разработки элемент управления Button («Кнопка»), воспользовавшись описанными способами. Создайте кнопку в положении, показанном на рис. 5.

9. Обратите внимание, что при перетаскивании кнопки на поверхность разработки отображаются голубые направляющие элемента управления Grid («Сетка»).

Установка параметров элементов управленияю. На поверхности разработки конструктора WPF отображаются декоративные элементы, предназначенные для перемещения и изменения размеров элементов управления с помощью мыши. Они также предоставляют визуальную информацию о выравнивании элемента управления и другие сведения об элементе.

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

Декоративные элементы для выравнивания. Выберите кнопку на поверхности разработки. В окне Properties («Свойства») выберите вид по категориям и пролистайте список категории Layout («Макет»), как показано на рис. 2.6. Кнопка на рис. 2.6 выровнена по верхней и левой границам. Такое выравнивание аналогично закреплению WindowsForms.

Рис. 3.6. - Декоративные элементы для выравнивания

Верхняя граница кнопки закреплена на расстоянии 37 пикселей от верха сетки (см. второе значение в свойстве Margin на рис. ниже). Левая граница кнопки закреплена на расстоянии 38 пикселей от левой границы сетки (см. первое значение в свойстве Margin на рис. 3.6).

Совет.Типсвойства Margin — Thickness. Значения свойства соответствуют левому, верхнему, правому и нижнему полям. Свойство типа Thickness также может быть представлено одним или двумя значениями. Если задано одно значение, все четыре стороны принимаются равными. Если заданы два значения, первое значение относится к левому и правому полям, а второе — к верхнему и нижнему.

Чтобы запустить приложение, нажмите клавишу F5. После запуска приложения измените размер окна. Обратите внимание, что при изменении размера окна кнопка не перемещается.

Измените значение свойства HorizontalAlignment в окне Properties («Свойства») и обратите внимание на изменение декоративных элементов. Зеленая стрелка на рис. 2.7 указывает на декоративный элемент HorizontalAlignment.

После изменения свойства HorizontalAlignment еще раз запустите приложение и измените размер окна. Обратите внимание, что при изменении размера окна кнопка перемещается либо изменяется ее размер в зависимости от способа выравнивания.

Кроме того, изменить значение свойства HorizontalAlignment можно, щелкнув стрелку декоративного элемента или круглый декоративный элемент, на который указывает зеленая стрелка.

Повторите аналогичные действия для свойства VerticalAlignment. Синяя стрелка на рис. 2.7 ниже указывает на декоративный элемент VerticalAlignment. Восстановите выравнивание кнопки по верхней и левой границам. Красная стрелка на рис. 2.7 указывает на декоративный элемент для изменения размера. Перемещение декоративного элемента изменения размера меняет размер элемента управления в направлении движения мыши.

Рис. 2.7. - Декоративные элементы для выравнивания и изменения размера

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

Обратите внимание на два числа в левом красном прямоугольнике на рис. 2.8. Числа 12 и 12 указывают, что верхний левый угол кнопки находится на 12 пикселей ниже и на 12 пикселей правее сетки. В правом красном прямоугольнике на рис. 8 содержится число 191. Оно указывает количество пикселей от правой границы кнопки до границы сетки. Если при перемещении элемент управления выходит за граничную линию привязки, он будет привязан к границе контейнерного элемента управления.

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

Рис. 2.8. - Граничные линии привязки

3. Линии привязки элементов управления: Добавьте в форму еще одну кнопку, как показано на рисунке ниже.

На рис. 2.9 показаны линии привязки элементов управления, которые отображаются, когда границы одного элемента выровнены с границами другого. Число 20 — это количество пикселей, разделяющих две кнопки.

Рис. 2.9. - Линии привязки элементов управления

4. Опорные линии привязки текста:

На рис. 2.10 показана опорная линия привязки текста, которая отображается, когда два текстовых элемента управления выровнены. Число 20 — это количество пикселей, разделяющих две кнопки.

Рис. 2.10. - Опорные линии привязки текста

Приложение Survey. Заголовок формы. Удалите кнопки и другие элементы управления, размещенные на поверхности разработки. Чтобы удалить элемент управления, выделите его и нажмите клавишу DELETE.

Нажмите сочетание клавиш CTRL+S или щелкните значок сохранения на панели инструментов, чтобы сохранить приложение.