4. Модификация приложения Windows Foundation Presentation: добавление нового элемента из библиотеки компонентов wpf
Реализуем простенькую функциональность. Добавим из библиотеки компонентов элемент для рукописного ввода (нажатие мышки оставляет след). Для этого правой кнопкой мыши выделим панель элементов:
Рис. 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] является маской для ввода цвета с альфа-каналом прозрачности или: #FFFFFFE0 для светло-жёлтого.
Обратим также внимание, что нашему элементу InkCanvas было дано имя inkCanvas1.
Теперь сделаем кнопку очистки содержимого. Добавим на форму с панели элементов элемент Button. Чтобы наша кнопка встала там где нужно, изменим свойства следующим образом:
<Button Content="Очистить" HorizontalAlignment="Right" Margin="0,0,12,170" Name="button1" VerticalAlignment="Bottom" Width="75" Click="button1_Click" Height="23" />
Рис. 4. 5. Добавление кнопки Очистить
Теперь вернём нашей форме свободу и изменим для неё значения для свободного изменения размера1:
ResizeMode: |
CanResize |
ПРИМЕЧАНИЕ № 1: Совсем необязательно лезть в свойства элемента и искать снова искать уже изменённое свойство. Можно поступить проще. Ищем свойство в описании элемента в XAML-кода, удаляем значение поля свойства и вписываем «пробел», появится контекстное меню всех возможных значений свойства:
Добавить событие можно разными способами. Наиболее простой (для Click) это дваждый нажать на кнопку в конструкторе формы. Также можно перейти на вкладку события для кнопки Button, найти там Click и дваждый щёлкнуть по надписи:
Также можно добавить событие вручную, редактированием кода XAML для формы:
<Button Content="Очистить" Height="23" HorizontalAlignment="Left" Margin="416,118,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
За событие нажатия отвечает текст: Click=”button1_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)
{
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;
}
Событие Click кнопки Рисовать со стиранием:
private void ButtonDC_Click(object sender, RoutedEventArgs e)
{
inkCanvas1.EditingMode = InkCanvasEditingMode.InkAndGesture;
}
Событие Click кнопки Стереть элемент:
private void ButtonClear_Click(object sender, RoutedEventArgs e)
{
inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}