Создание приложения для рисования с помощью WPF

Статья
11/16/2008

Обновлен: Ноябрь 2007

На этом занятии вы узнаете способ создания приложения Windows Presentation Foundation (WPF), которое позволяет рисовать. Создание приложений WPF аналогично созданию приложений Windows Forms. Перетащите элементы управления из Панели элементов в область конструктора и затем напишите код для обработки событий элементов управления.

ссылка на видео Просмотрите видеодемонстрацию Видео с практическими советами: создание приложения рисования с помощью WPF.

Практическое задание

Чтобы создать приложение на основе WPF

В меню Файл выберите Создать проект.

Откроется диалоговое окно Создание проекта. В этом диалоговом окне выводится список типов приложений по умолчанию, которые можно создавать с помощью Visual Basic, экспресс-выпуск.
Выберите Приложение WPF в качестве типа проекта.
Измените имя приложения на Ink Pad и нажмите кнопку OK.

Visual Basic, экспресс-выпуск создает новую папку для проекта. Папка имеет то же имя, что и проект. Visual Basic, экспресс-выпуск также открывает новое WPF окно с названием Window1 в режиме конструктора. Чтобы перейти в редактор кода, щелкните правой кнопкой мыши область конструктора и выберите пункт Просмотр кода. По умолчанию под конструктором отображается XAML-редактор, но XAML представление можно просматривать и в полноэкранном режиме. Для этого правой кнопкой мыши щелкните область конструктора и выберите Просмотр XAML.

Для создания пользовательского интерфейса.

Если окно Свойства не отображается, в меню Вид выберите Окно свойств. Это окно содержит список свойств выбранной формы или элемента управления. В этом окне можно изменить существующие значения свойств.
Изменить размеры окна WPF, установив в окне Свойства значение 550 для свойства Height и значение 370 для свойства Width.
Измените свойство заголовка окна WPF на Ink Pad.

Изменить свойство Background окна WPF на коричневый цвет, щелкнув Brown в раскрывающемся списке и нажав клавишу ENTER.

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

Чтобы открыть Панель элементов, в меню Вид выберите Панель элементов.
Щелкните правой кнопкой мыши Панель элементов и выберите пункт Выбрать элементы.

Откроется диалоговое окно Выбор элементов панели элементов.
На вкладке Компоненты WPF диалогового окна Выбор элементов панели элементов прокрутите список вниз до InkCanvas и выберите его, установив флажок.
Нажмите кнопку OK для добавления элемента управления InkCanvas на Панель элементов.
Перетащите элемент управления InkCanvas из Панели элементов в область конструктора.
Задайте следующие свойства элемента управления InkCanvas в окне Свойства:

Свойство

Значение

Width

Авто

Height

Авто

HorizontalAlignment

Растяжение

VerticalAlignment

Растяжение

Margins

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

Фон элемента управления InkCanvas во время выполнения будет светло-желтым.
Перетащите два элемента управления Button в окно WPF и разместите их под элементом управления InkCanvas. Установите button1 слева, а button2 — справа.
Выберите button1 и измените разметку XAML в режиме просмотра XAML, как показано ниже. Эта разметка устанавливает значение свойства Text равным Clear.
```
<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>
```
Выберите button2 и измените разметку XAML в режиме просмотра XAML, как показано ниже. Эта разметка устанавливает значение свойства Text равным Close.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
WPF приложение должно напоминать приложение Ink Pad на следующем рисунке.

WPF приложение Ink Pad

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

Чтобы добавить код к обработчику событий для кнопок

Дважды щелкните значок Clear и добавьте следующий код в созданный обработчик событий Click:
```
    Me.InkCanvas1.Strokes.Clear() 
```
Вернитесь в режим конструктора, щелкнув правой кнопкой мыши редактор кода и выбрав пункт Конструктор.
Дважды щелкните Close и добавьте следующий код в созданный обработчик событий Click:
```
    Me.Close()
```
Нажмите клавишу F5 для запуска проекта.
При запуске приложения нарисуйте рисунок в элементе управления InkCanvas. Если допущена ошибка, можно нажать кнопку Clear, чтобы начать заново.
Нажмите кнопку Закрыть для завершения приложения.