Размеры элементов и их позиционирование в контейнере

Позиционирование

 

Для каждого элемента управления мы можем определить свойство Location, которое задает координаты верхнего левого угла элемента относительно контейнера. При переносе элемента с панели инструментов на форму это свойство устанавливается автоматически. Однако потом в окне Свойств мы можем вручную поправить координаты положения элемента:

 

 

Также мы можем установить позицию элемента в коде:

 

 

Установка размеров

 

С помощью свойства Size можно задать размеры элемента:

 

 

Дополнительные свойства MaximumSize и MinimumSize позволяют ограничить минимальный и максимальный размеры.

 

Установка свойств в коде:

 

 

 

Панель вкладок TabControl и SplitContainer

TabControl

Элемент TabControl позволяет создать элемент управления с несколькими вкладками. И каждая вкладка будет хранить некоторый набор других элементов управления, как кнопки, текстовые поля и др. Каждая вкладка представлена классом TabPage.

 

Чтобы настроить вкладки элемента TabControl используем свойство TabPages. При переносе элемента TabControl с панели инструментов на форму по умолчанию создаются две вкладки - tabPage1 и tabPage2. Изменим их отображение с помощью свойства TabPages:

 

 

 

Управление вкладками в коде

 

Для добавления новой вкладки нам надо ее создать и добавить в коллекцию tabControl1.TabPages с помощью метода Add:

 

 

Элементы управления

Элементы управления представляют собой визуальные классы, которые получают введенные пользователем данные и могут инициировать различные события. Все элементы управления наследуются от класса Control и поэтому имеют ряд общих свойств:

 

Anchor: Определяет, как элемент будет растягиваться

 

BackColor: Определяет фоновый цвет элемента

 

BackgroundImage: Определяет фоновое изображение элемента

 

ContextMenu: Контекстное меню, которое открывается при нажатии на элемент правой кнопкой мыши. Задается с помощью элемента ContextMenu

 

Cursor: Представляет, как будет отображаться курсор мыши при наведении на элемент

 

Dock: Задает расположение элемента на форме

 

Enabled: Определяет, будет ли доступен элемент для использования. Если это свойство имеет значение False, то элемент блокируется.

 

Font: Устанавливает шрифт текста для элемента

 

ForeColor: Определяет цвет шрифта

 

Location: Определяет координаты верхнего левого угла элемента управления

 

Name: Имя элемента управления

 

Size: Определяет размер элемента

 

Width: ширина элемента

 

Height: высота элемента

 

TabIndex: Определяет порядок обхода элемента по нажатию на клавишу Tab

 

Tag: Позволяет сохранять значение, ассоциированное с этим элементом управления

 

КНОПКА

 

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

 

При нажатии на кнопку на форме в редакторе Visual Studio мы по умолчанию попадаем в код обработчика события Click, который будет выполняться при нажатии.

 

Оформление кнопки

Чтобы управлять внешним отображением кнопки, можно использовать свойство FlatStyle. Оно может принимать следующие значения:

 

Flat - Кнопка имеет плоский вид

 

Popup - Кнопка приобретает объемный вид при наведении на нее указателя, в иных случаях она имеет плоский вид

 

Standard - Кнопка имеет объемный вид (используется по умолчанию)

 

System - Вид кнопки зависит от операционной системы

 

Изображение на кнопке

Как и для многих элементов управления, для кнопки можно задавать изображение с помощью свойства BackgroundImage. Однако мы можем также управлять размещением текста и изображения на кнопки. Для этого надо использовать свойство TextImageRelation. Оно приобретает следующие значения:

 

Overlay: текст накладывается на изображение

 

ImageAboveText: изображение располагается над текстом

 

TextAboveImage: текст располагается над изображением

 

ImageBeforeText: изображение располагается перед текстом

 

TextBeforeImage: текст располагается перед изображением

 

Например, установим для кнопки изображение. Для этого выберем кнопку и в окне Свойств нажмем на поле Image (не путать с BackgroundImage). Нам откроется диалоговое окно установки изображения:

 

В этом окне выберем опцию Локальный ресурс и нажмем на кнопку Импорт, после чего нам откроется диалоговое окно для выбора файла изображения.

 

После выбора изображения мы можем установить свойство ImageAlign, которое управляет позиционированием изображения на кнопке:

 

 

Нам доступны 9 вариантов, с помощью которых мы можем прикрепить изображение к определенной стороне кнопки. Оставим здесь значение по умолчанию - MiddleCenter, то есть позиционирование по центру.

 

Затем перейдем к свойству TextImageRelation и установим для него значение ImageBeforeText. В итоге мы получим кнопку, где сразу после изображения идет надпись на кнопке:

 

 

 

Метки и ссылки

Label

Для отображения простого текста на форме, доступного только для чтения, служит элемент Label. Чтобы задать отображаемый текст метки, надо установить свойство Text элемента.

 

LinkLabel

Особый тип меток представляют элементы LinkLabel, которые предназначены для вывода ссылок, которые аналогичны ссылкам, размещенным на стандартных веб-станиц.

 

Также, как и с обычными ссылками на веб-страницах, мы можем по отношению к данному элементу определить три цвета:

 

Свойство ActiveLinkColor задает цвет ссылки при нажатии

 

Свойство LinkColor задает цвет ссылки до нажатия, по которой еще не было переходов

 

Свойство VisitedLinkColor задает цвет ссылки, по которой уже были переходы

 

Кроме цвета ссылки для данного элемента мы можем задать свойство LinkBehavior, которое управляет поведением ссылки. Это свойство принимает четыре возможных значения:

 

SystemDefault: для ссылки устанавливаются системные настройки

 

AlwaysUnderline: ссылка всегда подчеркивается

 

HoverUnderline: ссылка подчеркивается только при наведении на нее курсора мыши

 

NeverUnderline: ссылка никогда не подчеркивается

 

По умолчанию весь текст на данном элементе считается ссылкой. Однако с помощью свойства LinkArea мы можем изменить область ссылки. Например, мы не хотим включать в ссылку первые шесть символов. Для этого задаем подсвойство Start:

 

 

Чтобы выполнить переход по ссылке по нажатию на нее, надо дополнительно написать код. Данный код должен обрабатывать событие LinkClicked, которое есть у элемента LinkLabel. Например, пусть у нас на форме есть элемент ссылки называется linkLabel1 и который содержит некоторую ссылку:

 

Чтобы перейти по ссылке надо создать обработчик

 

Метод System.Diagnostics.Process.Start() откроет данную ссылку в веб-браузере, который установлен в системе браузером по умолчанию.

 

 

Текстовое поле TextBox

Для ввода и редактирования текста предназначены текстовые поля - элемент TextBox. Так же как и у элемента Label текст элемента TextBox можно установить или получить с помощью свойства Text.

 

По умолчанию при переносе элемента с панели инструментов создается однострочное текстовое поле. Для отображения больших объемов информации в текстовом поле нужно использовать его свойства Multiline и ScrollBars. При установке для свойства Multiline значения true, все избыточные символы, которые выходят за границы поля, будут переноситься на новую строку.

 

Кроме того, можно сделать прокрутку текстового поля, установив для его свойства ScrollBars одно из значений:

 

None: без прокруток (по умолчанию)

 

Horizontal: создает горизонтальную прокрутку при длине строки, превышающей ширину текстового поля

 

Vertical: создает вертикальную прокрутку, если строки не помещаются в текстовом поле

 

Both: создает вертикальную и горизонтальную прокрутку

 

 

Автозаполнение текстового поля

 

Элемент TextBox обладает достаточными возможностями для создания автозаполняемого поля. Для этого нам надо привязать свойство AutoCompleteCustomSource элемента TextBox к некоторой коллекции, из которой берутся данные для заполнения поля.

 

Итак, добавим на форму текстовое поле и пропишем в код события загрузки следующие строки:

 

 

 

Режим автодополнения, представленный свойством AutoCompleteMode, имеет несколько возможных значений:

 

None: отсутствие автодополнения

 

Suggest: предлагает варианты для ввода, но не дополняет

 

Append: дополняет введенное значение до строки из списка, но не предлагает варианты для выбора

 

SuggestAppend: одновременно и предлагает варианты для автодополнения, и дополняет введенное пользователем значение

 

Перенос по словам

Чтобы текст в элементе TextBox переносился по словам, надо установить свойство WordWrap равным true. То есть если одно слово не умещается на строке, то но переносится на следующую. Данное свойство будет работать только для многострочных текстовых полей.

 

Ввод пароля

Также данный элемент имеет свойства, которые позволяют сделать из него поле для ввода пароля. Так, для этого надо использовать PasswordChar и UseSystemPasswordChar.

 

Свойство PasswordChar по умолчанию не имеет значение, если мы установим в качестве него какой-нибудь символ, то этот символ будут отображаться при вводе любых символов в текстовое поле.

 

Свойство UseSystemPasswordChar имеет похожее действие. Если мы установим его значение в true, то вместо введенных символов в текстовом поле будет отображаться знак пароля, принятый в системе, например, точка.

 

Событие TextChanged

Из всех событий элемента TextBox следует отметить событие TextChanged, которое срабатывает при изменении текста в элементе. Например, поместим на форму кроме текстового поля метку и сделаем так, чтобы при изменении текста в текстовом поле также менялся текст на метке:

 

 

 

Элемент MaskedTextBox

Элемент MaskedTextBox по сути представляет обычное текстовое поле. Однако данные элемент позволяет контролировать ввод пользователя и проверять его автоматически на наличие ошибок.

 

Чтобы контролировать вводимые в поле символы, надо задать маску. Для задания маски можно применять следующие символы:

 

0: Позволяет вводить только цифры

 

9: Позволяет вводить цифры и пробелы

 

#: Позволяет вводить цифры, пробелы и знаки '+' и '-'

 

L: Позволяет вводить только буквенные символы

 

?: Позволяет вводить дополнительные необязательные буквенные символы

 

A: Позволяет вводить буквенные и цифровые символы

 

.: Задает позицию разделителя целой и дробной части

 

,: Используется для разделения разрядов в целой части числа

 

:: Используется в временных промежутках - разделяет часы, минуты и секунды

 

/: Используется для разделения дат

 

$: Используется в качестве символа валюты

 

Чтобы задать маску, надо установить свойство Mask элемента. Найдя это свойство в окне свойств(Porperties), нажмем на него и нам отобразится окно для задания одного из стандартных шаблонов маски. В частности мы можем выбрать Phone number (Телефонный номер), который подразумевает ввод в текстовое поле только телефонного номера:

 

 

Теперь при запуске мы сможем ввести в текстовое поле только цифры, получив в итоге телефонный номер.

 

Теперь сделаем свою маску. Например, создадим маску для ввода инициалов имени и отчества и фамилий ограниченной длины в текстовое поле. Для этого присвоим свойству Mask значение L.L.L?????????. Тогда ввод в текстовое поле будет выглядеть следующим образом:

 

 

Данный элемент также представляет нам ряд свойств, которые можно использовать для управления вводом. Так, свойство BeepOnError при установке значения true подает звуковой сигнал при введении некорректного символа.

 

Свойство HidePromptOnLeave при установке в true при потери текстовым полем фокуса скрывает, указанные в PromptChar

 

Свойство PromptChar указывает на символ, который отображается в поле на месте ввода символов. По умолчанию стоит знак подчеркивания.

 

Свойство AsciiOnly при значении true позволяет вводить только asci-символы, то есть символы из диапазона A-Z и a-z.