Как добавить кнопку в Visual Studio
Обновлено: 03.07.2024
Ни один фреймворк с графическим интерфейсом не был бы полным без элемента управления Button, поэтому, конечно, в WPF есть хороший элемент управления, и, как и остальные элементы управления фреймворка, он очень гибкий и позволит вам выполнить практически все. Но давайте начнем с нескольких основных примеров.
Простая кнопка
Как и многие другие элементы управления WPF, кнопку можно отобразить, просто добавив тег кнопки в окно. Если вы поместите текст между тегами (или другим элементом управления), он будет действовать как содержимое кнопки:
Довольно просто, правда? Конечно, Button на самом деле еще ничего не делает, но если вы укажете на нее, вы обнаружите, что она имеет хороший эффект наведения прямо из коробки. Но давайте заставим кнопку что-то делать, подписавшись на ее событие Click (подробнее об этом процессе можно прочитать в статье о подписке на события в XAML):
В Code-behind вам понадобится соответствующий метод для обработки клика:
Теперь у вас есть очень простая кнопка, и при нажатии на нее будет отображаться сообщение!
Отформатированный контент
Внутренне простой текст внутри содержимого кнопки превращается в элемент управления TextBlock, что также означает, что вы можете управлять теми же аспектами форматирования текста. Для этого вы найдете несколько свойств элемента управления Button, включая (но не ограничиваясь ими) Foreground, Background, FontWeight и так далее. Другими словами, изменить форматирование текста внутри элемента управления Button очень просто:
Установив эти свойства непосредственно для кнопки, вы, конечно, ограничены применением одного и того же форматирования ко всему контенту, но если этого недостаточно, просто читайте дальше, чтобы узнать о более сложном форматировании контента.
Кнопки с расширенным содержанием
Мы уже говорили об этом несколько раз, но одна из самых замечательных особенностей WPF — возможность замены простого текста внутри элемента управления другими элементами управления WPF. Это также означает, что вам не нужно ограничивать кнопки простым текстом, отформатированным таким же образом — вы можете просто добавить несколько текстовых элементов управления с разным форматированием. Кнопка WPF поддерживает только один прямой дочерний элемент управления, но вы можете просто сделать его панелью, которая затем будет содержать столько элементов управления, сколько вам нужно. Вы можете использовать это для создания кнопок с различными типами форматирования:
Но, конечно, вы не ограничены только текстом — вы можете поместить все, что хотите, в свои кнопки, что приводит нас к теме, о которой, я знаю, спросят многие люди. Кнопки с изображениями!
Кнопки с изображениями (ImageButton)
Во многих фреймворках пользовательского интерфейса вы найдете обычную кнопку, а затем один или несколько других вариантов, предлагающих дополнительные функции. Одним из наиболее часто используемых вариантов является ImageButton, который, как следует из названия, представляет собой кнопку, которая обычно позволяет вам включать изображение перед текстом. Но в WPF для этого не нужен отдельный элемент управления — как вы только что видели, мы можем поместить несколько элементов управления внутрь кнопки, так что вы можете так же легко добавить к ней элемент управления Image, например:
На самом деле создать ImageButton в WPF очень просто, и вы, конечно, можете свободно перемещать элементы, например. если вы хотите изображение после текста, а не перед и т. д.
Отступы кнопок
Возможно, вы заметили, что кнопки в среде WPF по умолчанию не имеют отступов. Это означает, что текст находится очень близко к границам, что может выглядеть немного странно, потому что большинство кнопок, которые можно найти в других местах (интернет, другие приложения и т. д.), имеют по крайней мере некоторые отступы по бокам. Не беспокойтесь, потому что у кнопки есть свойство Padding:
Это применит отступ в 5 пикселей по бокам и по 2 пикселя сверху и снизу. Но применение отступов ко всем вашим кнопкам может стать немного утомительным в определенный момент, поэтому вот небольшой совет: вы можете применить отступы глобально, либо ко всему приложению, либо только к этому конкретному окну, используя стиль (подробнее о стили позже). Вот пример, где мы применяем его к окну, используя свойство Window.Resources:
Теперь это заполнение будет применяться ко всем вашим кнопкам, но вы, конечно, можете переопределить его, специально определив свойство Padding для кнопки. Вот как все кнопки этого примера выглядят с общим отступом:
Обзор
Как видно из этой статьи, использовать кнопки в среде WPF очень просто, и вы можете настраивать этот важный элемент управления почти бесконечно.
Вашего предпочтительного языка нет в списке? Нажмите здесь, чтобы помочь нам перевести эту статью на ваш язык!
В этой серии из трех руководств вы создадите приложение Windows Forms, которое загружает изображение и отображает его. Интегрированная среда разработки (IDE) Visual Studio предоставляет инструменты, необходимые для создания приложения. Дополнительные сведения см. в разделе Добро пожаловать в интегрированную среду разработки Visual Studio.
Эта программа имеет окно с изображением, флажок и несколько кнопок, которые используются для управления приложением. В этом руководстве показано, как добавить эти элементы управления.
Из этого второго руководства вы узнаете, как:
- Добавьте элементы управления в свое приложение
- Добавить кнопки на панель макета
- Изменить названия и расположение элементов управления
- Добавить компоненты диалога
Предпосылки
Это руководство основано на предыдущем руководстве "Создание приложения для просмотра изображений". Если вы еще не прошли это руководство, сначала просмотрите его.
Добавьте элементы управления в свое приложение
Приложение Picture Viewer использует элемент управления PictureBox для отображения изображения. Он использует флажок и несколько кнопок для управления изображением и фоном, а также для закрытия приложения. Вы добавите PictureBox и флажок из панели инструментов в интегрированной среде разработки Visual Studio.
Откройте Visual Studio. Ваш проект Picture Viewer появится в разделе Открыть последние.
В конструкторе Windows Forms выберите TableLayoutPanel, добавленный в предыдущем руководстве. Убедитесь, что tableLayoutPanel1 отображается в окне свойств.
В левой части интегрированной среды разработки Visual Studio выберите вкладку Панель инструментов. Если вы его не видите, выберите «Просмотр» > «Панель инструментов» в строке меню или Ctrl+Alt+X. В наборе инструментов разверните Общие элементы управления.
Дважды щелкните PictureBox, чтобы добавить в форму элемент управления PictureBox. IDE Visual Studio добавляет элемент управления PictureBox в первую пустую ячейку TableLayoutPanel.
Выберите новый элемент управления PictureBox, чтобы выбрать его, а затем щелкните черный треугольник на новом элементе управления PictureBox, чтобы отобразить его список задач.
Выберите «Закрепить в родительском контейнере», чтобы задать для свойства «Dock» PictureBox значение «Заливка». Вы можете увидеть это значение в окне свойств.
В окне свойств PictureBox задайте для свойства ColumnSpan значение 2. Теперь PictureBox заполняет оба столбца.
Установите для свойства BorderStyle значение Fixed3D.
В конструкторе Windows Forms выберите TableLayoutPanel. Затем на панели инструментов дважды щелкните элемент CheckBox, чтобы добавить новый элемент управления CheckBox. Ваш PictureBox занимает первые две ячейки в TableLayoutPanel, поэтому элемент управления CheckBox добавляется в нижнюю левую ячейку.
Выберите свойство «Текст» и введите «Растянуть».
Добавить кнопки на панель макета
До сих пор элементы управления были добавлены в TableLayoutPanel. Эти шаги показывают, как добавить четыре кнопки на новую панель макета в TableLayoutPanel.
Выберите TableLayoutPanel в форме. Откройте панель инструментов, выберите Контейнеры. Дважды щелкните FlowLayoutPanel, чтобы добавить новый элемент управления в последнюю ячейку TableLayoutPanel.
Задайте для свойства Dock панели FlowLayoutPanel значение Fill. Вы можете установить это свойство, выбрав черный треугольник, а затем выбрав Закрепить в родительском контейнере.
FlowLayoutPanel – это контейнер, который упорядочивает другие элементы управления в ряд один за другим.
Выберите новую панель FlowLayoutPanel, затем откройте панель инструментов и выберите Общие элементы управления. Дважды щелкните элемент Button, чтобы добавить элемент управления "кнопка" с именем button1.
Дважды нажмите кнопку еще раз, чтобы добавить еще одну кнопку. IDE вызывает следующую кнопку button2.
Таким образом добавьте еще две кнопки. Другой вариант — выбрать кнопку2, а затем выбрать «Правка» > «Копировать» или нажать Ctrl+C. Затем выберите «Правка» > «Вставить» в строке меню или нажмите Ctrl+V. Чтобы вставить копию кнопки. Теперь вставьте его снова. Обратите внимание, что IDE добавляет кнопки button3 и button4 в FlowLayoutPanel.
Выберите первую кнопку и задайте для ее свойства Text значение Показать изображение.
Установите для свойств текста следующих трех кнопок значения "Очистить изображение", "Установить цвет фона" и "Закрыть".
Чтобы изменить размер кнопок и расположить их, выберите FlowLayoutPanel. Задайте для свойства FlowDirection значение RightToLeft.
Кнопки должны располагаться по правому краю ячейки и располагаться в обратном порядке, чтобы кнопка "Показать изображение" находилась справа. Вы можете перетаскивать кнопки вокруг FlowLayoutPanel, чтобы расположить их в любом порядке.
Нажмите кнопку "Закрыть", чтобы выбрать ее. Затем, чтобы одновременно выбрать остальные кнопки, нажмите и удерживайте клавишу Ctrl и выберите их тоже.
В окне свойств задайте для свойства AutoSize значение True. Кнопки изменяются в соответствии с их текстом.
Вы можете запустить свою программу, чтобы посмотреть, как выглядят элементы управления. Нажмите клавишу F5, выберите «Отладка» > «Начать отладку» или нажмите кнопку «Пуск». Кнопки, которые вы добавили, пока ничего не делают.
Изменить имена элементов управления
В форме нажмите кнопку "Закрыть". Если у вас по-прежнему выбраны все кнопки, нажмите Esc, чтобы отменить выбор.
В окне "Свойства" найдите (Имя). Измените имя на closeButton.
Среда IDE не принимает имена, содержащие пробелы.
Переименуйте остальные три кнопки в backgroundButton, clearButton и showButton. Вы можете проверить имена, выбрав раскрывающийся список селектора управления в окне свойств. Появятся новые названия кнопок.
Вы можете изменить имя любого элемента управления, например TableLayoutPanel или флажка.
Добавить компоненты диалога
Ваше приложение может открывать файлы изображений и выбирать цвет фона с помощью компонентов. Компонент похож на элемент управления. Панель инструментов используется для добавления компонента в форму. Вы устанавливаете его свойства в окне свойств.
В отличие от элемента управления, добавление компонента в форму не добавляет видимый элемент. Вместо этого он обеспечивает определенное поведение, которое вы можете активировать с помощью кода. Например, это компонент, который открывает диалоговое окно «Открыть файл».
В этом разделе вы добавите в форму компонент OpenFileDialog и компонент ColorDialog.
Выберите конструктор Windows Forms (Form1.cs [Design]). Затем откройте панель инструментов и выберите группу диалогов.
Дважды щелкните OpenFileDialog, чтобы добавить в форму компонент openFileDialog1.
Дважды щелкните ColorDialog, чтобы добавить компонент с именем colorDialog1. Компоненты отображаются в нижней части конструктора Windows Forms в виде значков.
Выберите значок openFileDialog1 и задайте два свойства:
Задайте для свойства Filter следующее:
Задайте для свойства Title следующее: Выберите файл изображения
Параметры свойства "Фильтр" определяют типы, отображаемые в диалоговом окне "Выберите изображение".
Дальнейшие шаги
Перейдите к следующему руководству, чтобы узнать, как добавить код в приложение.
Элемент управления Button представляет собой стандартную кнопку Windows. Обычно он используется для создания события Click путем предоставления обработчика события Click.
Давайте создадим метку, перетащив элемент управления Button из панели инструментов на форму.
Свойства элемента управления "Кнопка"
Ниже приведены некоторые часто используемые свойства элемента управления «Кнопка».
Режим авторазмера
Получает или задает режим автоматического изменения размера кнопки.
Получает или задает цвет фона элемента управления.
Фоновое изображение
Получает или задает фоновое изображение, отображаемое в элементе управления.
Результат диалога
Получает или задает значение, которое возвращается в родительскую форму при нажатии кнопки. Это используется при создании диалоговых окон.
Получает или задает цвет переднего плана элемента управления.
Получает или задает координаты левого верхнего угла элемента управления относительно левого верхнего угла его контейнера.
Получает или задает порядок табуляции элемента управления в его контейнере.
Получает или задает текст, связанный с этим элементом управления.
Способы управления кнопкой
Ниже приведены некоторые из наиболее часто используемых методов управления «Кнопка».
Получить предпочтительный размер
Получает размер прямоугольной области, в которую можно поместить элемент управления.
Уведомление по умолчанию
Уведомляет кнопку о том, является ли она кнопкой по умолчанию, чтобы она могла соответствующим образом настроить свой внешний вид.
Активирует элемент управления.
Возвращает строку, содержащую имя компонента, если он есть. Этот метод не следует переопределять.
События элемента управления Button
Ниже приведены некоторые из наиболее часто используемых событий элемента управления «Кнопка».
Происходит при нажатии элемента управления.
Двойной щелчок
Происходит, когда пользователь дважды щелкает элемент управления Button.
Происходит, когда элемент управления получает фокус.
TabIndexChanged
Происходит при изменении значения свойства TabIndex.
Текст изменен
Происходит при изменении значения свойства Text.
Происходит после завершения проверки элемента управления.
Подробный список свойств, методов и событий элемента управления Button см. в документации Microsoft.
Пример
В следующем примере мы создаем три кнопки. В этом примере давайте —
Установите подписи для кнопок
Установите изображение для кнопки
Обработка событий нажатия каждой кнопки
Выполните следующие действия —
Перетащите элемент управления Label на форму.
Установите свойство Text, чтобы указать заголовок "Учебные материалы".
Перетащите три кнопки на форму.
В окне свойств измените свойства Name кнопок на btnMoto, btnLogo и btnExit соответственно.
В окне свойств измените свойства текста кнопок на «Показать Moto», «Показать логотип» и «Выход» соответственно.
Перетащите другую кнопку, используя окно свойств, установите ее свойство Image и назовите ее btnImage.
Я не могу найти способов добавить кнопку в макет.
Я пытаюсь добавить дочерний элемент (кнопку) в макет, но не могу найти способов сделать это.
Исходный код:
2 ответа 2
Вы открываете свой проект в Visual Studio 2019 (не в Visual Studio Code и не в JetBrains Rider) – бесплатные версии для которых существуют, если ваш контекст соответствует требованиям лицензии. Если вы не соответствуете требованиям для получения бесплатной лицензии, ваше [рабочее место] может легко позволить себе лицензию в той или иной форме
Вы дважды щелкаете Form1 в обозревателе решений и затем видите что-то похожее на то, как форма будет выглядеть при запуске программы, и вы открываете панель инструментов управления, перетаскиваете из нее кнопку и опускаете ее на форма.
Но если вы хотите вручную писать объемы скучного повторяющегося кода для создания пользовательского интерфейса, добавьте элементы управления в коллекцию Controls других элементов управления, а именно:
Каждый элемент управления имеет коллекцию элементов управления, в которую можно добавить другие элементы управления (не только те элементы, которые вы считаете «вещами, имеющими дочерние элементы управления, такие как Panel или GroupBox»). текстовое поле и пара кнопок)
Для примера того, сколько кода вам нужно написать, создайте разумно выглядящий пользовательский интерфейс в режиме конструктора, а затем откройте Form1.Designer.cs. Вы поймете, почему мы делаем это с помощью инструмент дизайна! :)
Разве не было бы быстрее учиться, если бы я не использовал инструмент Designer?
ИМО, нет. Это все равно, что сказать: «Не будет ли быстрее научиться, если я вручную закодирую SVG в блокноте, а не использую Inkscape/Gimp для визуального рисования изображения… или создам PNG, набрав байты в шестнадцатеричном редакторе»
Подойдя так близко к необработанному низкому уровню, вы в конечном итоге «не сможете увидеть лес за деревьями», и это мешает вашему обучению. Подробный рассказ об абстракциях и о том, почему мы их используем и как они применяются в каждом повседневном процессе, включая обучение и повседневную деятельность, см. в разделе комментариев
Читайте также: