Пошаговое руководство. Приступая к работе с конструктором Windows Forms

Обновлен: Ноябрь 2007

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

• Создание проекта Windows Forms.

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

• Выполнение задач конструктора с помощью смарт-тегов.

• Установка полей и интервалом для элементов управления.

• Упорядочение элементов управления с помощью элемента управления TableLayoutPanel.

• Разделение на секции макета элемента управления с помощью элемента управления SplitContainer.

• Переходы в окне структуры документа.

• Размещение элементов управления с отображением размера и расположения.

• Установка значений свойств с помощью окон свойств.

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

Внешний вид интерфейса калькулятора

Обязательные компоненты

Для выполнения этого примера потребуется:

• Разрешения, необходимые для создания и выполнения проектов приложений Windows Forms на компьютере, на котором установлена Visual Studio.

Примечание.
Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих настроек или версии среды. Чтобы изменить настройки, в меню Сервис выберите команду Импорт и экспорт параметров. Дополнительные сведения см. в разделе Параметры Visual Studio.

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

На первом этапе необходимо создать проект элемента управления DemoCalculator.

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

1. В меню Файл выберите Создать и выберите пункт Проект, чтобы открыть диалоговое окно Новый проект.

2. В списке проектов Visual C# выберите шаблон проекта Библиотека элементов управления Windows и в поле Имя введите DemoCalculatorLib, затем нажмите кнопку ОК.

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

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

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

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

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

1. В конструкторе Windows Forms увеличьте размер элемента управления DemoCalculator, перетаскивая маркер размера, находящийся в правом нижнем углу этого элемента управления, вниз и вправо. В правом нижнем углу Visual Studio находятся данные о размере и расположении элементов управления. Изменяйте размер элемента управления до тех пор, пока его ширина не будет равна 500, а высота — 400.

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

   Элемента управления SplitContainer появится на рабочей поверхности конструктора элемента управления DemoCalculator.

   Примечание.

   Размеры элемента управления SplitContainer определяются автоматически в соответствии с размером элемента управления DemoCalculator. В окне "Свойства" просмотрите значения свойства элемента управления SplitContainer. Найдите свойство Dock. Его значение равно Fill; это означает, что размер элемента управления SplitContainer всегда будет соответствовать размеру элемента управления DemoCalculator. Для проверки измените размер элемента управления DemoCalculator.

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

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

4. Щелкните значок смарт-тега () в правом верхнем углу элемента управления SplitContainer. Щелкните Закрепить в родительском контейнере, чтобы установить для свойства 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. В панели смарт-тега щелкните Закрепить в родительском контейнере и щелкните значок смарт-тега для закрытия панели.

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

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

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

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

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

15. В раскрывающемся списке Показать выберите Строки.

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

17. Нажмите кнопку ОК для сохранения изменений и щелкните значок смарт-тега для закрытия панели.

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

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

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

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

1. Дважды щелкните значок элемента управления TextBox в панели элементов.

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

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

   Элемент управления TextBox переместится в середину строки.

3. Для элемента управления TextBox измените значение свойства Anchor на 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, затем нажмите клавишу DELETE для удаления их из макета.

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

Переходы между элементами управления в окне структуры документа

Если в элементе управления или в форме находятся несколько элементов управления, возможно, проще перемещаться по макету с помощью окна Структура документа.

Для перехода между элементами управления в окне структуры документа

1. В меню Вид выберите Другие окна, затем Структура документа.

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

2. В окне Структура документа щелкните правой кнопкой мыши элемент управления button1и выберите команду Переименовать. Измените имя на sevenButton.

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

   • button1 в sevenButton

   • button2 в eightButton

   • button3 в nineButton

   • button4 в divisionButton

   • button5 в clearButton

   • button6 в fourButton

   • button7 в fiveButton

   • button8 в sixButton

   • button9 в multiplicationButton

   • button11 в oneButton

   • button12 в twoButton

   • button13 в threeButton

   • button14 в subtractionButton

   • button15 в equalsButton

   • button16 в zeroButton

   • button17 в changeSignButton

   • button18 в decimalButton

   • button19 в additionButton

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

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

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

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

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

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

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

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

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

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

   • Измените для элемента управления 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 во время выполнения.

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

• Нажмите клавишу F5 для построения проекта и запуска элемента управления DemoCalculator в тестовом контейнере пользовательских элементов управления.

  Щелкнув разделитель между панелями SplitContainer, перетащите его вправо или влево. Размер элемента управления TableLayoutPanel и всех его дочерних элементов управления изменится так, что они будут занимать все свободное место .

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

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

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

Для начала следует создать проект приложения. Этот проект будет использован для создания приложения, в котором будет размещен элемент управления.

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

1. В меню Файл выберите Добавить, выберите Создать проект, чтобы открыть диалоговое окно Создание проекта.

2. Выберите шаблон Приложение Windows в списке проектов Visual C#, введите DemoCalculatorTest в поле Имя и нажмите кнопку ОК.

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

4. Перейдите на вкладку Имя проекта и дважды щелкните DemoCalculatorLib, чтобы добавить ссылку на тестовый проект.

5. В Обозревателе решений щелкните правой кнопкой мыши DemoCalculatorTest и выберите Назначить автозагружаемым проектом.

6. В конструкторе Windows Forms установите размер формы равным примерно 700 х 500 точек.

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

Для использования элемента управления DemoCalculator в приложении нужно разместить его в форме.

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

1. В панели элементов разверните узел Компоненты DemoCalculatorLib.

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

   Дополнительные сведения см. в разделе Пример. Упорядочение элементов управления в формах Windows Forms с помощью линий привязки.

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

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

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

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

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

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

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

Следующие действия

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

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

• Упаковать приложение калькулятора для развертывания. Дополнительные сведения см. в разделе Практическое руководство. Публикация приложения ClickOnce.

См. также

Задачи

Пошаговое руководство. Упорядочение элементов управления в формах Windows Forms с помощью элемента TableLayoutPanel

Пошаговое руководство. Добавление смарт-тегов в компонент Windows Forms

Пример. Упорядочение элементов управления в формах Windows Forms с помощью линий привязки

Пример. Автоматическое заполнение панели элементов пользовательскими компонентами

Практическое руководство. Тестирование поведения элемента UserControl во время выполнения

Разрешение вопросов, связанных с созданием элементов управления и компонентов

Устранение неполадок, возникающих в режиме разработки

Основные понятия

Создание собственных элементов управления

Другие ресурсы

Создание новой формы Windows Forms