как сделать кнопку в windows forms
Элементы управления
Элементы управления представляют собой визуальные классы, которые получают введенные пользователем данные и могут инициировать различные события. Все элементы управления наследуются от класса Control и поэтому имеют ряд общих свойств:
Anchor : Определяет, как элемент будет растягиваться
BackColor : Определяет фоновый цвет элемента
BackgroundImage : Определяет фоновое изображение элемента
ContextMenu : Контекстное меню, которое открывается при нажатии на элемент правой кнопкой мыши. Задается с помощью элемента ContextMenu
Cursor : Представляет, как будет отображаться курсор мыши при наведении на элемент
Dock : Задает расположение элемента на форме
Enabled : Определяет, будет ли доступен элемент для использования. Если это свойство имеет значение False, то элемент блокируется.
Font : Устанавливает шрифт текста для элемента
ForeColor : Определяет цвет шрифта
Location : Определяет координаты верхнего левого угла элемента управления
Name : Имя элемента управления
Size : Определяет размер элемента
Width : ширина элемента
Height : высота элемента
TabIndex : Определяет порядок обхода элемента по нажатию на клавишу Tab
Tag : Позволяет сохранять значение, ассоциированное с этим элементом управления
Кнопка
Наиболее часто используемым элементом управления является кнопка. Обрабатывая событие нажатия кнопки, мы может производить те или иные действия.
Оформление кнопки
Чтобы управлять внешним отображением кнопки, можно использовать свойство FlatStyle. Оно может принимать следующие значения:
Изображение на кнопке
Overlay : текст накладывается на изображение
ImageAboveText : изображение располагается над текстом
TextAboveImage : текст располагается над изображением
ImageBeforeText : изображение располагается перед текстом
TextBeforeImage : текст располагается перед изображением
Например, установим для кнопки изображение. Для этого выберем кнопку и в окне Свойств нажмем на поле Image (не путать с BackgroundImage). Нам откроется диалоговое окно установи изображения:
Клавиши быстрого доступа
Кнопки по умолчанию
Форма, на которой размещаются все элементы управления, имеет свойства, позволяющие назначать кнопку по умолчанию и кнопку отмены.
Так, свойство формы AcceptButton позволяет назначать кнопку по умолчанию, которая будет срабатывать по нажатию на клавишу Enter.
Большинство форм создается путем добавления элементов управления на поверхность формы для определения пользовательского интерфейса. Элемент управления — это компонент в форме, используемый для вывода информации или ввода данных пользователем.
Основной способ добавления элемента управления в форму — с помощью конструктора Visual Studio, но вы также можете управлять элементами управления в форме во время выполнения с помощью кода.
Добавление с помощью конструктора
Для создания форм в Visual Studio используется конструктор форм. На панели «Элементы управления» представлен список всех элементов управления, доступных для приложения. Элементы управления можно добавлять с панели двумя способами:
Добавление элемента управления двойным щелчком
При двойном щелчке элемента управления он автоматически добавляется в текущую открытую форму с параметрами по умолчанию.
Добавление элемента управления путем рисования
Выберите элемент управления, щелкнув его. В форме выберите область путем перетаскивания указателя мыши. Элемент управления будет помещен в соответствии с размером выбранного региона.
Добавление с помощью кода
Элементы управления можно создавать и добавлять в форму во время выполнения с помощью коллекции Controls формы. Эту коллекцию можно также использовать для удаления элементов управления из формы.
Следующий код добавляет и размещает два элемента управления, Label и TextBox:
Шаг 5. Добавление элементов управления в форму
На данном шаге производится добавление в форму элемента управления PictureBox и элемента управления CheckBox. Затем вы добавляете в форму элементы управления Button.
Добавление элементов управления в форму
Перейдите на вкладку Панель элементов в левой части интегрированной среды разработки Visual Studio (или нажмите клавиши CTRL+ALT+X) и разверните группу Стандартные элементы управления. В результате этого действия отображается большая часть стандартных элементов управления, которые можно увидеть в формах.
Дважды щелкните элемент PictureBox, чтобы добавить в форму элемент управления PictureBox. Поскольку элемент управления TableLayoutPanel закреплен так, чтобы заполнять собой форму, интегрированная среда разработки добавляет элемент управления PictureBox в первую пустую ячейку (левый верхний угол).
Щелкните новый элемент управления PictureBox, чтобы выбрать его, а затем щелкните черный треугольник на новом элементе управления PictureBox, чтобы отобразить его список задач, как показано на снимке экрана ниже.
****Задачи элемента управления _ _PictureBox
Если на TableLayoutPanel случайно был добавлен элемент управления неправильного типа, то его можно удалить. Щелкните элемент управления правой кнопкой мыши и в контекстном меню выберите Удалить. Удалять элементы управления из формы также можно с помощью строки меню. В строке меню выберите Правка > Отменить или Правка > Удалить.
В меню Задачи элемента управления PictureBox для элемента управления PictureBox выберите ссылку Закрепить в родительском контейнере. В результате этого действия у элемента управления 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, чтобы добавить новый элемент управления в последнюю ячейку (справа внизу). Затем закрепите элемент управления 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.) На рисунке ниже показаны эти четыре кнопки.
Средство просмотра изображений _ _с четырьмя кнопками
Теперь снова запустите программу, чтобы увидеть изменения.
Обратите внимание, что при нажатии кнопок и установке флажка пока ничего не происходит,—однако вскоре все заработает.
Использование visual C# для программного добавления элементов управления в Windows форм во время запуска
Эта статья помогает программным образом добавлять и настраивать элементы управления в форме Windows с помощью Visual C#.
Оригинальная версия продукта: Visual C #
Исходный номер КБ: 319266
Сводка
В этой пошаговой статье показано, как программировать добавление и настройку нескольких часто используемых элементов управления в Windows форме. Обработка событий была пропущена из примера кода.
Требования
В этой статье предполагается, что вы знакомы со следующими разделами:
Создание приложения Windows Forms
Дважды щелкните Form1 для создания и просмотра Form1_Load процедуры события.
Добавьте переменные частных экземпляров в класс для работы с Form1 общими Windows управления. Класс Form1 начинается следующим образом:
Код следует изменить в Visual Studio. При создании проекта Windows Forms visual C# по умолчанию добавляет одну форму в проект. Эта форма называется Form1. Два файла, которые представляют форму, называются Form1.cs и Form1.designer.cs. Вы пишете код в Form1.cs. Файл Designer.cs — это Windows конструктор форм, который реализует все действия, выполняемые путем добавления элементов управления. Дополнительные сведения о конструкторе Windows форм в visual C# см. в Project (Visual C#).
Настройка свойств формы и управления
Найдите процедуру события и добавьте в процедуру следующий код, чтобы настроить внешний вид Form1_Load управления формой:
Добавьте следующий код в процедуру события, чтобы настроить внешний вид кнопки Form1_Load управления:
Добавьте следующий код, чтобы настроить внешний вид управления TextBox Form1_Load в:
Добавьте следующий код, чтобы настроить внешний вид управления ListBox Form1_Load в:
Добавьте следующий код, чтобы настроить внешний вид управления CheckBox Form1_Load в:
Добавьте следующий код, чтобы настроить внешний вид управления Меткой Form1_Load в:
Добавление элементов управления в форму
Добавьте следующий код, чтобы добавить каждый объект в массив формы в Controls Form1_Load конце:
Убедитесь, что он работает
Чтобы убедиться, что пример работает, выберите Пуск в меню Отлаговка.
Ссылки
Шаг 1. Создание проекта и добавление в форму элементов управления Label
Первые шаги разработки этой головоломки предполагают создание проекта, добавление меток, кнопки и других элементов управления в форму. Также вам предстоит задать свойства для каждого добавляемого элемента управления. Проект будет содержать форму, элементы управления и добавленный в следующих уроках учебника код. Кнопка запускает головоломку, метки служат для отображения задач, входящих в головоломку, а остальные элементы управления служат для отображения ответов и времени, оставшегося на решение головоломки.
Этот раздел входит в серию учебников, посвященных основам написания кода. Общие сведения об учебнике см. в разделе Руководство 2. Создание ограниченной по времени математической головоломки.
Создание проекта для формы
В строке меню щелкните Файл > Создать > Проект.
Выберите Visual C# или Visual Basic в левой области диалогового окна Новый проект, а затем — Классическое приложение Windows.
В списке шаблонов выберите шаблон Приложение Windows Forms (.NET Framework), назовите его MathQuiz, а затем нажмите кнопку ОК.
Появится форма с именем Form1.cs или Form1.vb, в зависимости от выбранного языка программирования.
Дополнительные сведения см. в разделе Установка Visual Studio.
На начальном экране выберите Создать проект.
В поле поиска окна Создание проекта введите Windows Forms. Затем в списке Тип проекта выберите Рабочий стол.
Применив фильтр Тип проекта, выберите шаблон Приложение Windows Forms (.NET Framework) для C# или Visual Basic и нажмите кнопку Далее.
Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.
Затем нажмите кнопку Изменить в Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. Выберите Продолжить, чтобы установить рабочую нагрузку.
В поле Имя проекта окна Настроить новый проект введите MathQuiz. Затем нажмите Создать.
Задание свойств формы
В Visual Studio выберите форму (Form1.cs или Form1.vb, в зависимости от используемого языка программирования), а затем измените ее свойство Text на Математическая головоломка.
Окно Свойства содержит свойства формы.
Измените размер формы на 500 пикселей в ширину и 400 пикселей в высоту.
Изменить размер формы можно, перетаскивая ее границы до тех пор, пока в левом нижнем углу интегрированной среды разработки не появится нужный размер. Другой вариант — изменить значения свойства Size.
Измените значение свойства FormBorderStyle на Fixed3D, а свойству MaximizeBox установите значение False.
Эти значения не позволят игрокам изменять размеры формы.
Создание поля «Оставшееся время»
Добавьте элемент управления Label из панели элементов, затем установите для его свойства (Name) значение timeLabel.
Эта метка станет полем в правом верхнем углу формы, в котором будет отображаться количество секунд, оставшихся на решение головоломки.
Измените значение свойства AutoSize на False, чтобы можно было изменить размер поля.
Измените значение свойства BorderStyle на FixedSingle для отрисовки линии вокруг поля.
Установите значение свойства Size равным 200, 30.
Переместите метку в правый верхний угол формы, где при этом появятся синие линии-разделители.
Эти линии помогают выравнивать элементы управления в форме.
В окне Свойства выберите свойство Text и нажмите клавишу BACKSPACE, чтобы удалить его значение.
Нажмите знак плюса ( + ) рядом со свойством Font и измените значение свойства Size на 15,75.
Можно изменить несколько свойств шрифта, как показано на снимке экрана ниже.
Добавьте еще один элемент управления Label из панели элементов и установите для его размера шрифта значение 15,75.
Задайте свойству Text значение Оставшееся время.
Переместите метку так, чтобы она находилась чуть левее метки timeLabel.
Добавление элементов управления для задачи на сложение
Добавьте элемент управления Label из панели элементов и установите для его свойства Text значение ? (вопросительный знак).
Задайте свойству AutoSize значение False.
Установите значение свойства Size равным 60, 50.
Установите размер шрифта равным 18.
Установите для свойства TextAlign значение MiddleCenter.
Установите для свойства Location значение 50, 75, чтобы поместить элемент управления в нужное место в форме.
Установите для свойства (Name) значение plusLeftLabel.
Выберите метку plusLeftLabel, а затем либо нажмите клавиши CTRL+C, либо выберите пункт Копировать в меню Правка.
Вставьте метку три раза, нажимая клавиши CTRL+V или выбирая Вставить в меню Правка.
Разместите три новые метки так, чтобы они располагались в ряд справа от метки plusLeftLabel.
Для выравнивания меток и регулировки промежутков между ними можно пользоваться линиями-разделителями.
Установите для свойства Text второй метки значение + (знак плюса).
Установите для свойства (Name) третьей метки значение plusRightLabel.
Установите для свойства Text четвертой метки значение = (знак равенства).
Добавьте элемент управления NumericUpDown из панели элементов, установите его размер шрифта равным 18, а его ширину — равной 100.
Подробнее этот вид элементов управления мы рассмотрим позже.
Выровняйте элемент управления NumericUpDown по элементам управления Label для задачи на сложение.
Измените значение свойства (Name) элемента управления NumericUpDown на sum.
Первая строка создана, как показано на иллюстрации ниже.
Добавление элементов управления для задач на вычитание, умножение и деление
Скопируйте все пять элементов управления для задачи на сложение (четыре элемента управления Label и элемент управления NumericUpDown) и вставьте их.
Теперь форма содержит пять новых элементов управления, которые все еще выбраны.
Переместите все элементы управления так, чтобы выровнять их под элементами управления для сложения.
Для обеспечения достаточного расстояния между строками можно пользоваться линиями-разделителями.
Измените значение свойства Text второй метки на — (знак «минус»).
Назовите первую метку с вопросительным знаком minusLeftLabel.
Назовите вторую метку с вопросительным знаком minusRightLabel.
Присвойте элементу управления NumericUpDown имя difference.
Вставьте эти пять элементов управления еще два раза.
В третьей строке назовите первую метку timesLeftLabel, у второй метки измените значение свойства Text на × (знак умножения), третью метку назовите timesRightLabel, а элемент управления NumericUpDown назовите product.
В четвертой строке назовите первую метку dividedLeftLabel, у второй метки измените значение свойства Text на ÷ (знак деления), третью метку назовите dividedRightLabel, а элемент управления NumericUpDown назовите quotient.
Знак умножения × и знак деления ÷ можно скопировать из этого руководства и вставить их в форму.
Добавление кнопки запуска и задание порядка перехода по клавише TAB
Добавьте элемент управления Button из панели элементов и установите для его свойства (Name) значение startButton.
Задайте свойству Text значение Запуск головоломки.
Установите размер шрифта равным 14.
Установите для свойства AutoSize значение True, которое вызывает автоматическое изменение размера кнопки в зависимости от размера текста.
Разместите кнопку по центру в нижней части формы.
Установите значение свойства TabIndex элемента управления startButton равным 1.
Свойство TabIndex задает порядок перехода по элементам управления при нажатии клавиши TAB. Чтобы увидеть, как это работает, откройте любое диалоговое окно (например, в строке меню выберите Файл > Открыть), а затем несколько раз нажмите клавишу TAB. Вы увидите, что при каждом нажатии клавиши TAB курсор перемещается от одного элемента управления к другому. Порядок этих переходов был задан программистом при создании формы.
Установите значение свойства TabIndex для элемента управления NumericUpDown с именем sum равным 2, для элемента управления difference равным 3, для элемента управления product равным 4, а для элемента управления quotient равным 5.
Теперь форма должна выглядеть как на снимке экрана ниже.
Чтобы проверить, работает ли свойство TabIndex ожидаемым образом, сохраните программу и запустите ее, нажав клавишу F5 или выбрав пункты Отладка > Начать отладку в строке меню, а затем несколько раз нажмите клавишу TAB.