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

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

Последнее обновление: 31.10.2015

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка

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

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

private void button1_Click(object sender, EventArgs e)
{
    MessageBox.Show("Hello World");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Картинка с сайта: metanit.com

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

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

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

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

Клавиши быстрого доступа

При работе с формами при использовании клавиатуры очень удобно пользоваться клавишами быстрого доступа. При нажатии на клавиатуре комбинации
клавиш At+некоторый символ, будет вызываться определенная кнопка. Например, зададим для некоторой кнопки свойство Text равное &Аватар.
Первый знак — амперсанд — определяет ту букву, которая будет подчеркнута. В данном случае надпись будет выглядеть как
Аватар. И теперь чтобы вызвать событие Click, нам достаточно нажать на комбинацию клавиш Alt+А.

Кнопки по умолчанию

Форма, на которой размещаются все элементы управления, имеет свойства, позволяющие назначать кнопку по умолчанию и кнопку отмены.

Так, свойство формы AcceptButton позволяет назначать кнопку по умолчанию, которая будет срабатывать по нажатию на клавишу Enter.

Аналогично работает свойство формы CancelButton, которое назначает кнопку отмены. Назначив такую кнопку, мы можем вызвать ее нажатие,
нажав на клавишу Esc.

кнопка

Кнопки являются одним из самых простых элементов управления и в основном используются для выполнения некоторого кода, когда пользователь хочет.

Здесь у нас действительно простой случай, показывается кнопка «Сообщение» при нажатии кнопки. Мы добавляем кнопку в форму, назовите ее cmdShowMessage используется в коде, чтобы идентифицировать объект и установить текст кнопок для отображения сообщения.

Нам просто нужно дважды щелкнуть кнопку на визуальном дизайнере, а Visual Studio создаст код для события click. Теперь нам просто нужно добавить код для MessageBox:

private void cmdShowMessage_Click(object sender, EventArgs e)
{
  MessageBox.Show("Hello world!");
}

Если мы запустим программу сейчас и нажмите кнопку, мы увидим сообщение:

Текстовое окно

Текстовые поля позволяют пользователю вводить данные в программу.

Мы собираемся изменить форму и добавить текстовое поле, чтобы окно сообщения отображало нам сообщение, которое хочет пользователь. Теперь наша форма выглядит так:

Затем измените событие нажатия кнопки, чтобы использовать текст текстового поля:

private void cmdShowMessage_Click(object sender, EventArgs e)
{
  string UserText = txtUserMessage.Text;
  MessageBox.Show(UserText);
}

Как вы можете видеть , что мы используем .Text свойство Textbox , что является текст , содержащийся в texbox.

Если мы запустим программу, мы сможем писать в текстовом поле. Когда мы нажимаем кнопку, MessageBox покажет текст, который мы написали:

Поле со списком

Комбобокс позволяет пользователю выбирать один из вариантов, предоставляемых разработчиком.

Мы собираемся изменить форму и добавить combobox, чтобы в окне сообщений отображалось сообщение, которое пользователь хочет из списка, который мы предоставим.

После добавления комбо в форму теперь добавим список опций в комбо. Для этого нам нужно изменить свойство Items :

Картинка с сайта: learntutorials.net

Теперь нам нужно изменить код события click:

private void cmdShowMessage_Click(object sender, EventArgs e)
{
  string OptionText = cboSelectOption.SelectedItem.ToString();
  MessageBox.Show(OptionText);
}

Как вы видите, мы используем свойство SelectedItem , оно содержит объект выбранной опции. Поскольку нам нужна строка для показа, и компилятор не знает, является ли объект строкой или нет, нам нужно использовать метод ToString() .

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

Чтобы получать уведомление, когда пользователь выбирает элемент из поля со списком, используйте событие SelectionChangeCommitted . Мы могли бы использовать событие SelectedIndexChanged , но это также возникает, когда мы программным образом меняем элемент select в combobox.

CheckBox

Флажок — это элемент управления, который позволяет пользователю получать boolean значения от пользователя по специальному вопросу типа «Все в порядке?». ,

Имеет событие под названием CheckedChanged , которое происходит всякий раз, когда свойство check изменяется.

Вот CheckBox, на который есть вопрос «Проверено?». ,

Мы получили этот MessageBox из события CheckedChanged ,

private void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
            bool IsChecked = checkBox1.Checked; 
            MessageBox.Show(IsChecked.ToString());
        }

Если CheckBox IsChecked переменная IsChecked будет true .

Если CheckBox не установлен — переменная IsChecked будет false .

ListBox

Listbox — это элемент управления, который может содержать коллекцию объектов. Listbox похож на Combobox но в Combobox ; Только избранные элементы видны пользователю. В Listbox ; все элементы видны пользователю.

Как добавить элементы в ListBox?

private void Form3_Load(object sender, EventArgs e)
        {
            string test = "Trial";
            string test2 = "45";
            int numberTest = 43;
            decimal decimalTest = 130;
            
            listBox1.Items.Add(test);
            listBox1.Items.Add(test2);
            listBox1.Items.Add(numberTest);
            listBox1.Items.Add(decimalTest);
        }

Выход ;

Или могут быть предоставлены datasources данных,

private void Form3_Load(object sender, EventArgs e)
        {
            List<string> TestList = new List<string> { "test1", "test2", "test3", "44", "55" };
            listBox1.DataSource = TestList;
        }

Выход;

private void Form3_Load(object sender, EventArgs e)
        {
            SqlConnection Connection = new SqlConnection("Server=serverName;Database=db;Trusted_Connection=True;"); //Connetion to MS-SQL(RDBMS)
            Connection.Open(); //Connection open
            SqlDataAdapter Adapter = new SqlDataAdapter("Select * From TestTable", Connection); // Get all records from TestTable.
            DataTable DT = new DataTable();
            Adapter.Fill(DT); // Fill records to DataTable.
            listBox1.DataSource = DT; // DataTable is the datasource.
            listBox1.ValueMember = "TestID"; 
            listBox1.DisplayMember= "TestName";
        }

Правильный вывод ;

Картинка с сайта: learntutorials.net

Предоставление внешнего источника данных sql для listbox требуется, ValueMember и DisplayMember

Если НЕ будет выглядеть так,

Полезные события;

SelectedIndex_Changed;

Определить список для предоставления источника данных

private void Form3_Load(object sender, EventArgs e)
        {
            List<string> DataList = new List<string> {"test1" , "test2" , "test3" , "44" , "45" };
            listBox1.DataSource = TestList;
        }

В дизайне формы выберите « Listbox и нажмите F4, или с правой стороны щелкните значок подсветки.

Visual studio будет генерировать listBox1_SelectedIndexChanged для codebehind.

 private void listBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            int Index = listBox1.SelectedIndex;
            label1.Text = Index.ToString();
        }

Результат SelectedIndex_Changed ; (метка внизу показывает индекс каждого выбранного элемента)

SelectedValue_Changed; (Источник данных такой же, как и сверху, и вы можете сгенерировать это событие, например SelectedIndex_Changed)

private void listBox1_SelectedValueChanged(object sender, EventArgs e)
        {
            label1.Text = listBox1.SelectedValue.ToString();
        }

Выход ;

NumericUpDown

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

Контроль выглядит;

В диапазоне Form_Load можно установить.

private void Form3_Load(object sender, EventArgs e)
    {
        numericUpDown1.Maximum = 10;
        numericUpDown1.Minimum = -10; 
    }

Выход;

UpDownAlign будет устанавливать положение стрелок;

 private void Form3_Load(object sender, EventArgs e)
        {
            numericUpDown1.UpDownAlign = LeftRightAlignment.Left;
            
        }

Выход;

UpButton() увеличивает количество элементов управления. (можно вызывать из любого места. Я использовал button чтобы позвонить).

private void button1_Click(object sender, EventArgs e)
        {
            numericUpDown1.UpButton();
        }

**Выход

DownButton() уменьшает количество элементов управления. (можно вызывать из любого места. Я использовал button чтобы вызвать ее снова.)

 private void button2_Click(object sender, EventArgs e)
        {
            numericUpDown1.DownButton();
        }

Выход;

Полезные события

ValueChanged;

Это событие будет работать при нажатии стрелки вверх или вниз.

private void numericUpDown1_ValueChanged(object sender, EventArgs e)
        {
            decimal result = numericUpDown1.Value; // it will get the current value
            if (result == numericUpDown1.Maximum) // if value equals Maximum value that we set in Form_Load.
            {
                label1.Text = result.ToString() + " MAX!"; // it will add "MAX" at the end of the label 
            }
            else if (result == numericUpDown1.Minimum) //  if value equals Minimum value that we set in Form_Load.
            {
                label1.Text = result.ToString() + " MIN!"; // it will add "MIN" at the end of the label 
            }
            else
            {
                label1.Text = result.ToString(); // If Not Max or Min, it will show only the number.
            }
        }

Выход ;

1.

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

2.

Введение в Windows Forms
• Для создания графических интерфейсов с
помощью платформы .NET применяются
разные технологии — Window Forms, WPF,
приложения для магазина Windows Store
(для ОС Windows 8/8.1/10).
• Однако наиболее простой и удобной
платформой до сих пор остается Window
Forms или формы.

3.

• Внешний вид приложения является нам
преимущественно через формы.
• Формы являются основными
строительными блоками.
• Они предоставляют контейнер для
различных элементов управления.
• А механизм событий позволяет элементам
формы отзываться на ввод пользователя, и,
таким образом, взаимодействовать с
пользователем.

4.

• Если запустить приложение, то отобразится
одна пустая форма.
• Проект с пустой формой имеет несколько
компонентов:

5.

• Стартовой точкой входа в графическое
приложение является класс Program,
расположенный в файле Program.cs:

6.

• С помощью
специального
окна Properties
(Свойства)
справа Visual
Studio
предоставляет
удобный
интерфейс для
управления
свойствами
элемента:

7.

Основные свойства:
• Name: устанавливает имя формы — точнее имя
класса, который наследуется от класса Form
• BackColor: указывает на фоновый цвет формы.
Щелкнув на это свойство, мы сможем выбрать
тот цвет, который нам подходит из списка
предложенных цветов или цветовой палитры
• BackgroundImage: указывает на фоновое
изображение формы
• BackgroundImageLayout: определяет, как
изображение, заданное в свойстве
BackgroundImage, будет располагаться на
форме.

8.

Основные свойства:
• ControlBox: указывает, отображается ли меню
формы. В данном случае под меню
понимается меню самого верхнего уровня, где
находятся иконка приложения, заголовок
формы, а также кнопки минимизации формы
и крестик. Если данное свойство имеет
значение false, то мы не увидим ни иконку, ни
крестика, с помощью которого обычно
закрывается форма
• Cursor: определяет тип курсора, который
используется на форме

9.

Основные свойства:
• Enabled: если данное свойство имеет значение
false, то она не сможет получать ввод от
пользователя, то есть мы не сможем нажать на
кнопки, ввести текст в текстовые поля и т.д.
• Font: задает шрифт для всей формы и всех
помещенных на нее элементов управления.
Однако, задав у элементов формы свой шрифт,
мы можем тем самым переопределить его
• ForeColor: цвет шрифта на форме

10.

Основные свойства:
• FormBorderStyle: указывает, как будет
отображаться граница формы и строка
заголовка. Устанавливая данное свойство в
None можно создавать внешний вид
приложения произвольной формы
• HelpButton: указывает, отображается ли
кнопка справки формы
• Icon: задает иконку формы
• Location: определяет положение
по отношению к верхнему левому углу экрана,
если для свойства StartPosition установлено
значение Manual

11.

Основные свойства:
• MaximizeBox: указывает, будет ли доступна
кнопка максимизации окна в заголовке формы
• MinimizeBox: указывает, будет ли доступна
кнопка минимизации окна
• MaximumSize: задает максимальный размер
формы
• MinimumSize: задает минимальный размер
формы
• Opacity: задает прозрачность формы

12.

Основные свойства:
• Size: определяет начальный размер формы
• StartPosition: указывает на начальную
позицию, с которой форма появляется на
экране
• Text: определяет заголовок формы
• TopMost: если данное свойство имеет
значение true, то форма всегда будет
находиться поверх других окон

13.

Основные свойства:
• Visible: видима ли форма, если мы хотим
скрыть форму от пользователя, то можем
задать данному свойству значение false
• WindowState: указывает, в каком состоянии
форма будет находиться при запуске: в
нормальном, максимизированном или
минимизированном

14.

• Чтобы
добавить еще
одну форму в
проект,
нажмем на
имя проекта в
окне Solution
Explorer
(Обозреватель
решений)
правой
кнопкой мыши
и выберем
Add(Добавить)>Windows
Form…

15.

Элемент GroupBox
• GroupBox представляет собой специальный
контейнер, который ограничен от
остальной формы границей.
• Он имеет заголовок, который
устанавливается через свойство Text.
• Чтобы сделать GroupBox без заголовка, в
качестве значения свойства Text просто
устанавливается пустая строка.

16.

Элемент GroupBox
• Нередко этот элемент используется для
группирования переключателей элементов RadioButton, так как позволяет
разграничить их группы.

17.

Элемент Panel
• Элемент Panel представляет панель и также,
как и GroupBox, объединяет элементы в
группы.
• Она может визуально сливаться с остальной
формой, если она имеет то же значение цвета
фона в свойстве BackColor, что и форма.
• Чтобы ее выделить можно кроме цвета
указать для элемента границы с помощью
свойства BorderStyle, которое по умолчанию
имеет значение None, то есть отсутствие
границ.

18.

Элемент Panel
• Также если панель имеет много элементов,
которые выходят за ее границы, мы можем
сделать прокручиваемую панель, установив
ее свойство AutoScroll в true

19.

Элемент FlowLayoutPanel
• Элемент FlowLayoutPanel является
унаследован от класса Panel, и поэтому
наследует все его свойства.
• Однако при этом добавляя
дополнительную функциональность.
• Так, этот элемент позволяет изменять
позиционирование и компоновку дочерних
элементов при изменении размеров формы
во время выполнения программы.

20.

Элемент FlowLayoutPanel
• Свойство элемента FlowDirection позволяет
задать направление, в котором направлены
дочерние элементы.
• По умолчанию имеет значение LeftToRight то есть элементы будут располагаться
начиная от левого верхнего края.
• Следующие элементы будут идти вправо.

21.

Элемент FlowLayoutPanel
• Это свойство также может принимать
следующие значения:
– RightToLeft — элементы располагаются от
правого верхнего угла в левую сторону
– TopDown — элементы располагаются от левого
верхнего угла и идут вниз
– BottomUp — элементы располагаются от левого
нижнего угла и идут вверх

22.

23.

• Элемент TableLayoutPanel также
переопределяет панель и располагает
дочерние элементы управления в виде
таблицы, где для каждого элемента имеется
своя ячейка.
• Если необходимо поместить в ячейку более
одного элемента, то в эту ячейку добавляется
другой компонент TableLayoutPanel, в который
затем вкладываются другие элементы.

24.

• Чтобы установить нужное число строки
столбцов таблицы, мы можем использовать
свойства Rows и Columns соответственно.
• Выбрав один из этих пунктов в окне Properties
(Свойства), отобразится следующее окно для
настройки столбцов и строк

25.

• В поле Size Type можно указать размер
столбцов / строк. Нам доступны три
возможные варианта:
– Absolute: задается абсолютный размер для строк
или столбцов в пикселях
– Percent: задается относительный размер в
процентах. Если нам надо создать резиновый
дизайн формы, чтобы ее строки и столбцы, а также
элементы управления в ячейках таблицы
автоматически масштабировались при изменении
размеров формы, то нам нужно использовать
именно эту опцию
– AutoSize: высота строк и ширина столбцов задается
автоматически в зависимости от размера самой
большой в строке или столбце ячейки

26.

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

27.

• В этом диалоговом окне мы также можем
добавить или удалить строки и столбцы.
• В тоже время графический дизайнер в Visual
Studio не всегда сразу отображает изменения в
таблице — добавление или удаление строк и
столбцов, изменение их размеров, поэтому,
если изменений на форме никаких не
происходит, надо ее закрыть и потом открыть
заново в графическом дизайнере.

28.

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

29.

• В окне Свойств можно вручную поправить
координаты положения элемента:

30.

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

31.

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

32.

• По умолчанию у каждого добавляемого
элемента это свойство равно Top, Left:

33.

• Можно задать четыре возможных значения
для этого свойства или их комбинацию:
– Top
– Bottom
– Left
– Right

34.

• Свойство Dock позволяет прикрепить
элемент к определенной стороне
контейнера.
• По умолчанию оно имеет значение None,
но также позволяет задать еще пять
значений:

35.

• Top: элемент прижимается к верхней границе
контейнера
• Bottom: элемент прижимается к нижней
границе контейнера
• Left: элемент прижимается к левой стороне
контейнера
• Right: элемент прикрепляется к правой
стороне контейнера
• Fill: элемент заполняет все пространство
контейнера

36.

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

37.

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

38.

• Изменим их отображение с помощью
свойства TabPages:

39.

Окно редактирования/добавления и
удаления вкладок

40.

• Каждая вкладка представляет своего рода
панель, на которую мы можем добавить
другие элементы управления, а также
заголовок, с помощью которого мы можем
переключаться по вкладкам.
• Текст заголовка задается с помощью
свойства Text.

41.

• Элемент SplitContainer позволяет создавать
две разделенные сплитером панели.
• Изменяя положение сплитера, можно
изменить размеры этих панелей.

42.

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

43.

Свойства
• Anchor: Определяет, как элемент будет
растягиваться
• BackColor: Определяет фоновый цвет элемента
• BackgroundImage: Определяет фоновое
изображение элемента
• ContextMenu: Контекстное меню, которое
открывается при нажатии на элемент правой
кнопкой мыши. Задается с помощью элемента
ContextMenu

44.

Свойства
• Cursor: Представляет, как будет отображаться
курсор мыши при наведении на элемент
• Dock: Задает расположение элемента на
форме
• Enabled: Определяет, будет ли доступен
элемент для использования. Если это свойство
имеет значение False, то элемент блокируется.
• Font: Устанавливает шрифт текста для
элемента
• ForeColor: Определяет цвет шрифта

45.

Свойства
• Location: Определяет координаты верхнего
левого угла элемента управления
• Name: Имя элемента управления
• Size: Определяет размер элемента
• Width: ширина элемента
• Height: высота элемента
• TabIndex: Определяет порядок обхода
элемента по нажатию на клавишу Tab
• Tag: Позволяет сохранять значение,
ассоциированное с этим элементом
управления

46.

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

47.

• Чтобы управлять внешним отображением
кнопки, можно использовать
свойство FlatStyle.
• Оно может принимать следующие значения:
– Flat — Кнопка имеет плоский вид
– Popup — Кнопка приобретает объемный вид при
наведении на нее указателя, в иных случаях она
имеет плоский вид
– Standard — Кнопка имеет объемный вид
(используется по умолчанию)
– System — Вид кнопки зависит от операционной
системы

48.

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

49.

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

50.

LinkLabel
• Особый тип меток представляют элементы
LinkLabel, которые предназначены для вывода
ссылок, которые аналогичны ссылкам,
размещенным на стандартных веб-станиц.
• Также, как и с обычными ссылками на вебстраницах, мы можем по отношению к данному
элементу определить три цвета:
– Свойство ActiveLinkColor задает цвет ссылки при
нажатии
– Свойство LinkColor задает цвет ссылки до нажатия, по
которой еще не было переходов
– Свойство VisitedLinkColor задает цвет ссылки, по
которой уже были переходы

51.

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

52.

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

53.

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

54.

• Кроме того, можно сделать прокрутку
текстового поля, установив для его
свойства ScrollBars одно из значений:
– None: без прокруток (по умолчанию)
– Horizontal: создает горизонтальную прокрутку при
длине строки, превышающей ширину текстового
поля
– Vertical: создает вертикальную прокрутку, если
строки не помещаются в текстовом поле
– Both: создает вертикальную и горизонтальную
прокрутку

55.

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

56.

CheckBox
• Элемент CheckBox или флажок
предназначен для установки одного из двух
значений: отмечен или не отмечен.
• Чтобы отметить флажок, надо установить у
его свойства Checked значение true.

57.

CheckBox
• Кроме свойства Checked у элемента
CheckBox имеется свойство CheckState,
которое позволяет задать для флажка одно
из трех состояний — Checked (отмечен),
Indeterminate (флажок не определен отмечен, но находится в неактивном
состоянии) и Unchecked (не отмечен)

58.

Radiobutton
• На элемент CheckBox похож элемент
RadioButton или переключатель.
• Переключатели располагаются группами, и
включение одного переключателя означает
отключение всех остальных.
• Чтобы установить у переключателя
включенное состояние, надо присвоить его
свойству Checked значение true.

59.

Radiobutton
• Для создания группы переключателей, из
которых можно бы было выбирать, надо
поместить несколько переключателей в
какой-нибудь контейнер, например, в
элементы GroupBox или Panel.
• Переключатели. находящиеся в разных
контейнерах, будут относиться к разным
группам

60.

ListBox
• Элемент ListBox представляет собой
простой список.
• Ключевым свойством этого элемента
является свойство Items, которое как раз и
хранит набор всех элементов списка.

61.

ListBox
• Элемент ListBox представляет собой простой список.
• Ключевым свойством этого элемента является
свойство Items, которое как раз и хранит набор всех
элементов списка.
• Элементы в список могут добавляться как во время
разработки, так и программным способом. В Visual
Studio в окне Properties (Свойства) для элемента
ListBox мы можем найти свойство Items. После
двойного щелчка на свойство нам отобразится окно
для добавления элементов в список:

62.

Элемент ComboBox
• Элемент ComboBox образует выпадающий
список и совмещает функциональность
компонентов ListBox и TextBox.
• Для хранения элементов списка в
ComboBox также предназначено
свойство Items.

63.

Элемент ComboBox
• Подобным образом, как и с ListBox, мы
можем в окне свойств на свойство Items и
нам отобразится окно для добавления
элементов ComboBox:

64.

Элемент CheckedListBox
• Элемент CheckedListBox представляет
симбиоз компонентов ListBox и CheckBox.
• Для каждого элемента такого списка
определено специальное поле CheckBox,
которое можно отметить.

65.

Элемент CheckedListBox
• Все элементы задаются в CheckedListBox
задаются в свойстве Items.
• Также, как и для элементов ListBox и
ComboBox, мы можем задать набор
элементов.
• По умолчанию для каждого добавляемого
нового элемента флажок не отмечен:

66.

• Чтобы поставить отметку в checkBox рядом
с элементом в списке, нам надо сначала
выделить элемент и дополнительным
щелчком уже установить флажок.
• Однако это не всегда удобно, и с помощью
свойства CheckOnClick и установке для него
значения true мы можем определить сразу
выбор элемента и установку для него
флажка в один клик.

67.

NumericUpDown
• Элемент NumericUpDown представляет
пользователю выбор числа из
определенного диапазона.
• Для определения диапазона чисел для
выбора NumericUpDown имеет два
свойства: Minimum (задает минимальное
число) и Maximum (задает максимальное
число).

68.

• Само значение элемента хранится в
свойстве Value:

69.

• По умолчанию элемент отображает
десятичные числа.
• Однако если мы установим его
свойство Hexadecimal равным true, то
элемент будет отображать все числа в
шестнадцатеричной системе.

70.

DomainUpDown
• Элемент DomainUpDown предназначен для
ввода текстовой информации.
• Он имеет текстовое поле для ввода строки
и две стрелки для перемещения по списку
строк:

71.

• Список для DomainUpDown задается с
помощью свойства Items. Список можно сразу
упорядочить по алфавиту. Для этого надо
свойству Sorted присвоить значение true.
• Чтобы можно было циклично перемещаться
по списку, то есть при достижении конца или
начала списка его просмотр начинался с
первого или последнего элемента, надо
установить для свойства Wrap значение true.

72.

ImageList
• ImageList не является визуальным
элементом управления, однако он
представляет компонент, который
используется элементами управления.
• Он определяет набор изображений,
который могут использовать такие
элементы, как ListView или TreeView.

73.

ImageList
• Чтобы его добавить в проект, его также
можно перенести на форму с Панели
Инструментов:

74.

• Так как компонент не является визуальным
элементом, то мы увидим его под формой.
• Ключевым свойством ImageList является
свойство Images, которое задает коллекцию
изображений.

75.

ListView
• Элемент ListView представляет список, но с
более расширенными возможностями, чем
ListBox.
• В ListView можно отображать сложные
данные в различных стобцах, можно
задавать данным изображения и
пиктограммы.

76.

• Все элементы, как и в других списковых
визуальных компонентах, задаются с
помощью свойства Items.
• Но в отличие от ListBox или ComboBox, если
мы через панель Свойств откроем окно
редактирования элементов ListView:

77.

78.

TreeView
• TreeView представляет визуальный элемент
в виде дерева.
• Дерево содержит узлы, которые
представляют объекты TreeNode. Узлы
могут содержать другие подузлы и могут
находиться как скрытом, так и в раскрытом
состоянии.
• Все узлы содержатся в свойстве Nodes.

79.

Если мы нажем в панели Свойств на
свойство Nodes, то нам откроется окно
редактирования узлов TreeView:

80.

TrackBar
• TrackBar представляет собой элемент,
который с помощью перемещения
ползунка позволяет вводить числовые
значения.

81.

Timer
• Timer является компонентом для запуска
действий, повторяющихся через
определенный промежуток времени. Хотя
он не является визуальным элементом, но
его также можно перетащить с Панели
Инструментов на форму:

82.

Индикатор прогресса ProgressBar
• Элемент ProgressBar служит для того, чтобы
дать пользователю информацию о ходе
выполнения какой-либо задачи.

83.

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

84.

MonthCalendar
• С помощью MonthCalendar также можно
выбрать дату, только в данном случае этот
элемент представляет сам календарь,
который не надо раскрывать:

85.

Элемент PictureBox
• PictureBox предназначен для показа изображений.
• Он позволяет отобразить файлы в формате bmp, jpg, gif,
а также метафайлы ищображений и иконки.
• Для установки изображения в PictureBox можно
использовать ряд свойств:
– Image: устанавливает объект типа Image
– ImageLocation: устанавливает путь к изображению на диске
или в интернете
– InitialImage: некоторое начальное изображение, которое
будет отображаться во время загрузки главного
изображения, которое хранится в свойстве Image
– ErrorImage: изображение, которое отображается, если
основное изображение не удалось загрузить в PictureBox

86.

• Чтобы установить изображение в Visual
Studio, надо в панели Свойств PictureBox
выбрать свойство Image.
• В этом случае нам откроется окно импорта
изображения в проект, где мы собственно и
сможем выбрать нужное изображение на
компьютере и установить его для
PictureBox:

87.

88.

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

89.

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

Картинка с сайта: multiurok.ru

Windows Form. Элементы управления для создания интерфейсов для приложений на языке С#

Картинка с сайта: multiurok.ru

• Элементы управления представляют собой визуальные классы, которые получают введенные пользователем данные и могут инициировать различные события. Все элементы управления наследуются от класса Control и поэтому имеют ряд общих свойств:
• Anchor : Определяет, как элемент будет растягиваться
• BackColor : Определяет фоновый цвет элемента
• BackgroundImage : Определяет фоновое изображение элемента
• ContextMenu : Контекстное меню, которое открывается при нажатии на элемент правой кнопкой мыши. Задается с помощью элемента ContextMenu
• Cursor : Представляет, как будет отображаться курсор мыши при наведении на элемент
• Dock : Задает расположение элемента на форме
• Enabled : Определяет, будет ли доступен элемент для использования. Если это свойство имеет значение False, то элемент блокируется.

Картинка с сайта: multiurok.ru

• Font : Устанавливает шрифт текста для элемента
• ForeColor : Определяет цвет шрифта
• Location : Определяет координаты верхнего левого угла элемента управления
• Name : Имя элемента управления
• Size : Определяет размер элемента
• Width : ширина элемента
• Height : высота элемента
• TabIndex : Определяет порядок обхода элемента по нажатию на клавишу Tab
• Tag : Позволяет сохранять значение, ассоциированное с этим элементом управления

Кнопка

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

Картинка с сайта: multiurok.ru

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

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

• Flat  — Кнопка имеет плоский вид
• Popup  — Кнопка приобретает объемный вид при наведении на нее указателя, в иных случаях она имеет плоский вид
• Standard  — Кнопка имеет объемный вид (используется по умолчанию)
• System  — Вид кнопки зависит от операционной системы

Картинка с сайта: multiurok.ru

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

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

• Overlay : текст накладывается на изображение
• ImageAboveText : изображение располагается над текстом
• TextAboveImage : текст располагается над изображением
• ImageBeforeText : изображение располагается перед текстом
• TextBeforeImage : текст располагается перед изображением

Картинка с сайта: multiurok.ru

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

Картинка с сайта: multiurok.ru

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

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

Картинка с сайта: multiurok.ru

Доступны 9 вариантов, с помощью которых можно прикрепить изображение к определенной стороне кнопки. Установим значение по умолчанию –МiddleCenter (позиционирование по центру).

Далее будем использовать свойство ТextImageRelation. Для него установим

значение ImageBeforeText. Получим кнопку, где сразу после изображения идет надпись на кнопке:

Картинка с сайта: multiurok.ru

Клавиши быстрого доступа

При работе с формами при использовании клавиатуры очень удобно пользоваться клавишами быстрого доступа. При нажатии на клавиатуре комбинации клавиш Alt+некоторый символ, будет вызываться определенная кнопка. Например, зададим для некоторой кнопки свойствo Text равное &Аватар/ Первый знак — амперсанд — определяет ту букву, которая будет подчеркнута. В данном случае надпись будет выглядеть как Аватар. И теперь чтобы вызвать событие Click достаточно нажать на комбинацию клавиш Alt+A.

Кнопки по умолчанию

Форма, на которой размещаются все элементы управления, имеет свойства, позволяющие назначать кнопку по умолчанию и кнопку отмены.

Так, свойство формы  AcceptButton позволяет назначать кнопку по умолчанию, которая будет срабатывать по нажатию на клавишу Enter. Аналогично работает свойство формы CancelButton, которое назначает кнопку отмены. Назначив такую кнопку, мы можем вызвать ее нажатие, нажав на клавишу Esc/

Картинка с сайта: multiurok.ru

LinkLabel

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

для вывода ссылок, которые аналогичны ссылкам, размещенным на

стандартных веб-станиц.

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

данному элементу определить три цвета:

• Свойство  ActiveLinkColo r  задает цвет ссылки при нажатии
• Свойство   LinkColo r задает цвет ссылки до нажатия, по которой еще не было переходов
• Свойство  V isitedLinkColo r  задает цвет ссылки, по которой уже были переходы
• Кроме цвета ссылки для данного элемента можно задать свойство LinkBehavior , которое управляет поведением ссылки. 

Картинка с сайта: multiurok.ru

Это свойство принимает четыре возможных значения:

• SystemDefault : для ссылки устанавливаются системные настройки
• AlwaysUnderlin e : ссылка всегда подчеркивается
• HoverUnderlin e : ссылка подчеркивается только при наведении на нее курсора мыши
• NeverUnderlin e : ссылка никогда не подчеркивается

По умолчанию весь текст на данном элементе считается ссылкой. C

помощью свойства  LinkAre a  можно изменить область ссылки.

Например , если не включать в ссылку первые шесть символов, то нужно

задать подсвойство  Start :

Картинка с сайта: multiurok.ru

Картинка с сайта: multiurok.ru

Чтобы выполнить переход по ссылке по нажатию на нее, надо дополнительно

написать код. Данный код должен обрабатывать событие LinkClicked, которое

есть у элемента LinkLabel.

Например, если на форме есть элемент ссылки называется linkLabel1, который

содержит некоторую ссылку:

Картинка с сайта: multiurok.ru

Чтобы перейти по ссылке, зададим обработчик LinkClicked:

public partial class Form1 : Form

{

     public Form1()

     {

         InitializeComponent();

         // задаем обработчик события

         linkLabel1.LinkClicked += linkLabel1_LinkClicked;

     }

     private void linkLabel1_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)

     {

         System.Diagnostics.Process.Start(» http://metanit.com «);

     }

}

Картинка с сайта: multiurok.ru

Метод System.Diagnostics.Process.Start() откроет данную ссылку в

веб-браузере, который установлен в системе браузером по умолчанию .

Картинка с сайта: multiurok.ru

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

Для ввода и редактирования текста предназначены текстовые поля – элемент

TextBox. Так же как и у элемента Label текст элемента TextBox можно

установить или получить с помощью свойства Text.

По умолчанию при переносе элемента с панели инструментов создается

однострочное текстовое поле. Для отображения больших объемов

информации в текстовом поле нужно использовать его

свойства Multiline и ScrollBars. При установке для свойства Multiline значения

true, все избыточные символы, которые выходят за границы поля, будут

переноситься на новую строку.

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

свойства ScrollBars одно из значений:

Картинка с сайта: multiurok.ru

• None : без прокруток (по умолчанию)
• Horizontal : создает горизонтальную прокрутку при длине строки, превышающей ширину текстового поля
• Vertical : создает вертикальную прокрутку, если строки не помещаются в текстовом поле
• Both : создает вертикальную и горизонтальную прокрутку

Картинка с сайта: multiurok.ru

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

Элемент TextBox обладает достаточными возможностями для создания

автозаполняемого поля. Для этого нам надо привязать

свойство  AutoCompleteCustomSource  элемента TextBox к некоторой

коллекции, из которой берутся данные для заполнения поля.

Добавим на форму текстовое поле и пропишем в код события загрузки

следующие строки :

public partial class Form1 : Form

{

     public Form1()

     {

         InitializeComponent();

         AutoCompleteStringCollection source = new AutoCompleteStringCollection()

         {

Картинка с сайта: multiurok.ru

         «Кузнецов»,

             «Иванов»,

             «Петров»,

             «Кустов»

         };

         textBox1.AutoCompleteCustomSource = source;

         textBox1.AutoCompleteMode = AutoCompleteMode.SuggestAppend;

         textBox1.AutoCompleteSource = AutoCompleteSource.CustomSource;

     }

}

Картинка с сайта: multiurok.ru

• Режим автодополнения, представленный свойством , имеет несколько возможных значений:
• None : отсутствие автодополнения
• Suggest : предлагает варианты для ввода, но не дополняет
• Append : дополняет введенное значение до строки из списка, но не предлагает варианты для выбора
• SuggestAppend : одновременно и предлагает варианты для автодополнения, и дополняет введенное пользователем значение

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

Чтобы текст в элементе TextBox переносился по словам, надо установить

свойство  WordWrap  равным true. То есть если одно слово не умещается на

строке, то но переносится на следующую. Данное свойство будет работать

только для многострочных текстовых полей.

Картинка с сайта: multiurok.ru

Ввод пароля

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

поле для ввода пароля. Так, для этого надо использовать  PasswordChar  и

UseSystemPasswordChar  .

Свойство PasswordChar по умолчанию не имеет значение, если мы установим в

качестве него какой-нибудь символ, то этот символ будут отображаться при

вводе любых символов в текстовое поле.

Свойство UseSystemPasswordChar имеет похожее действие. Если установить

его значение в true, то вместо введенных символов в текстовом поле будет

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

Картинка с сайта: multiurok.ru

Событие TextChanged

Событие TextChanged срабатывает при изменении текста в элементе.

Например, поместим на форму кроме текстового поля метку и сделаем так,

чтобы при изменении текста в текстовом поле также менялся текст на

метке:

Картинка с сайта: multiurok.ru

public partial class Form1 : Form

{

     public Form1()

     {

         InitializeComponent();

         textBox1.TextChanged += textBox1_TextChanged;

     }

     private void textBox1_TextChanged(object sender, EventArgs e)

     {

         label1.Text = textBox1.Text;

     }

}

Картинка с сайта: multiurok.ru

• https://metanit.com/sharp/windowsforms/4.8.php

Картинка с сайта: multiurok.ru

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