Модификация приложения Windows Foundation Presentation : добавление нового элемента из библиотеки компонентов WPF

⇐ ПредыдущаяСтр 30 из 92Следующая ⇒

Реализуем простенькую функциональность. Добавим из библиотеки компонентов элемент для рукописного ввода (нажатие мышки оставляет след). Для этого правой кнопкой мыши выделим панель элементов:

Рис. 4. 1. Добавление нового элемента из библиотеки компонентов WPF

Откроется окно со всеми доступными компонентами. Перейдём на вкладку Компоненты WPF, далее в поле Фильтр вводим Ink (отсеивая лишнее) и ставим галочку в InkCanvas.

Рис. 4. 2. Окно Выбор элементов панели элементов

Жмём ОК. Новый элемент появится в панели элементов. Перетащим его на форму. Изменим размер: потянем за уголок добавленного элемента и поведём его до сетки. Появятся направляющие (оранжевые) относительно сетки (элемента Grid). Красные цифры у границ формы это отступы от сетки (и границы формы), а также обозначение высоты и ширины элемента в красных прямоугольниках:

Рис. 4. 3. Изменение размеров элемента

Рис. 4. 4. Выравнивание элемента по левому верхнему углу

Установим свойства в элемента InkCanvas такими (группа полей Макет):

Width:	впишем Auto
Height:	впишем Auto
HorizontalAlignment:	выберем из выпадающего списка Stretch

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

VerticalAlignment:

выберем из выпадающего списка Stretch

^ Элемент будет растягиваться вместе с окном по вертикали.

Margin:

12,12,12,199

^ Свойство Margin выполняет исключительно важную роль. С его помощью можно задавать поля вокруг текущего элемента управления (то есть элемента, для которого задаётся свойство Margin). В WPF предусмотрен объект ValueConverter, который принимает строку в формате «5,5,5,5». О чём это говорит? О том, что мы хотим оставить поля размером 5 пикселей со всех сторон элемента. Строка Margin определяет левое, верхнее, правое и нижнее поля. Это один из трёх перегруженных конструкторов класса со странным именем Thickness, который используется при задании свойства Margin в коде программной части.

MinHeight:

впишем 100

^ Минимальная высота элемента (попробуйте уменьшить размер элемента меньше этого значения в конструкторе мышкой, среда не даст этого сделать).

Поменяем цвет фона на светло-жёлтый:

Background:

LightYellow

^ Выбор цвета может также зависеть от числа, например: #[ Aplha | Red | Green | Blue ] является маской для ввода цвета с альфа-каналом прозрачности или: # FFFFFFE 0 для светло-жёлтого.

Обратим также внимание, что нашему элементу InkCanvas было дано имя inkCanvas 1.

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

Рис. 4. 5. Добавление кнопки Очистить

Теперь вернём нашей форме свободу и изменим для неё значения для свободного изменения размера¹:

ResizeMode:

CanResize

ПРИМЕЧАНИЕ № 1: Совсем необязательно лезть в свойства элемента и искать снова искать уже изменённое свойство. Можно поступить проще. Ищем свойство в описании элемента в XAML-кода, удаляем значение поля свойства и вписываем «пробел», появится контекстное меню всех возможных значений свойства:

Добавить событие можно разными способами. Наиболее простой (для Click) это дваждый нажать на кнопку в конструкторе формы. Также можно перейти на вкладку события для кнопки Button, найти там Click и дваждый щёлкнуть по надписи:

Также можно добавить событие вручную, редактированием кода XAML для формы:

</Grid>

За событие нажатия отвечает текст: Click =” button 1_ Click ”. Разумеется при ручном добавлении, имя события может быть каким угодно на усмотрение программиста. Главное чтобы у нас был соответствующий метод в файле MainWindow . xaml . cs:

private void button1_Click(object sender, RoutedEventArgs e)

{

}

Впишем в обработчик кнопки строчку:

this.inkCanvas1.Strokes.Clear(); // Очищаем элемент inkCanvas1

Компилируем, проверяем работоспособность. Можем нарисовать что-то в жёлтоватом поле и затем стереть это нажатием кнопки Очистить. Можно изменить размер окна и при этом элементы будут двигаться как надо. Но, всё равно скучно и бедно.

Рис. 4. 6. Модифицированное приложение WPF

Добавим элементу ручного ввода немного функциональности. Возможность стирать нарисованные элементы не по точкам или сразу всё, а посимвольно. Символом или строчкой будет считать элемент от начала момента рисования, до конца (до момента отжатия клавиши мышки на поле рисования). Добавим кнопки переключения между режимами. Слева от кнопки Очистить поместим ещё две: Стереть элемент (ButtonClear), Рисовать (ButtonDraw) и Рисовать со стиранием (ButtonDC). Имена кнопок указаны в скобках.

Событие Click для кнопки Рисовать (переопределяет режим рисования, возвращает в состояние «по умолчанию» для элемента, или в состояние EditingMode: Ink):

private void ButtonDraw_Click(object sender, RoutedEventArgs e)

{