МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ

КРЕМЕНЧУЦЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ

ІМЕНІ МИХАЙЛА ОСТРОГРАДСЬКОГО

МЕТОДИЧНІ ВКАЗІВКИ

ЩОДО ВИКОНАННЯ ЛАБОРАТОРНИХ РОБІТ

З НАВЧАЛЬНОЇ ДИСЦИПЛІНИ

«Комп’ютерні технології та програмування»

ДЛЯ СТУДЕНТІВ ДЕННОЇ ФОРМИ НАВЧАННЯ ЗА НАПРЯМОМ 6.050101 – «КОМП’ЮТЕРНІ НАУКИ»

КРЕМЕНЧУК 2012

Методичні вказівки щодо виконання лабораторних робіт з навчальної дисципліни «Комп’ютерні технології та програмування» для студентів денної форми навчання за напрямом 6.050101 – «комп’ютерні науки»

Укладачі: к.т.н., доц. каф. ІУС Щербак С.С;

ас. каф. ІУС Петрусь А.С.;

ас. каф. ІУС Галушка І.М.

Содержание

Оглавление

Лабораторная работа 1 4

Знакомство с WPF 4

Лабораторная работа 2 9

Подробное введение в разработку приложений WPF 9

Лабораторная работа 3 35

Макет программы и основные элементы управления 35

Лабораторная работа 4 49

XAML и код, расширения разметки и ресурсы 49

Лабораторная работа 6 67

Свойства зависимости 67

Лабораторная работа 7 87

Привязка данных 87

Лабораторная работа 1 Знакомство с wpf

Цель: демонстрация создания простого приложения Windows Presentation Foundation (WPF) и знакомство с интегрированной средой разработки Visual C#.

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

1. Знакомство с редактором XAML

2. Создание приложения WPF

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

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

1. Знакомство с редактором xaml

Как и приложения Windows Forms, приложения WPF можно создавать путем перетаскивания элементов управления с панели элементов на поверхность разработки. В дополнение к конструктору, окну «Свойства и панели элементов IDE» в проектах WPF располагает окном XAML. XAML — это акроним от Extensible Application Markup Language, языка XAML, который используется для создания пользовательского интерфейса. На рисунке 1 изображено расположение редактора XAML.

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

В этой работе рассматривается выполнение следующих задач.

• Создание приложения WPF.

• Переключение между представлением Код и представлением Конструктор.

• Изменение свойств окна WPF.

• Использование редактора XAML.

• Добавление элемента управления «System.Windows.Controls.InkCanvas».

• Добавление элемента управления «System.Windows.Controls.Button».

• Создание обработчиков событий для элементов управления.

Рис. 1.1- Редактор XAML

2.Создание приложения wpf

1. Для создания приложения WPFв меню «Файл»необходимо выбратькоманду «Создать проект».

В открывшемся диалоговом окне «Создание проекта» выводится список различных типов приложений по умолчанию, которые можно создавать с помощью Visual C#, экспресс-выпуск.

2. В окне, что открылось выберите « Приложение WPF».

3. В графе ввода имени приложения введите «Ink Pad».

4. Нажмите кнопку «ОК».

Visual C#, экспресс-выпуск создаст для проекта новую папку с таким же именем, как у проекта, и затем отобразит новое окно Windows с именем «Window1» в представлении «Конструктор». Для переключения в представление «Код», нужно щелкнуть правой кнопкой мыши поверхность разработки или окно кода и выбрать пункт «Просмотр кода». По умолчанию редактор XAML отображается под конструктором, но разметку XAML можно просматривать и в полноэкранном режиме. Для этого нужнощелкнуть правой кнопкой мыши поверхность разработки и выбрать пункт «Просмотр XAML».

Форма WPF в представлении «Конструктор» — это визуальное представление окна, которое открывается при запуске приложения. В представлении «Конструктор» можно перетаскивать различные элементы управления из панели элементов в окно WPF. После расположения элемента управления в окне WPF Visual C# автоматически создаст код для правильного размещения элемента управления при выполнении программы.

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

6. Для изменения размера окна WPF, установите в окне «Свойства» значение 550 для свойства Height и значение 370 для свойства Width.

7. Измените заголовок окна WPF на « Ink Pad».

8. Измените свойство «Background» окна WPF на коричневый цвет, щелкнув «Brown» в раскрывающемся списке нажав клавишу «ВВОД».

Примечание.Можно также непосредственно изменить разметку XAML, добавив атрибут «Background» и установив его значение равным Background= «Brown».

9. Откройте панель элементов, в меню «Вид»и выберите пункт «Панель элементов».

10. Щелкните правой кнопкой мыши панель элементов и выберите пункт «Выбрать элементы».Откроется диалоговое окно «Выбор элементов панели элементов».

11. На вкладке «Компоненты WPF» диалогового окна «Выбор элементов панели элементов» прокрутите список вниз до варианта InkCanvas и выберите его, установив флажок.

12. Нажмите кнопку ОК для добавления элемента управления InkCanvas на панель элементов.

13. Из панели элементов перетащите в окно WPF элемент управления InkCanvas.

14. В окне Свойства задайте следующие свойства элемента управления InkCanvas.

    Свойство	Значение
    Width	Автоматически
    Height	Автоматически
    HorizontalAlignment	Растяжение
    VerticalAlignment	Растяжение
    Margin	9, 9, 9, 68

15. Измените цвет элемента управления InkCanvas на желтый, задав его свойству Background значение LightYellow.

Фон элемента управления InkCanvas во время выполнения будет светло-желтым.

16. Перетащите два элемента управления Button в окно WPF под элемент управления InkCanvas. Расположите button1 слева, а button2 — справа.

17. Выберите button1 и измените разметку XAML в режиме просмотра XAML, как показано ниже. Эта разметка устанавливает для текста значение Clear.

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" Name="button1" VerticalAlignment="Bottom" Width="75">Clear</Button>

18. Выберите button2 и измените разметку XAML, как показано ниже. Эта разметка устанавливает для текста значение Close.

<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" Name="button2" VerticalAlignment="Bottom" Width="75" Click="ButtonCloseClicked">Close</Button>

Приложение WPF должно напоминать приложение Ink Pad на следующем рисунке.

Приложение WPF для рукописного ввода (рис. 1.2):

1. Дважды щелкните на кнопке «Очистить» и добавьте следующий код в созданный обработчик событий Click.

this.inkCanvas1.Strokes.Clear();

2. Вернитесь в представление «Конструктор», щелкнув правой клавишей мыши редактор кода и выбрав пункт «Конструктор».

3. Дважды щелкните по кнопке «Закрыть» и добавьте следующий код в созданный обработчик событий Click.

this.Close();

Рис. 1.2. - Приложение для рукописного ввода