Природничо-гуманітарний

фаховий коледж ДВНЗ «УжНУ»

Інструментальні засоби
візуального програмування
ЛЕКЦІЯ №5
Редагування графічних
даних

Викладач: Верещагін О.О.

ЗМІСТ ЛЕКЦІЇ №5 «Редагування графічних даних»

Графіка
01 1.1. Вступ в Graphics
1.2. Малювання за подією Paint
1.3. Малювання без події Paint
1.4. Кольори .NET
1.5. Пір’я в .NET
1.6. Кисті Brush в .NET

Деякі елементи середовища

02 2.1. Про елемент ComboBox
2.2. Про елемент DateTimePicker
*2.3. Про елемент ListBox
*2.4. Про елемент ListView
*2.5. Про елемент PictureBox
*2.6. Про елемент ProgressBar
1.1. Вступ в Graphics
Windows - це графічна операційна система. У ній, звичайно, існує можливість
запустити командний рядок, яка володіє мізерними можливостями, хоча, завдяки
PowerShell, командний рядок може перетворитися на потужний інструмент. І
все ж основний інтерфейс ОС графічний, і більшість програм, що розробляються
теж є графічними. Кожен елемент управління в системі - це не що-небудь
надприродне, а просто зображення, намальоване системою.
Найпростіший спосіб помістити графіку на форму - розташувати на поверхні
форми компонент PictureBox, який дозволяє завантажувати в себе картинку і
відображати її в статичному стані. Але використанням картинки програмування
графіки в .NET не обмежується. У цієї платформи є досить потужні можливості,
засновані на бібліотеці GDI+.
Основним класом роботи з графікою є клас Graphics, який знаходиться в
просторі імен System.Drawing. Якщо ви захочете скористатися графічними
методами цього класу, то не забудьте підключити до модуля його простір імен,
щоб спростити собі доступ. У цьому ж просторі імен можна знайти і інші класи, які
допоможуть вам при роботі з графікою.
Клас Graphics реалізує поверхню малювання і всі методи малювання GDI+.
GDI розшифровується як Graphic Device Interface (інтерфейс графічного
пристрою), і це поняття добре відображає його суть, тому що GDI реалізує методи
для малювання не тільки на дисплеї, а й на інших графічних пристроях, наприклад
на принтерах. GDI+ став продовженням першої версії графічного інтерфейсу.
Клас Graphics - реалізує методи малювання об'єктів на пристрої дисплея.
Найпростіший і популярний спосіб отримати об'єкт цього класу - використовувати
обробник події Paint. Наприклад, створіть новий додаток і для форми створіть
обробник події Paint. Середовище розробки зробить для нас наступну заготовку
методу для обробника подій:
Другий параметр - це змінна класу PaintEventArgs, через яку ми отримуємо
два дуже важливих властивості:
• ClipRectangle - область, яку потрібно перемалювати;
• Graphics - екземпляр класу Graphics, який представляє собою поверхню
малювання. Саме на ній і потрібно малювати.
Виходить, що для малювання на формі ми повинні використовувати об'єкт
e.Graphics і його методи. Але це тільки в обробнику події Paint. В інших методах і
обробниках доведеться створювати екземпляр класу самому, але це вже окрема
історія.
При роботі з графікою потрібно звикнути, що вам доведеться працювати в
основному з дробовими числами. Зараз деякі з вас можуть подумати, що дробові
числа абсолютно не потрібні, - адже дозвіл екрана дорівнює цілому кількості пікселів
(наприклад, 1920x1080), так звідки береться дрібна частина? Проте, дрібна частина є (і
ви це незабаром побачите), тому більшість структур, які задають розміри або області
малювання, мають на кінці назви букву F (від float, плаваюча точка).
1.1. Вступ в Graphics
Давайте стисло нагадаємо основні методам і властивостей класу Graphics. Для • DrawImage() - намалювати картинку;
початку подивимося на властивості: • DrawLine() - намалювати лінію;
• Clip - регіон (прямокутна область), який визначає область малювання; • DrawLines() - намалювати серію ліній;
• ClipBounds - область малювання у вигляді чотирикутника (клас RectangleF); • DrawPolygon() - намалювати багатокутник по масиву точок;
• CompositingMode - спосіб малювання композитних картинок; • DrawRectangle() - намалювати прямокутник;
• CompositingQuality - дозволяє задати якість відображення композитних зображень; • DrawString() - відобразити рядок тексту;
• DpiX - горизонтальне розширення поверхні; • FillEllipse(), FillPolygon(), FillRectangle(), FillRegion() - залити
• DpiY - вертикальне розширення поверхні;
кольором елліпс, багатокутник, прямокутник або область;
• PageScale - масштабування;
• FromHwnd() - статичний метод для створення об'єкту Graphics на основі Hwnd
• PageUnit - одиниці виміру для поверхні.
значення компонента;
Тепер подивимося на основні методи класу Graphics. Саме вони становлять
• FromImage() - статичний метод для створення об'єкту Graphics на основі картинки;
найбільшу цінність і інтерес:
• MeasureString() - розраховує розміри рядка тексту на поверхні при використанні
• Clear() - очистити поверхню малювання і залити її кольором, зазначеним в якості
певного шрифту.
параметра;
Обмежимося поки цим списком методів. Насправді їх, напевно, в два рази
• DrawArc() - намалювати дугу;
більше, і докладна інформація по ним, звичайно ж, є в довідковій системі MSDN, яка з
• DrawBezier() - намалювати криву Безьє;
кінця 2008-го доступна російською мовою.
• DrawBeziers() - намалювати серію (кілька) кривих Безьє;
• DrawCurve() - намалювати криву;
• DrawClosedCurve() - намалювати замкнуту криву, кінець якої буде з'єднаний з
початком кривої;
• DrawEllipse() - намалювати еліпс;
• DrawIcon() - намалювати значок;
1.2. Малювання за подією Paint
Давайте напишемо наше перше «Hello World» додаток для роботи з
графікою. У цьому прикладі ми виведемо велике повідомлення «Hello World» у
вигляді графічного тексту:
Наступним етапом ми хочемо дізнатися, який розмір буде займати напис на
формі. Це потрібно, щоб розрахувати положення тексту так, щоб він з’явився рівно
посередині екрану. Для визначення розміру тексту використовується метод
MeasureString(). Метод отримує два параметри: рядок тексту і шрифт.
Залежно від типу і розміру шрифту, розмір тексту може дуже сильно відрізнятися.
У нашому прикладі в якості шрифту передається Font, який є властивістю поточної
форми.
Тепер можна розрахувати позицію тексту так, щоб текст розташувався точно
в центрі вікна. Розрахунки зберігаються в змінної p, яка має тип PointF. Цей тип
визначає точку лівого верхнього кута тексту за допомогою двох полів: X і Y, які
представляють собою числа з плаваючою точкою (ось вони нам і зустрілися).
Останнім етапом ми відображаємо текст. Існує кілька перевантажених варіантів
методу малювання тексту DrawString(). Ми вибраали варіант, який приймає такі
параметри:
• текст, який потрібно відобразити;
• шрифт;
• пензлик;
• позицію у вигляді структури PointF.
Найцікавіше тут - третій параметр. У коді ми передаємо в ньому значення
SystemBrushes.WindowText, де SystemBrushes є перерахуванням, яке складається з
системних кольорів. У нашому прикладі вибрано колір WindowText, яким система за
замовчуванням малює текст в вікнах.
Щоб виправити проблему перемальовування після зміни розмірів вікна, можна
змусити систему зробити перерисовку. Найпростіший спосіб - створити обробник події
Resize для форми і в ньому викликати метод Invalidate():
Метод Invalidate() змушує форму викликати подію Paint. Насправді
перерисовка вікна складається з двох подій: промальовування фону і промальовування
вмісту. Ми обробляємо подію тільки промальовування вмісту. Подія промальовування
фону PaintBackground за замовчуванням забарвлює фон кольором, яка була обрана в
властивості BackColor форми.
1.3. Малювання без події Paint
Створіть новий додаток, покладіть на його поверхню кнопку і напишіть Щоб відновити прямокутник, доведеться натискати кнопку заново. Вашого
наступний код, що виконується за її натискання: користувача такий підхід навряд чи обрадує, тому краще виконувати малювання за
подією Paint:

Щоб отримати об'єкт для малювання, в цьому прикладі використовується

статичний метод FromHwnd() класу Graphics. Методу потрібно передати властивість
Handle вікна, об'єкт малювання якого ви хочете отримати, а сам об'єкт ми
отримуємо в якості результату роботи методу.
Тепер ми можемо малювати на поверхні об'єкта малювання. Для прикладу ми
намалюємо прямокутник за допомогою методу DrawRectangle(). Цьому методу
передаються два параметри: перо (клас Pen), за допомогою якого відбувається У цьому випадку після натискання кнопки значення змінної bDrawRectangle
малювання, і розміри у вигляді структури Rectangle. За допомогою класу Pen ми змінюється на true і викликається метод Invalidate(), який змушує форму
можемо поставити колір і ширину пера (товщину одержуваної лінії). Ми поки з перемалювати. За подією Paint прямокутник малюється, тільки якщо змінна
пір'ям не розбираємося, тому скористалися системним пером під ім'ям bDrawRectangle встановлена ​в true. Тепер цей прямокутник нікуди не дінеться, навіть
ActiveBorder з перерахування SystemPens. Перерахування SystemPens містить якщо вікно відновлять із згорнутого стану.
системні пір'я, і ​перо ActiveBorder служить для малювання контурів вікон. Так, я ж обіцяв вам показати два способи отримання об'єкта для малювання. Другий
спосіб полягає у використанні методу CreateGraphics() форми:

Цей метод повертає об'єкт малювання для форми або елемента управління, для
якого він був викликаний. В даному випадку він викликається для this, а значить, поверне
об'єкт малювання поточної форми.
1.4. Кольори .NET
За колір в .NET відповідає структура Color. Поля цієї структури змінювати не
можна, тому колір задається тільки на етапі ініціалізації і не може змінюватися.
Найцікавіше - у цієї структури немає конструктора, який приймає колір або що-
небудь ще. Є тільки конструктор за замовчуванням, який просто виконує
ініціалізацію:
Колір в .NET представляється у вигляді чотирьох складових: червоного,
зеленого, синього та прозорого. У структури Color є чотири відповідних властивості
типу byte (а значить, вони будуть змінюватися від 0 до 255):
• A - альфа-канал, що визначає прозорість;
• R - червоний колір;
• G - зелений колір;
• B - синій колір.
У сумі ці властивості займають в пам'яті 4 байта (32 біта). Змішанням цих
складових можна отримати будь-який колір з 16 мільйонів можливих.
А тепер найцікавіше - так як складові були доступними для читання, то після
створення ми не можемо змінити колір, і наступний код завершиться помилкою на
другому рядку:
Але як же тоді створити потрібний нам колір, якщо у нас немає конструктора і
немає можливості змінювати властивості? За допомогою статичних методів Color,
наприклад: FromArgb(), FromName(), FromKnownColor().
Є кілька перевантажених варіантів методу FromArgb(). Наприклад, колір може бути
створений на основі числа типу int. Тип даних int складається з 32 бітів - якраз стільки і
потрібно, щоб зберігати всі чотири складові кольору. Метод може зробити зворотну
операцію - розбити число int на чотири складові byte.
Більш зручним варіантом є метод FromArgb(), який одержує чотири числа для кожної
складової: Color.FromArgb (прозорість, червоний, зелений, синій);
Наступний рядок створює абсолютно непрозорий червоний колір:
Color c = Color.FromArgb (255, 255, 0, 0);
Наступний спосіб отримати колір - скористатися методом FromName(), який приймає як
параметр назва кольору у вигляді рядка і намагається перетворити його в структуру Color.
Наприклад, наступний рядок створює зелений колір по його імені "Green": Color c =
Color.FromName("Green");
Наступний варіант - використовувати метод FromKnownColor(). Цей метод отримує в
якості параметра перерахування KnownColor, яке складається з безлічі назв квітів і назв
системних кольорів, які входять в інші перерахування, такі як SystemColors або Color:
Color c = Color.FromKnownColo(KnownColor.ButtonShadow);
Системні кольори простіше отримувати через перерахування SystemColors.
Наприклад, наступний рядок инициализирует змінну кольором, який використовує система
для малювання тіні для кнопки: Color c = SystemColors.ButtonShadow;
Якщо потрібен один з основних кольорів, то можна використовувати статичні
властивості самої структури Color. У неї вже є зумовлені значення для основних кольорів.
Наприклад, наступний рядок використовує зумовлений червоний колір для створення
змінної: Color c = Color.Red;
1.4. Кольори .NET
У структури Color є ще кілька цікавих властивостей:
• IsEmpty - якщо false, то структура не проініціалізувати, і колір порожній;
• IsKnownColor - якщо true, то колір відомий системі. Такі кольори є в
перерахуванні KnownColor;
• IsNamedColor - якщо true, то у кольори є дружнє користувачеві ім'я;
• IsSystemColor - якщо true, то цей колір відповідає одному із системних;
• Name - ім'я кольору.
1.5. Пір’я в .NET
При малюванні фігур на поверхні Graphics нам доведеться оперувати двома
поняттями: лінія і заливка. Ці поняття найчастіше асоціюють з олівцем і пензлем
відповідно. За допомогою олівця ми малюємо лінії, а за допомогою кисті
заповнюємо простір (розфарбовуємо). Наприклад, лінія прямокутника може бути
чорного кольору, а внутрішність прямокутника може заповнюватися іншим кольором.
За стиль олівця в .NET відповідає клас Pen. Для ілюстрації найцікавіших
властивостей цього класу я написав невеличкий приклад, який ми зараз і розглянемо.
У ньому кілька ліній малюються різними пір'ям.
Програма просто малює лінії, при цьому змінюється стиль олівця, що робить лінії
унікальними. Давайте розглянемо цей код докладніше, щоб зрозуміти, що відбувається.
У другому рядку ініцілізується олівець у вигляді об'єкта класу Pen. Конструктор
приймає два параметри:
• колір майбутнього олівця;
• товщину лінії в пікселях.
Як товщини ми вибрали трієчку, щоб лінії було краще видно. У першому блоці коду
за допомогою циклу foreach перебираються всі значення перерахування DashStyle.
Однойменну властивість є у олівця, і воно відповідає за стиль лінії. Існують шість стилів:
Solid, Dash, Dot, DashDot, DashDotDot, Custom, і відповідні шість ліній. Зверніть
увагу, що 5 і 6 лінії однакові. Це тому, що Custom не має стилю, але замість цього
дозволяє користувачеві задавати свій стиль, що і відбувається в другому блоці коду
прикладу.
Отже, другий блок створює свій стиль. Це робиться через властивість
DashPattern, яке має тип масиву значень float. Кожне значення в цьому масиві - це
значення довжини лінії і пробілу по черзі. Це означає, що перше число задає довжину
лінії, друге - довжину пробілу, потім знову лінії і т. д. Таким чином, ви можете створити
свій власний малюнок ліній.
Останній блок коду малює п'ять ліній в циклі, поступово збільшуючи властивість
DashOffset. Це властивість відповідає за зміщення в лінії, починаючи з якого буде
створюватися малюнок олівця. Мені складно передати словами сенс зміщення -
найкраще це передають останні п'ять ліній на малюнку.
1.6. Кисті Brush в .NET
В .NET є кілька класів заливки, базовим для яких є Brush. Це клас, який Ще одна кисть, яку ми розглянемо, - LinearGradientBrush:
дозволяє задавати параметри заливки для таких фігур, як прямокутник, еліпс, текст і
т. д. Найпростіший спосіб отримати кисть потрібного кольору - використовувати
системну кисть з перерахування SystemBrushes. Наприклад, наступний рядок
створює заливку, якої в Windows фарбуються робочі області вікон:
Brush brush = SystemBrushes.Window; Кисть LinearGradientBrush дозволяє створювати лінійний градієнт. Як
Клас Brush абстрактний, і ви не можете створити безпосередньо його конструктора об'єкт отримує дві точки (початок і кінець градієнта) і два кольори
екземпляр, бо у нього є абстрактні методи, які не реалізовані, але створені для того, (початковий і кінцевий кольора градієнта). Маючи ці дані, система сама розфарбує
щоб їх реалізовували спадкоємці. Найпростіший і найпоширеніший спадкоємець: яку заповнюють область плавним переходом від одного кольору до іншого.
SolidBrush. Це не від українського слова "солідний", а від англійського solid –
суцільний. Тобто, ця заливка заповнює область повністю одним кольором і одним
візерунком:

У цьому прикладі спочатку створюється нова кисть для зафарбовування

прямокутника червоним кольором. У другому рядку за допомогою методу
FillRectangle() ми зафарбовуємо, створену кистю, великий прямокутник.
Можна писати ітак, обидна варіанта правельні (чудеча ООП):
SolidBrush brush = new SolidBrush (Color.Red);
2.1. Про елемент ComboBox
Елемент ComboBox утворює випадаючий список і поєднує функціональність
компонентів ListBox і TextBox. Для зберігання елементів списку в ComboBox також
призначена властивість Items.
Подібним чином, як і з ListBox, ми можемо в вікні властивостей клацнути
властивість Items і нам відкриється вікно для додавання елементів ComboBox:
І як і з компонентом ListBox, тут ми також можемо програмно управляти
елементами. Додавання елементів:
При додаванні за допомогою методів Add / AddRange всі нові елементи
поміщаються в кінець списку. Однак якщо ми поставимо у ComboBox властивість
Sorted рівним true, тоді при додаванні буде автоматично проводитися сортування.
Найбільш важливою подією для ComboBox також є подія
SelectedIndexChanged, що дозволяє відстежити вибір елемента в списку. Тут
також властивість SelectedItem буде посилатися на вибраний елемент.
Видалення елементів:
Ми можемо отримати елемент за індексом і виробляти з ним різні дії.
Наприклад, змінити його:
Налаштування оформлення ComboBox. За допомогою ряду властивостей
можна налаштувати стиль оформлення компонента. Так, властивість DropDownWidth
задає ширину списку. За допомогою властивості DropDownHeight можна встановити
висоту списку.
Ще одна властивість MaxDropDownItems дозволяє задати число видимих
елементів списку - від 1 до 100. За умовчанням це число дорівнює 8.
Інша властивість DropDownStyle задає стиль ComboBox. Воно може приймати
три можливих значення:
• Dropdown: використовується за умовчанням. Ми можемо відкрити список, що
випадає варіантів при введенні значення в текстове поле або натиснувши на
кнопку зі стрілкою в правій частині елемента, і нам відобразиться власне випадає,
в якому можна вибрати можливий варіант
• DropdownList: щоб відкрити список, що випадає, треба натиснути на кнопку зі
стрілкою в правій стороні елемента
• Simple: ComboBox представляє просте текстове поле, в якому для переходу між
елементами ми можемо використовувати клавіші клавіатури вгору / вниз
2.2. Про елемент DateTimePicker
Для роботи з датами в Windows Forms є елементи DateTimePicker і
MonthCalendar. DateTimePicker представляє розкривающийся після натискання
календар, в якому можна вибрати дату. Є елементом, який за допомогою
переміщення повзунка дозволяє вводити числові значення.
Найбільш важливі властивості DateTimePicker:
• Format: визначає формат відображення дати в елементі управління. Може
Властивість Value зберігає об'єкт DateTime, тому з ним можна працювати як і з
приймати наступні значення:
• Custom: Формат задається розробником будь-якою іншою датою. В даному випадку обрана дата перетворюється в рядок часу.
• Long: Повна дата
• Short: Дата в скороченому форматі
• Time: Формат для роботи з часом

• CustomFormat: задає формат відображення дати, якщо для властивості Format

встановлено значення Custom
• MinDate: мінімальна дата, яку можна вибрати
Значення dateTimePicker1.Value.ToLongTimeString() аналогічно тому
• MaxDate: найбільша дата, яку можна вибрати
тексту, який відображається в елементі. І ми могли б написати так:
• Value: определеяте поточний вибране значення в DateTimePicker
• Text: представляє той текст, який відображається в елементі
При виборі дати елемент генерує подія ValueChanged. Наприклад, опрацюємо
дану подію і дамо вибране значення тексту мітки: