крок 5
На даному етапі проводиться додавання на форму елемента управління PictureBox і елемента управління CheckBox. Потім на форму додаються кнопки.
Додавання елементів керування в форму
Перейдіть на вкладку "Панель елементів" (що знаходиться в лівій частині інтегрованого середовища розробки Visual Studio) і розгорніть групу Стандартні елементи управління. В результаті цієї дії відобразиться велика частина стандартних елементів управління, які можна побачити в формах.
Виберіть елемент управління TableLayoutPanel в формі. Щоб підтвердити, що елемент TableLayoutPanel обраний, переконайтеся, що воно відображатиметься в списку у верхній частині вікна Властивості. Вибирати елементи управління в формі можна також за допомогою списку у верхній частині вікна Властивості. Вибирати елементи управління таким чином часто простіше, ніж вибрати крихітний елемент управління за допомогою миші.
Двічі клацніть елемент PictureBox. щоб додати в форму елемент управління PictureBox. Оскільки елемент управління TableLayoutPanel закріплений так, щоб заповнювати собою форму, інтегроване середовище розробки додає елемент управління PictureBox в першу вільну позицію (лівий верхній кут).
Клацніть новий елемент управління PictureBox, щоб вибрати його, а потім клацніть чорний трикутник на новому елементі управління PictureBox, щоб відобразити його список завдань, як показано на наступному малюнку.
Завдання елемента управління PictureBox
Якщо на TableLayoutPanel випадково був доданий елемент управління неправильного типу, то його можна видалити. Клацніть елемент керування правою кнопкою миші і в контекстному меню виберіть Видалити. Видаляти елементи управління з форми також можна за допомогою рядка меню. У рядку меню виберіть Правка. Скасувати або Правка. Видалити .
Виберіть посилання Закріпити в батьківському контейнері. В результаті цієї дії у елемента управління PictureBox властивість Dock приймає значення Fill. Щоб це побачити, виберіть елемент керування PictureBox, перейдіть до вікна Властивості і переконайтеся, що властивість Dock має значення Fill.
Зробіть так, щоб елемент управління PictureBox займав два стовпці за допомогою його властивості ColumnSpan. Виберіть елемент управління PictureBox і встановіть для його властивості ColumnSpan значення 2. Також необхідно, щоб коли елемент управління PictureBox був порожнім, відображалася порожня рамка. Встановіть для його властивості BorderStyle значення Fixed3D.
Якщо у PictureBox відсутня властивість ColumnSpan. ймовірно, елемент керування PictureBox був доданий в саму форму, а не в елемент управління TableLayoutPanel. Щоб виправити це, виберіть елемент керування PictureBox, видаліть його, виберіть елемент TableLayoutPanel, а потім додайте новий елемент управління PictureBox.
Виберіть елемент управління TableLayoutPanel в формі і додайте в форму елемент управління CheckBox. Подвійним клацанням виберіть елемент CheckBox на панелі елементів, щоб додати новий елемент управління CheckBox в наступну вільну комірку таблиці. Оскільки елемент управління PictureBox займає перші два осередки в TableLayoutPanel, елемент управління CheckBox додається в нижню ліву клітинку. Виберіть властивість Text і введіть слово Stretch, як показано на наступному малюнку.
Елемент управління TextBox з властивістю Stretch
Виберіть у формі елемент управління TableLayoutPanel, а потім на панелі елементів перейдіть до групи Контейнери (з якої був узятий елемент управління TableLayoutPanel) і двічі клацніть елемент керування FlowLayoutPanel. щоб додати новий елемент управління в останню комірку в елементі управління PictureBox (справа внизу). Потім закріпіть FlowLayoutPanel в TableLayoutPanel (вибравши Закріпити в батьківському контейнері в списку завдань FlowLayoutPanel, розкривається за допомогою чорного трикутника, або встановивши властивості Dock FlowLayoutPanel значення Fill).
Елемент управління FlowLayoutPanel є контейнером, який розміщує інші елементи управління акуратно по рядках і в певному порядку. Коли змінюється розмір елемента управління FlowLayoutPanel, якщо він містить достатньо місця для розміщення всіх компонентів в одному рядку, то він розміщує їх саме таким чином. В іншому випадку він розміщує їх по рядках одну над іншою. Елемент управління FlowLayoutPanel буде використовуватися для розміщення чотирьох кнопок. Якщо кнопки при додаванні розташовуються одна поверх іншої, переконайтеся, що перед додаванням кнопок ви вибрали FlowLayoutPanel. Хоча раніше було сказано, що кожна клітинка може містити тільки один елемент управління, нижня права комірка TableLayoutPanel містить чотири елементи управління "Кнопка". Це так, тому що можна розмістити елемент управління в осередку, яка містить інші елементи керування. Такий тип елементів управління називається "контейнер", і елемент управління FlowLayoutPanel є контейнером.
Додавання кнопок
Виберіть тільки що доданий елемент управління FlowLayoutPanel. Перейдіть до групи Стандартні елементи управління на панелі елементів і подвійним клацанням виберіть елемент Кнопка. щоб додати в елемент управління FlowLayoutPanel кнопку з ім'ям button1. Щоб додати іншу кнопку, повторіть цей крок. Середа інтегрованої розробки визначає, що вже існує кнопка з ім'ям button1 і називає наступну кнопку як button2.
Зазвичай інші кнопки додаються за допомогою панелі елементів. На цей раз виберіть button2. потім в рядку меню виберіть Правка. Копіювати (або натисніть сполучення клавіш CTRL + C). У рядку меню виберіть Правка. Вставити (або натисніть сполучення клавіш CTRL + V), щоб вставити копію кнопки. Повторіть вставку ще раз. Інтегроване середовище розробки додала кнопки button3 і button4 в FlowLayoutPanel.
Будь-який елемент управління можна копіювати і вставляти. Середа інтегрованої розробки іменує і розміщує нові елементи управління логічним чином. Якщо вставка елемента управління виконується в контейнер, середа інтегрованої розробки вибирає такий логічний область для розміщення.
Виберіть першу кнопку і встановіть для її властивості Text значення "Показати малюнок". Потім встановіть для властивості Text наступних трьох кнопок значення "Очистити малюнок", "Встановити колір фону" і "Закрити".
Наступний крок - поставити розмір кнопок і розмістити їх таким чином, щоб вони були вирівняні по правій стороні панелі. Виберіть елемент управління FlowLayoutPanel і зверніть увагу на його властивість FlowDirection. Змініть його значення на RightToLeft. Після цього дії кнопки повинні самі вирівнятися по правій стороні осередку і змінити свій порядок таким чином, щоб кнопка Показати малюнок розташовувалася з правого боку.
Якщо кнопки як і раніше залишаються в неправильному порядку, можна перетягнути кнопки навколо елемента управління FlowLayoutPanel для розташування їх у довільному порядку. Можна вибрати кнопку і перетягнути її вліво або вправо.
Натисніть кнопку Закрити. щоб вибрати її. Утримуючи клавішу CTRL, клацніть три інші кнопки, щоб всі вони були обрані. При виділених кнопках перейдіть до вікна Властивості і перейдіть його вгору до властивості AutoSize. Це властивість вказує кнопці автоматично змінювати свій розмір так, щоб весь текст міг розміститися на ній. Задайте значення true. Кнопки тепер повинні мати відповідний розмір і бути розташовані в правильному порядку. (Поки виділені всі чотири кнопки, можна одночасно змінити всі чотири властивості AutoSize). На наступному малюнку показані ці чотири кнопки.
Тепер знову запустіть програму, щоб побачити оновлену компоновку форми. При натисканні кнопок і установці прапорця поки нічого не відбувається, проте незабаром все запрацює.