Поделиться через

Руководство. Начало работы с конструктором Windows Forms

  • Статья

Конструктор Windows Forms предоставляет множество средств для создания приложений Windows Forms. В этой статье показано, как создать приложение с помощью различных средств, предоставляемых конструктором, включая следующие задачи:

  • Упорядочение элементов управления с помощью направляющих линий.
  • Выполнение задач конструктора с помощью смарт-тегов.
  • Задайте поля и заполнение для элементов управления.
  • Расположите элементы управления с помощью элемента управления TableLayoutPanel.
  • Разделите макет элемента управления с помощью элемента управления SplitContainer.
  • Навигируйте по вашему макету с помощью окна структуры документа.
  • Элементы управления положением с отображением сведений о размере и расположении.
  • Задайте значения свойств с помощью окна "Свойства".

По завершении вы получите настраиваемый элемент управления, который был собран с помощью многих функций макета, доступных в среде Windows Forms Designer. Этот элемент управления реализует пользовательский интерфейс для простого калькулятора. На следующем рисунке показан общий макет элемента управления калькулятора:

снимок экрана: завершенный пользовательский интерфейс для элемента управления калькулятором.

Совет

Если вы разработчик C++ и ищете руководство по созданию приложения Windows, включающего формы и элементы управления, см. создание приложения MFC на основе форм. Для получения более общей информации см. Обзор программирования Windows на C++.

Создайте проект пользовательского элемента управления

Первым шагом является создание проекта элемента управления DemoCalculator.

  1. Откройте Visual Studio и создайте новый проект библиотеки элементов управления Windows Forms с помощью шаблона .NET Framework для C# или Visual Basic. Назовите проект DemoCalculatorLib.

    снимок экрана шаблона библиотеки элементов управления Windows Forms в Visual Studio.

  2. Чтобы переименовать файл, в обозревателе решений щелкните правой кнопкой мыши UserControl1.vb или UserControl1.cs, выберите Переименоватьи измените имя файла на DemoCalculator.vb или DemoCalculator.cs. Выберите Да, когда вам будет предложено переименовать все ссылки на элемент кода UserControl1.

Конструктор Windows Forms отображает рабочую поверхность конструктора для элемента управления DemoCalculator. В этом представлении можно графически спроектировать внешний вид элемента управления, выбрав элементы управления и компоненты из панели элементов и поместив их в область конструктора. Дополнительные сведения о пользовательских элементах управления см. в разделе Разновидности пользовательских элементов управления.

Проектирование макета элемента управления

Элемент управления DemoCalculator содержит несколько элементов управления Windows Forms. В этой процедуре вы упорядочите элементы управления с помощью конструктора Windows Forms.

  1. В конструкторе Windows Forms увеличьте элемент управления DemoCalculator до большего размера, выбрав маркер изменения размера в правом нижнем углу и перетащив его для изменения масштаба. В правом нижнем углу Visual Studio найдите сведения о размере и расположении для элементов управления. Задайте размер элемента управления на ширину 1000 и высоту 800, просматривая сведения о размере при изменении размера элемента управления. Можно также прокрутить вниз до нижней части окна свойств , которое обычно закреплено в правом нижнем углу, и вручную ввести значения в свойстве размера.

  2. В панели инструментоввыберите узел контейнеров для его открытия. Выберите элемент управления SplitContainer и перетащите его на поверхность дизайнера.

    SplitContainer помещается на поверхность конструктора элемента управления DemoCalculator.

    Совет

    Размер элемента управления SplitContainer соответствует размеру элемента управления DemoCalculator. Просмотрите окно свойств, чтобы просмотреть параметры свойств для элемента управления SplitContainer. Найдите свойство Dock. Его значение равно DockStyle.Fill, что означает, что элемент управления SplitContainer всегда будет иметь размер по границам элемента управления DemoCalculator. Измените размер элемента управления DemoCalculator, чтобы проверить это поведение.

  3. В окне свойств измените значение свойства Dock на None.

    Элемент управления SplitContainer уменьшается до размера по умолчанию и больше не соответствует размеру элемента управления DemoCalculator.

  4. Выберите пиктограмму умного тега (Пиктограмма умного тега) в правом верхнем углу элемента управления SplitContainer. Выберите Dock в родительском контейнере, чтобы задать для свойства Dock значение Fill.

    Элемент управления SplitContainer закрепляет границы элемента управления DemoCalculator.

    Заметка

    Несколько элементов управления предлагают смарт-теги для упрощения проектирования. Дополнительные сведения см. в Пошаговом руководстве: выполнение распространенных задач с помощью интеллектуальных тегов в элементах управления Windows Forms.

  5. Выберите вертикальную границу между панелями и перетащите ее вправо, чтобы левая панель занимает большую часть пространства.

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

  6. В окне свойств измените значение свойства BorderStyle на Fixed3D.

  7. В панели инструментоввыберите узел Общие элементы управления, чтобы открыть. Выберите элемент управления ListView и перетащите его на правую панель элемента управления SplitContainer.

  8. Выберите глиф смарт-тега элемента управления ListView. На панели смарт-тегов измените параметр View на Details.

  9. На панели смарт-тегов выберите Изменить столбцы.

    Диалоговое окно редактора коллекции ColumnHeader откроется.

  10. В диалоговом окне редактора коллекции ColumnHeader выберите Добавить, чтобы добавить столбец в элемент управления ListView. Измените значение свойства Text столбца на история. Нажмите кнопку ОК, чтобы создать столбец.

  11. На панели смарт-тегов выберите Dock в родительском контейнере, а затем выберите глиф смарт-тега, чтобы закрыть панель смарт-тегов.

  12. Из узла контейнеровпанели элементовперетащите элемент управления TableLayoutPanel в левую панель элемента управления SplitContainer.

    Элемент управления TableLayoutPanel отображается на панели конструктора с открытой панелью смарт-тегов. Элемент управления TableLayoutPanel упорядочивает дочерние элементы управления в сетке. Элемент управления TableLayoutPanel включает в себя отображение и кнопки элемента управления DemoCalculator. Дополнительные сведения см. в разделе Пошаговое руководство: Упорядочение элементов управления с помощью TableLayoutPanel.

  13. Выберите изменить строки и столбцы на панели смарт-тегов.

    Откроется диалоговое окно "Стили столбцов и строк" .

  14. Нажмите кнопку Добавить, пока не будут отображаться пять столбцов. Выберите все пять столбцов и выберите процент в поле Тип размера. Установите значение процента на 20. Это действие задает каждому столбцу одинаковую ширину.

  15. В разделе Показатьвыберите строки.

  16. Выберите Добавить, пока не отобразятся пять строк. Выберите все пять строк и выберите процент в поле Тип размера. Задайте значение процента на 20. Это действие задает каждой строке одинаковую высоту.

  17. Нажмите кнопку ОК, чтобы принять изменения, а затем выберите глиф смарт-тега, чтобы закрыть панель смарт-тегов.

  18. В окне свойств измените значение свойства Dock на Fill.

Заполнение элемента управления

Теперь, когда макет элемента управления закончен, можно заполнить элемент управления DemoCalculator кнопками и экраном отображения.

  1. В панели элементоввыберите значок элемента управления TextBox.

    Элемент управления TextBox помещается в первую ячейку элемента управления TableLayoutPanel.

  2. В окне свойств измените значение свойства ColumnSpan элемента управления TextBox на 5.

    Элемент управления TextBox перемещается в положение, которое находится в центре ряда.

  3. Измените значение свойства Anchor элемента управления TextBox на Left, Right.

    Элемент управления TextBox расширяется горизонтально, чтобы охватывать все пять столбцов.

  4. Измените значение свойства TextAlign элемента управления TextBox на Right.

  5. В окне свойств разверните узел свойства Font. Установите Size на 14, а Bold на true для контроля TextBox.

  6. Выберите элемент управления TableLayoutPanel.

  7. В панели элементоввыберите значок Button.

    Элемент управления Button помещается в следующую открытую ячейку элемента управления TableLayoutPanel.

  8. В панели элементоввыберите значок Button еще четыре раза, чтобы заполнить вторую строку элемента управления TableLayoutPanel.

  9. Выберите все пять элементов управления Button, удерживая клавишу Shift. Нажмите клавиши Ctrl+C, чтобы скопировать элементы управления Button в буфер обмена.

  10. Нажмите клавиши CTRL +V три раза, чтобы вставить копии элементов управления Button в оставшиеся строки элемента управления TableLayoutPanel.

  11. Выберите все 20 элементов управления Button, выбрав их, удерживая клавишу SHIFT .

  12. В окне свойств измените значение свойства Dock на Fill.

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

  13. В окне свойств разверните узел свойства Margin. Задайте для параметра All значение 5.

    Все элементы управления Button имеют меньший размер для создания большего поля между ними.

  14. Выберите button10 и button20, а затем нажмите Удалить, чтобы удалить их из макета.

  15. Выберите button5 и button15, а затем измените значение свойства RowSpan на 2. Эти кнопки представляют кнопки Clear и = для элемента управления DemoCalculator.

Использование окна структуры документа

Когда ваш элемент управления или форма содержит несколько элементов управления, вы можете упростить навигацию по макету с помощью окна «Структура документа».

  1. В строке меню выберите Вид>Другие окна>Контур документа. Кроме того, на клавиатуре нажмите клавиши CTRL +ALT+T.

    В окне структуры документа отображается представление дерева элемента управления DemoCalculator и его составляющих элементов управления. Элементы управления контейнерами, такие как SplitContainer, отображают дочерние элементы управления как подэлементы в дереве. Вы также можете переименовать элементы управления с помощью окна "Структура документа".

  2. В окне структуры документа щелкните правой кнопкой мыши кнопку , а затем выберите Переименовать (клавиатура: F2). Измените его имя на sevenButton.

  3. Используя окно структуры документа , переименуйте элементы управления Button из имени, созданного конструктором, в производственное имя в соответствии со следующим списком:

    • button1 to sevenButton

    • кнопка2 к восемьКнопка

    • кнопка3 к кнопка9

    • button4 к divisionButton

    • кнопка5 для clearButton

    • кнопка6 для четыреButton

    • button7 to fiveButton

    • button8 to sixButton

    • button9 to кнопкаУмножения

    • button11 в oneButton

    • button12 к twoButton

    • button13 к threeButton

    • button14 to subtractionButton

    • кнопка15 к кнопкаРавно

    • button16 to zeroButton

    • кнопка17 изменитьЗнакКнопка на

    • кнопка18 to десятичнаяКнопка

    • button19 to additionButton

  4. Используя окна структуры документа и свойства, измените значение свойства Text для каждого элемента управления Button в соответствии со следующим списком:

    • Измените текстовое свойство элемента управления SevenButton на 7

    • Измените текстовое свойство элемента управления eightButton на 8

    • Измените текстовое свойство элемента управления nineButton на 9

    • Измените текстовое свойство элемента управления divisionButton на / (косая черта)

    • Измените текстовое свойство элемента управления clearButton на Clear

    • Измените текстовое свойство элемента управления fourButton на 4

    • Измените текстовое свойство элемента управления FiveButton на 5

    • Измените текстовое свойство элемента управления sixButton на 6

    • Измените текстовое свойство элемента управления умножением на * (звездочка)

    • Измените текстовое свойство элемента управления OneButton на 1

    • Измените текстовое свойство элемента управления twoButton на 2

    • Измените текстовое свойство элемента управления threeButton на 3

    • Измените текстовое свойство элемента управления SubtractionButton на - (дефис)

    • Измените текстовое свойство элемента управления equalsButton на = (знак равенства)

    • Измените текстовое свойство элемента управления zeroButton на 0

    • Измените текстовое свойство элемента управления changeSignButton на +/-

    • Измените текстовое свойство элемента управления decimalButton на . (период)

    • Измените текстовое свойство элемента управления additionButton на + (знак плюса)

  5. На поверхности конструктора выберите все элементы управления Button, удерживая клавишу Shift .

  6. В окне свойств разверните узел свойства Font. Установите Size на 14, и установите Bold на true для всех управляющих элементов Button.

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

Реализуйте обработчики событий

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

  1. На поверхности конструктора выберите все элементы управления Button, выбрав их, удерживая клавишу SHIFT .

  2. Выберите один из элементов управления Button.

    Редактор кода открывается для обработчиков событий, созданных конструктором.

Так как в этом руководстве основное внимание уделяется конструктору, мы опустим сведения о реализации функций калькулятора.

Проверка элемента управления

Так как элемент управления DemoCalculator наследует от класса UserControl, его поведение можно проверить с помощью контейнера тестов UserControl. Дополнительные сведения см. в разделе Практическое руководство: тестирование поведения во время выполнения элемента управленияUserControl.

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

  2. Выберите границу между панелями SplitContainer и перетащите ее влево и вправо. TableLayoutPanel и все его дочерние элементы управления автоматически изменяют свои размеры, чтобы соответствовать доступному пространству.

  3. После завершения тестирования элемента управления нажмите кнопку Закрыть.

Используйте элемент управления на форме

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

Создание проекта

Первым шагом является создание проекта приложения. Вы будете использовать этот проект для создания приложения, отображающего пользовательский элемент управления.

  1. Добавьте новый проект приложения Windows Forms (.NET Framework) в существующее решение и назовите его DemoCalculatorTest.

  2. В обозревателе решений щелкните правой кнопкой мыши на проекте DemoCalculatorTest и выберите Добавить>ссылку, чтобы открыть диалоговое окно диспетчера ссылок .

  3. Перейдите на вкладку Проекты, а затем выберите проект DemoCalculatorLib, чтобы добавить ссылку на тестовый проект.

  4. В обозревателе решенийщелкните правой кнопкой мыши DemoCalculatorTest, а затем выберите Задать в качестве проекта запуска.

  5. В конструкторе Windows Forms увеличьте размер формы примерно до 1400 x 1000.

Использование элемента управления в макете формы

Чтобы использовать элемент управления DemoCalculator в приложении, необходимо поместить его в форму.

  1. В панели инструментовразверните узел компонентов DemoCalculatorLib.

  2. Перетащите элемент управления DemoCalculator из панели инструментов на вашу форму. Переместите элемент управления в левый верхний угол формы. Когда элемент управления находится близко к границам формы, появляются линии привязки . Контрольные линии указывают расстояние свойства Padding формы и свойства Margin элемента управления. Поместите элемент управления в расположение, указанное линиями привязки.

    Дополнительные сведения см. в статье Пошаговое руководство. Упорядочивание элементов управления с помощью линий оснастки.

  3. Перетащите элемент управления Button из панели инструментов и поместите его на форму.

  4. Переместите элемент управления Button вокруг элемента управления DemoCalculator и посмотрите, где отображаются линии привязки. Вы можете точно и легко выровнять элементы управления с помощью этой функции. После завершения удалите контроллер Button.

  5. Щелкните правой кнопкой мыши на элементе управления DemoCalculator, а затем выберите пункт Свойства.

  6. Измените значение свойства Dock на Fill.

  7. Выберите форму и разверните узел свойства Padding. Измените значение All на 20.

    Размер элемента управления DemoCalculator уменьшается, чтобы соответствовать новому значению Padding формы.

  8. Измените размер формы, перетаскивая ручки изменения размера в разные положения. Узнайте, как элемент управления DemoCalculator изменяется в соответствии с размерами.

Дальнейшие действия

В этой статье показано, как создать пользовательский интерфейс для простого калькулятора. Чтобы продолжить, можно расширить функциональные возможности, реализуя логику калькулятора, а затем опубликовать приложение с помощью ClickOnce. Кроме того, перейдите к другому руководству, в котором вы создать средство просмотра рисунков с помощьюWindows Forms.

См. также