Диалоговое окно конструктор форм
Конструктор Windows Forms предоставляет несколько инструментов для создания приложений Windows Forms. В этом пошаговом руководстве объясняется, как использовать различные инструменты, предоставляемые дизайнером, для создания приложения. Это упражнение включает в себя следующие задачи:
Создайте проект Windows Forms.
Используйте линии выравнивания для размещения элементов управления.
Используйте смарт-теги для выполнения дизайнерских задач.
Установите поля элемента управления.
использовать TableLayoutPanel Элементы управления размещают элементы управления.
использовать SplitContainer Элемент управления разделяет макет элемента управления.
использовать «Схема документа» Окно просмотра вашего макета.
Расположите элемент управления по отображаемому размеру и информации о положении.
Используйте окно «Свойства», чтобы задать значение свойства.
После выполнения вышеуказанных шагов вы получите настраиваемый элемент управления, собранный с использованием нескольких функций макета, предоставленных в конструкторе Windows Forms. Этот элемент управления реализует пользовательский интерфейс (UI) простого калькулятора. На скриншоте ниже показан общий вид элемента управления калькулятором.
Для выполнения этого пошагового руководства вам потребуются:
Достаточные разрешения для создания и запуска проектов приложений Windows Forms на компьютере, на котором установлена Visual Studio.
Отображаемые диалоговые окна и команды меню могут отличаться от описаний в «Справке», в зависимости от настроек или версии, которую вы используете в данный момент. Чтобы изменить настройки, пожалуйста "инструмент" Выбор меню «Настройки импорта и экспорта» 。 Для получения дополнительной информации см. Использовать настройки 。
Первый шаг - создать DemoCalculator Элементы формы.
Создайте проект настраиваемого элемента управления
в "файл" В меню наведите указатель на "Новый" И нажмите "проект" Открыть "Новый проект" Диалоговое окно.
в "имя" Введите в поле DemoCalculatorLib И нажмите "определить" 。
В обозревателе решений щелкните правой кнопкой мыши “UserControl1.vb” или же “UserControl1.cs” , Затем щелкните "Переименовать" 。
Измените имя файла на DemoCalculator.vb или же DemoCalculator.cs 。 На вопрос, следует ли переименовать все ссылки на элемент кода «UserControl1», нажмите "Да" Кнопка.
Конструктор Windows Forms отображается в данный момент DemoCalculator Конструкторская поверхность элемента управления. В этом представлении выберите элементы управления и компоненты на панели инструментов, а затем поместите выбранные элементы управления и компоненты на поверхность конструктора, вы можете графически создать внешний вид элементов управления. Для получения дополнительной информации о пользовательских элементах управления см. Различные настраиваемые элементы управления 。
DemoCalculator Этот элемент управления содержит несколько элементов управления Windows Forms. Во время этого процесса для упорядочивания элементов управления будут использоваться некоторые функции быстрой разработки приложений (RAD) конструктора Windows Forms Designer.
Схема управления дизайном
В конструкторе Windows Forms щелкните маркер размера в правом нижнем углу и перетащите его в правый нижний угол, чтобы увеличить DemoCalculator Размер элемента управления. Найдите информацию о размере и расположении элемента управления в правом нижнем углу Visual Studio. Обратите внимание на информацию о размере элемента управления при изменении размера элемента управления, установите ширину элемента управления на 500 и высоту на 400.
На панели инструментов щелкните "контейнер" Узел, чтобы открыть узел. Выбрать SplitContainer Выберите и перетащите элемент управления на поверхность конструктора.
будут SplitContainer Установить в DemoCalculator Конструкторская поверхность элемента управления.
SplitContainer Размер элемента управления изменится, чтобы соответствовать DemoCalculator Размер элемента управления. Проверьте окно «Свойства», чтобы увидеть SplitContainer Параметр свойства элемента управления. поверни Dock Атрибуты. Значение этого атрибута Fill , Что значит SplitContainer Размер элемента управления всегда следует DemoCalculator Границу контроля можно регулировать. Регулировка DemoCalculator Размер элемента управления подтверждает это поведение.
В окне «Свойства» установите Dock Измените значение свойства на None 。
SplitContainer Элемент управления уменьшится до размера по умолчанию. Размер элемента управления больше не соответствует DemoCalculator Размер элемента управления.
Нажмите на SplitContainer Глиф смарт-тега ()。 Нажмите на «Стыковка в родительском контейнере» ,будут Dock Атрибут установлен на Fill 。
SplitContainer Элемент управления будет пристыкован к DemoCalculator Граница контроля.
Некоторые элементы управления имеют смарт-теги для упрощения разработки. Для получения дополнительной информации см. Пошаговое руководство: выполнение общих задач с помощью смарт-тегов в элементах управления Windows Forms 。
Щелкните и перетащите линию импоста между панелями вправо, чтобы левая панель занимала большую часть места.
SplitContainer Используйте подвижную границу разделительной панели, чтобы DemoCalculator Управление разделено на две панели. Левая панель содержит кнопки калькулятора и дисплей, а правая панель отображает записи арифметических операций, выполненных пользователем.
В окне «Свойства» установите BorderStyle Измените значение свойства на Fixed3D 。
На панели инструментов щелкните «Общие элементы управления» Узел, чтобы открыть узел. Выбрать ListView Управляйте и перетащите на SplitContainer Правая панель управления.
Нажмите на ListView Глиф смарт-тега элемента управления. На панели смарт-тегов измените View Измените настройку на Details 。
На панели смарт-тегов щелкните «Изменить столбец» 。
"Редактор коллекции ColumnHeader" Откроется диалоговое окно.
в "Редактор коллекции ColumnHeader" В диалоговом окне щелкните "Добавить в" Кнопка для ListView Добавьте столбец к элементу управления. Будут перечислены Text Значение атрибута изменено на «История». Нажмите на "определить" Создайте столбец.
На панели смарт-тегов щелкните «Стыковка в родительском контейнере» , А затем щелкните глиф смарт-тега, чтобы закрыть панель смарт-тега.
В панели инструментов "контейнер" В узле TableLayoutPanel Перетащите управление SplitContainer Левая панель управления.
TableLayoutPanel Элемент управления отображается на поверхности конструктора, и открывается панель смарт-тегов элемента управления. TableLayoutPanel Элемент управления размещает свои дочерние элементы управления в сетке. Для получения дополнительной информации см. Пошаговое руководство: использование TableLayoutPanel для упорядочивания элементов управления в форме Windows Forms. 。 TableLayoutPanel Контроль будет содержать DemoCalculator Дисплей и кнопки управления.
Нажмите на панель смарт-тегов «Редактировать строки и столбцы» 。
«Стили столбца и строки» Откроется диалоговое окно.
Нажмите на "Добавить в" Нажимайте, пока не отобразятся все пять столбцов. Выберите все пять столбцов и нажмите «Тип размера» В коробке "процент" Кнопка выбора. будут "процент" Значение установлено на 20 。 Эта операция устанавливает одинаковую ширину каждого столбца.
в "дисплей" Щелкните в раскрывающемся списке "Строка" 。
Нажмите на "Добавить в" Нажимайте, пока не отобразятся все пять строк. Выделите все пять строк и нажмите «Тип размера» В коробке "процент" Кнопка выбора. будут "процент" Значение установлено на 20 。 Эта операция устанавливает одинаковую высоту каждой строки.
Нажмите на "определить" Примите изменения и щелкните глиф смарт-тега, чтобы закрыть панель смарт-тега.
В окне «Свойства» установите Dock Измените значение свойства на Fill 。
На этом этапе вы установили макет элементов управления, и теперь их можно заполнить кнопками и дисплеями. DemoCalculator Контроль.
Контроль заполнения
На панели инструментов дважды щелкните TextBox Значок управления.
TextBox Контроль будет помещен в TableLayoutPanel В первой ячейке элемента управления.
В окне «Свойства» установите TextBox Контроль ColumnSpan Измените значение атрибута на 5 。
TextBox Элемент управления переместится в среднюю позицию своего ряда.
будут TextBox Контроль Anchor Измените значение свойства на Left 、 Right 。
TextBox Элемент управления расширяется по горизонтали и охватывает все пять столбцов.
будут TextBox Контроль TextAlign Измените значение свойства на Right 。
В окне "Свойства" разверните Font Узел свойств. будут Size Установить как 14 И воля TextBox Контроль Bold Установить как true 。
На панели инструментов дважды щелкните Button икона.
Button Контроль будет помещен в TableLayoutPanel В следующей открытой ячейке элемента управления.
На панели инструментов дважды щелкните Button Значок четыре раза заполнить TableLayoutPanel Второй ряд элемента управления.
Удерживая нажатой клавишу Shift, нажимайте каждую Button Элементы управления, выберите все пять элементов управления. Нажмите Ctrl + C, чтобы Button Элемент управления копируется в буфер обмена.
Нажмите Ctrl + V три раза, чтобы изменить Button Вставьте копию элемента управления в TableLayoutPanel Остальные ряды элемента управления.
Удерживая нажатой клавишу Shift, нажимайте каждую Button Элементы управления, выберите все 20 элементов управления.
В окне «Свойства» установите Dock Измените значение свойства на Fill 。
все Button Элементы управления будут закреплены, чтобы заполнить ячейку, в которой они находятся.
В окне "Свойства" разверните Margin Узел свойств. будут All Установлен на 5 。
все Button Элементы управления уменьшатся, чтобы увеличить их взаимную прибыль.
Выбрать “button10” с участием “button20” , И нажмите Удалить, чтобы удалить его из макета.
Выбрать “button5” с участием “button15” , А затем переместите эти две кнопки RowSpan Измените значение свойства на 2 。 Эти две кнопки станут DemoCalculator Контроль "Очистить" с участием “=” Кнопка.
После заполнения вашего элемента управления или формы несколькими элементами управления вы можете найти это через «Схема документа» Окно, просматривающее ваш макет, упрощает поиск ваших собственных элементов управления или форм.
Используйте окно «Структура документа», чтобы найти
в "Посмотреть" Пункт в меню «Другие окна» И нажмите «Схема документа» 。
«Схема документа» Окно покажет DemoCalculator Древовидное представление элемента управления и составляющих его элементов управления. подобно SplitContainer Такой контейнерный элемент управления отображает свои дочерние элементы управления как дочерние узлы в дереве. Также можно использовать «Схема документа» Окно переименовывает элемент управления на месте.
в «Схема документа» Щелкните правой кнопкой мыши в окне “button1” И нажмите "Переименовать" 。 Измените его название на sevenButton 。
использовать «Схема документа» Окно, согласно следующему списку, будет 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
использовать «Схема документа» И окно «Свойства», измените каждое в соответствии со следующим списком Button Название контроля Text Значение атрибута.
будут 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 Измените свойство текста элемента управления на +
На поверхности конструктора удерживайте нажатой клавишу Shift, нажимая каждый Button Элементы управления, выберите все эти элементы управления.
В окне "Свойства" разверните Font Узел свойств. будут Size Установить как 14 И поставить все Button Контроль Bold Установить как true 。
Это завершит DemoCalculator Дизайн элемента управления. Осталось предоставить логику калькулятора.
DemoCalculator Кнопки на элементе управления содержат обработчики событий, которые можно использовать для реализации большей части логики калькулятора. Используя конструктор Windows Forms, вы можете реализовать заглушки для всех обработчиков событий для всех кнопок одним двойным щелчком.
Реализовать обработчик событий
На поверхности конструктора удерживайте нажатой клавишу Shift, нажимая каждый Button Элементы управления, выберите все эти элементы управления.
Дважды щелкните один из них Button Контроль.
Редактор кода открывается и находит обработчик событий, созданный дизайнером.
из-за DemoCalculator Контроль от UserControl Класс наследуется, поэтому вы можете использовать «Тестовый контейнер UserControl» Проверьте поведение элемента управления. Для получения дополнительной информации см. Как: проверить поведение элемента управления UserControl во время выполнения 。
Тестовый контроль
Нажмите F5, чтобы «Тестовый контейнер UserControl» Сборка и запуск DemoCalculator Контроль.
Нажмите на SplitContainer Перетащите границу между панелями влево и вправо. TableLayoutPanel Все его дочерние элементы управления изменят свой размер в соответствии с доступным пространством.
После тестирования элемента управления нажмите "неисправность" 。
DemoCalculator Этот элемент управления можно использовать в других составных элементах управления или в форме. Следующая процедура описывает, как использовать элемент управления.
Создать проект
Первым шагом является создание проекта приложения. Вы будете использовать этот проект для создания приложения, которое отображает настраиваемые элементы управления.
Создать проект
в "файл" В меню наведите указатель на "Добавить в" И нажмите "Новый проект" включить "Новый проект" Диалоговое окно.
в "имя" Введите в поле DemoCalculatorTest И нажмите "определить" 。
В обозревателе решений щелкните правой кнопкой мыши “DemoCalculatorTest” Элемент и щелкните «Добавить ссылку» Открыть «Добавить ссылку» Диалоговое окно.
Нажмите на "проект" Tab и дважды щелкните DemoCalculatorLib Project, чтобы добавить ссылку на тестовый проект.
В обозревателе решений щелкните правой кнопкой мыши DemoCalculatorTest И нажмите «Установить как запускаемый проект» 。
В конструкторе Windows Forms увеличьте размер формы примерно до 700 x 500.
Используйте свои элементы управления в макете формы
Для использования в приложении DemoCalculator Control, вам нужно разместить элемент управления в форме.
Используйте свои элементы управления в макете формы
На панели инструментов разверните «Компонент DemoCalculatorLib» узел.
Из панели инструментов DemoCalculator Перетащите элемент управления на форму. Переместите элемент управления в верхний левый угол формы. Когда элемент управления приближается к границе формы, отображается линия выравнивания. Эти линии выравнивания указывают Padding Свойства и элементы управления Margin Расстояние атрибута. Поместите элемент управления в положение, указанное линией выравнивания.
будут Button Перетащите элемент управления из панели инструментов на форму.
в DemoCalculator Перемещайте элемент управления Button Контролируйте и наблюдайте, где появляются линии выравнивания. Использование этой функции для точного и простого выравнивания элементов управления. Удалить по завершении Button Контроль.
Щелкните правой кнопкой мыши DemoCalculator Control и нажмите «Атрибуты» 。
будут Dock Измените значение свойства на Fill 。
Выберите форму и разверните Padding Узел свойств. Будет ценить "Все" изменить на 20 。
DemoCalculator Управление будет основано на новом Padding Соответственно уменьшается значение.
Отрегулируйте размер формы, перетаскивая ручки разных размеров в разные положения. Наблюдаемый DemoCalculator Как соответствующим образом настроить размер элемента управления.
В этом пошаговом руководстве показано, как создать пользовательский интерфейс простого калькулятора. Вы можете захотеть расширить его функциональные возможности следующими способами:
Реализуйте логику калькулятора. Этот подход кажется простым, но интересна и сложность, связанная с переходом состояния калькулятора.
Упакуйте приложение-калькулятор для развертывания. Для получения дополнительной информации см. Как: использовать мастер публикации для публикации приложений ClickOnce 。
Конструктор Windows Forms предоставляет множество средств для создания приложений Windows Forms. В этой статье показано, как создать приложение с помощью различных средств, предоставляемых конструктором, и выполнять такие задачи:
- размещать элементы управления с помощью линий привязки;
- выполнять задачи конструктора с помощью смарт-тегов;
- устанавливать поля и отбивки для элементов управления;
- располагать элементы управления с помощью элемента управления TableLayoutPanel;
- разделять макет элемента управления с помощью элемента управления SplitContainer;
- просматривать макет в окне "Структура документа";
- размещать элементы управления с отображением размера и сведений о расположении;
- задавать значения свойств в окне "Свойства".
В итоге вы создадите пользовательский элемент управления, используя разнообразные функции макета, которые доступны в конструкторе Windows Forms. Этот элемент управления реализует пользовательский интерфейс для простого калькулятора. На следующем изображении показан общий макет элемента управления калькулятора.
Создание проекта пользовательского элемента управления
Первым шагом является создание проекта элемента управления DemoCalculator.
Откройте Visual Studio и создайте проект категории Библиотека элементов управления Windows Forms. Задайте проекту имя DemoCalculatorLib.
Чтобы переименовать файл, в обозревателе решений щелкните правой кнопкой мыши элемент UserControl1.vb или UserControl1.cs, выберите Переименовать и замените имя файла на DemoCalculator.vb или DemoCalculator.cs. Чтобы переименовать все ссылки на элемент кода UserControl1, в соответствующем запросе выберите Да.
В конструктор Windows Forms отображается поверхность конструктора для элемента управления DemoCalculator. В этом представлении можно графически спроектировать внешний вид элемента управления, выбрав элементы управления и компоненты на панели элементов и поместив их на поверхности конструктора. Дополнительные сведения см. в статье о разновидностях пользовательских элементов управления.
Разработка макета элемента управления
Элемент управления DemoCalculator содержит несколько элементов управления Windows Forms. На этом этапе вы зададите расположение элементов управления с помощью конструктора Windows Forms.
В конструкторе Windows Forms увеличьте размер элемента управления DemoCalculator, выбрав маркер изменения размера в правом нижнем углу и перетащив его вниз и вправо. В правом нижнем углу Visual Studio просмотрите сведения о размере и расположении элементов управления. Задайте элементу управления ширину 500 и высоту 400, наблюдая за сведениями о размере при изменении размера элемента управления.
На панели элементов выберите узел Контейнеры, чтобы открыть его. Выберите элемент управления SplitContainer и перетащите его на поверхность конструктора.
Элемент SplitContainer появится на поверхности конструктора элемента управления DemoCalculator.
Размер элемента управления SplitContainer автоматически устанавливается в соответствии с размером элемента управления DemoCalculator. В окне Свойства проверьте свойства, заданные для элемента управления SplitContainer . Найдите свойство Dock. Ему задано значение DockStyle.Fill. Это означает, что размер элемента управления SplitContainer устанавливается в соответствии с границами элемента управления DemoCalculator. Измените размер элемента управления DemoCalculator, чтобы проверить это поведение.
В окне Свойства замените значение свойства Dock на None .
Элемент управления SplitContainer уменьшится до размера по умолчанию и больше не будет меняться при изменении размера элемента управления DemoCalculator.
Щелкните глиф смарт-тега () в правом верхнем углу элемента управления SplitContainer . Выберите Закрепить в родительском контейнере, чтобы присвоить свойству Dock значение Fill .
Элемент управления SplitContainer закрепится по границам элемента управления DemoCalculator.
Для некоторых элементов управления доступны смарт-теги, упрощающие проектирование. Дополнительные сведения см. в разделе Пошаговое руководство: выполнение типичных задач с помощью смарт-тегов в элементах управления Windows Forms.
Выберите вертикальную границу между панелями и перетащите ее вправо, так чтобы большую часть заняла левая панель.
SplitContainer разделяет элемент управления DemoCalculator на две панели с разделяющей их границей, которую можно перемещать. На левой панели будут находиться кнопки калькулятора и экран, а на правой будет отображаться запись арифметических операций, выполненных пользователем.
В окне Свойства замените значение свойства BorderStyle на Fixed3D .
На панели элементов выберите узел Стандартные элементы управления, чтобы открыть его. Выберите элемент управления ListView и перетащите его на правую панель элемента управления SplitContainer .
Выберите глиф смарт-тега элемента управления ListView . На панели смарт-тегов замените значение параметра View на Details .
На панели смарт-тегов выберите Изменить столбцы.
Откроется диалоговое окно Редактор коллекции ColumnHeader.
На панели смарт-тегов выберите Закрепить в родительском контейнере, а затем щелкните глиф смарт-тега, чтобы закрыть панель смарт-тегов.
С панели элементов узла Контейнеры перетащите элемент управления TableLayoutPanel на левую панель элемента управления SplitContainer .
Элемент управления TableLayoutPanel отобразится на поверхности конструктора с открытой панелью смарт-тегов. Элемент управления TableLayoutPanel упорядочивает свои дочерние элементы управления в сетке. Элемент управления TableLayoutPanel будет содержать экран и кнопки элемента управления DemoCalculator. Дополнительные сведения см. в разделе Пошаговое руководство: упорядочение элементов управления в формах Windows Forms с помощью элемента TableLayoutPanel.
На панели смарт-тегов выберите Правка строк и столбцов.
Откроется диалоговое окно Стили столбцов и строк.
Нажимайте кнопку Добавить, пока не добавятся пять столбцов. Выберите все пять столбцов, а затем в поле Тип размера выберите Процент. Параметру Процент задайте значение 20. При этом каждому столбцу задается одинаковая ширина.
В разделе Показать выберите Строки.
Нажимайте кнопку Добавить, пока не добавятся пять строк. Выберите все пять строк, а затем в поле Тип размера выберите Процент. Параметру Процент задайте значение 20. При этом каждой строке задается одинаковая высота.
В окне Свойства замените значение свойства Dock на Fill .
Заполнение элемента управления
Теперь, когда макет элемента управления настроен, можно добавить в элемент управления DemoCalculator кнопки и экран.
На панели элементов выберите значок элемента управления TextBox .
Элемент управления TextBox помещается в первую ячейку элемента управления TableLayoutPanel .
В окне Свойства замените значение свойства ColumnSpan элемента управления TextBox на 5.
Элемент управления TextBox переместится в центр своей строки.
Замените значение свойства Anchor элемента управления TextBox на Left , Right .
Элемент управления TextBox расширится по горизонтали, заняв все пять столбцов.
Измените значение свойства TextBox элемента управления TextAlign на Right .
В окне Свойства разверните узел свойства Font . Задайте значение 14 для Size и true для Bold у элемента управления TextBox .
Выберите элемент управления TableLayoutPanel .
На панели элементов выберите значок Button .
Элемент управления Button разместится в следующей свободной ячейке элемента управления TableLayoutPanel .
На панели элементов выберите Button еще четыре раза, чтобы заполнить вторую строку элемента управления TableLayoutPanel .
Выберите все пять элементов управления Button , удерживая нажатой клавишу SHIFT. Нажмите клавиши CTRL+C, чтобы скопировать элементы управления Button в буфер обмена.
Трижды нажмите сочетание клавиш CTRL+V, чтобы вставить скопированные элементы управления Button в оставшиеся строки элемента управления TableLayoutPanel .
Выберите все 20 элементов управления Button , удерживая нажатой клавишу SHIFT.
В окне Свойства замените значение свойства Dock на Fill .
Все элементы управления Button закрепятся в своих ячейках.
В окне Свойства разверните узел свойства Margin . Для All задайте значение 5.
Всем элементам управления Button задается меньший размер, чтобы увеличить поля между ними.
Выберите button10 и button20, после чего нажмите клавишу DELETE, чтобы удалить их из макета.
Выберите button5 и button15, после чего замените значение их свойства RowSpan на 2. Это будут кнопки очистки и = для элемента управления DemoCalculator.
Использование окна структуры документа
Если в элементе управления или форме присутствует несколько элементов управления, перемещаться по макету удобнее с помощью окна "Структура документа".
В строке меню выберите Вид > Другие окна > Структура документа.
В этом окне структура элемента управления DemoCalculator и его составных элементов управления представлена в виде дерева. Дочерние элементы управления контейнерных элементов управления, таких как SplitContainer , отображаются в виде подузлов дерева. Окно также позволяет переименовывать размещенные элементы управления.
В окне Структура документа щелкните правой кнопкой мыши элемент button1, чтобы выбрать его, после чего щелкните Переименовать. Замените его имя на sevenButton.
В окне Структура документа замените имена элементов управления 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;
С помощью окон Структура документа и Свойства измените значения свойства Text для каждого имени элемента управления Button согласно следующему списку:
для элемента управления sevenButton замените свойство текста на 7;
для элемента управления eightButton замените свойство текста на 8;
для элемента управления nineButton замените свойство текста на 9;
для элемента управления divisionButton замените свойство текста на / (косая черта);
для элемента управления clearButton замените свойство текста на Clear;
для элемента управления fourButton замените свойство текста на 4;
для элемента управления fiveButton замените свойство текста на 5;
для элемента управления sixButton замените свойство текста на 6;
для элемента управления multiplicationButton замените свойство текста на * (звездочка);
для элемента управления oneButton замените свойство текста на 1;
для элемента управления twoButton замените свойство текста на 2;
для элемента управления threeButton замените свойство текста на 3;
для элемента управления subtractionButton замените свойство текста на - (дефис);
для элемента управления equalsButton замените свойство текста на = (знак равенства);
для элемента управления zeroButton замените свойство текста на 0;
для элемента управления changeSignButton замените свойство текста на +/- ;
для элемента управления decimalButton замените свойство текста на . (точка);
для элемента управления additionButton замените свойство текста на + (знак "плюс");
На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT.
В окне Свойства разверните узел свойства Font . Задайте значение 14 для Size и true для Bold у всех элементов управления Button .
На этом разработка элемента управления DemoCalculator завершена. Остается только добавить логику калькулятора.
Добавление обработчиков событий
Кнопки в элементе управления DemoCalculator имеют обработчики событий, которые можно использовать для реализации большей части логики калькулятора. Конструктор Windows Forms позволяет реализовать заглушки всех обработчиков событий для всех кнопок одним выбором.
На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT.
Выберите один из элементов управления Button .
В редакторе кода откроются обработчики событий, созданные конструктором.
Тестирование элемента управления
Поскольку элемент управления DemoCalculator наследуется от класса UserControl, его поведение можно проверить с помощью Контейнера для тестирования пользовательских элементов управления. Дополнительные сведения см. в разделе Практическое руководство. Тестирование поведения элемента UserControl во время выполнения.
Нажмите клавишу F5, чтобы собрать и запустить элемент управления DemoCalculator в Контейнере для тестирования пользовательских элементов управления.
Выберите границу между панелями SplitContainer и перетащите ее влево и вправо. Размеры элемента TableLayoutPanel и всех его дочерних элементов управления будут изменяться в соответствии с доступным пространством.
Завершив тестирование элемента управления, нажмите кнопку Закрыть.
Использование элемента управления в форме
Элемент управления DemoCalculator можно использовать в других составных элементах управления или в форме. Ниже описано, как это сделать.
Создание проекта
Первым шагом является создание проекта приложения. В этом проекте выполняется сборка приложения, демонстрирующего работу пользовательского элемента управления.
Создайте проект Приложение Windows Forms с именем DemoCalculatorTest.
В Обозревателе решений щелкните правой кнопкой мыши проект DemoCalculatorTest и выберите Добавить > Ссылка на проект, чтобы открыть диалоговое окно Диспетчер ссылок.
(Если вы используете Visual Studio 2017, для открытия диалогового окна Диспетчер ссылок выберите Добавить > Ссылка.)
Перейдите на вкладку Проекты и выберите проект DemoCalculatorLib, чтобы добавить ссылку на тестовый проект.
В обозревателе решений щелкните правой кнопкой мыши DemoCalculatorTest и выберите пункт Назначить запускаемым проектом.
В конструкторе Windows Forms увеличьте размер формы примерно до 700 x 500.
Использование элемента управления в макете формы
Чтобы использовать элемент управления DemoCalculator в приложении, его необходимо поместить в форму.
На панели элементов разверните узел Компоненты DemoCalculatorLib.
Перетащите элемент управления DemoCalculator с панели элементов в форму. Переместите элемент управления в левый верхний угол формы. Когда элемент управления расположен близко к границам формы, отображаются линии привязки. Линии привязки указывают расстояние свойства Padding формы и свойства Margin элемента управления. Поместите элемент управления в расположение, указанное линиями привязки.
Перетащите элемент управления Button с панели элементов и поместите его в форму.
Перемещайте элемент управления Button по элементу управления DemoCalculator, чтобы определить, где отображаются линии привязки. С помощью этой функции можно точно и легко упорядочить элементы управления. По завершении удалите элемент управления Button .
Щелкните правой кнопкой мыши элемент управления DemoCalculator и выберите пункт Свойства.
Замените значение свойства Dock на Fill .
Выберите форму, а затем разверните узел свойства Padding . Замените значение Все на 20.
Размер элемента управления DemoCalculator уменьшится в соответствии с новым значением формы Padding .
Измените размер формы, перетаскивая различные маркеры изменения размера в разные положения. Обратите внимание на то, как размер элемента управления DemoCalculator пропорционально изменяется.
Следующие шаги
В этой статье было показано, как создать пользовательский интерфейс для простого калькулятора. В дальнейшем можно расширить его функциональность, реализовав логику калькулятора, а затем опубликовать приложение с помощью ClickOnce. Вы также можете ознакомиться с руководством по созданию средства просмотра рисунков с помощью Windows Forms.
Обычно можно дважды щелкнуть файл Form1.cs в обозревателе решений, чтобы получить доступ к простому конструктору перетаскивания.
К сожалению, он открывает только код файла .
Возможно, при создании проекта произошла ошибка или вы выбрали неправильный тип проекта. Попробуйте щелкнуть «Добавить новый элемент» и выбрать новый элемент Windows Form. Возможно, вам потребуется изменить класс запуска в Program.cs для запуска программы.
Попробуйте щелкнуть правой кнопкой мыши файл дизайнера и посмотреть, сможете ли вы найти дизайнера в списке параметров «Открыть с помощью».
@ThomasWeller Если это так, то, вероятно, было бы проще воссоздать исходный проект, поскольку до сих пор сделано немногое. Я сделаю это и обновлю, если проблемы не исчезнут.
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату.
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно.
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей.
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то.
Ответы 7
Вы находитесь в режиме просмотра папок.
Перейдите в режим просмотра «Решение (проект)».
Этот значок в верхней части обозревателя решений.
Как мне переключаться между ними?
у вас есть файл решения, просто нажмите на него. Если у вас нет .sln, нажмите на .csproj
При нажатии на иконку пишет, что решения не найдено. В проводнике нет файла .sln, но есть файл .csproj. Нажатие на нее не приводит к другим результатам.
закройте VS и щелкните файл проекта в проводнике Windows.
или из VS: Файл -> Открыть -> Проект / Решение
Щелкните выделенный значок на изображении ниже. Это значок «Решения и папки», который вернет вас в режим просмотра решений.
@ColinG, судя по вашему изображению, файла решения не существует. Решения и папки не могут найти решение. На данный момент закройте Visual Studio и откройте его, щелкнув проект, а после открытия Visual Studio щелкните «Сохранить». Он снова создаст файл решения
Это не устранило проблему, хотя я попытаюсь решить эту проблему еще раз, когда смогу.
Я хочу сказать, что закройте визуальную студию и дважды щелкните файл проекта, в вашем случае это файл UserInterface.csproj.
Откройте проект из проводника. Проверить добавленное изображение
В моем случае щелкните правой кнопкой мыши Form1.cs (с правильным значком формы) и выберите "Просмотр дизайнера", все еще показывающий код.
Чтобы проверить тип проекта, можете обратиться к этот ответ.
В VS2019 просто удалите первый проект и создайте еще один. Это решит проблему просмотра страницы дизайнера. Теперь вы можете увидеть своего дизайнера.
Такая же проблема возникает при размещении другого класса перед классом формы (в данном случае мой класс ImageContainer ).
Просто переместив internal class ImageContainer после public partial class Form1 : Form < >, дизайнер перетаскивания VS2019 может загрузить мой класс Form1.
Также символ в обозревателе решений изменился на значок диалога.
Хороший улов. Меня действительно бесит, что это вещь .
Нашел это решение где-то еще:
У меня только что была аналогичная проблема в Visual Studio 2017. На «Form1.cs [Design]» была показана ошибка, и я закрыл ее. Затем я заметил, что Form1.cs не имеет опции «View Designer» (также значок изменился на значок обычного класса). К счастью, я понял, в чем была ошибка: я бы поместил класс, отличный от общедоступного частичного класса Form1, в качестве первого класса в файле Form1.cs. Исправление, из-за которого значок изменился, и снова была включена опция «View Designer».
Жаль, что такие ошибки не отображаются в списке ошибок. Мою ошибку легко обнаружить, но я понимаю, почему это может быть проблемой, особенно в более крупных проектах.
Каким-то образом файл .resx был поврежден, я исправил это, скопировав этот же файл из другой формы. Просто удалите поврежденный, вставьте его и измените имя
Другие вопросы по теме
Похожие вопросы
Запрос Entity Framework Linq оценивается клиентом при использовании настраиваемого типа с ValueConverter
Находите ответы на сложные технические вопросы по программированию, с которыми сталкиваются инженеры по всему миру в своей ежедневной практике на сайте RedDeveloper.
Этим видео-уроком я хочу начать серию видео-уроков, которые будут посвящены основам работы в программе Microsoft Word.
Проектирование форм и работа с ними
Access предоставляет возможность вводить данные как непосредственно в таблицу, так и с помощью форм. Форма в БД - это структурированное окно, которое можно представить так, чтобы оно повторяло форму бланка. Формы создаются из набора отдельных элементов управления.
Внешний вид формы выбирается в зависимости от того, с какой целью она создается. Формы Access позволяют выполнять задания, которые нельзя выполнить в режиме таблицы. Формы позволяют вычислять значения и выводить на экран результат. Источником данных для формы являются записи таблицы или запроса.
Форма предоставляет возможности для:
– ввода и просмотра информации базы данных;
Способы создания форм:
~ Конструктор форм (предназначен для создания формы любой сложности);
~ Мастер форм (позволяет создавать формы различные как по стилю, так и по содержанию);
~ Автоформа: в столбец (многостраничная – поля для записи выводятся в один столбец, в форме одновременно отображаются данные для одной записи);
~ Автоформа: ленточная (все поля записи выводятся в одну строку, в форме отображаются все записи);
~ Автоформа: табличная (отображение записей осуществляется в режиме таблица);
~ Автоформа: сводная таблица;
~ Автоформа: сводная диаграмма;
~ Диаграмма (создается форма с диаграммой, построенной Microsoft Graph);
~ Сводная таблица (создается форма Access, отображаемая в режиме сводной таблицы Excel);
Алгоритм создания форм следующий:
- Открыть окно БД;
- В окне БД выбрать вкладку Формы;
- Щелкнуть на пиктограмме Создать, расположенной на панели инструментов окна БД;
- В появившемся диалоговом окне «Новая форма» Выбрать способ создания формы и источник данных (см. рис. 3.1);
Щелкнуть на кнопке ОК.
Рис. 3.1. Выбор способа создания формы
Вызвать Мастер форм можно несколькими способами. Один из них – выбрать Мастер форм в окне диалога Новая форма и щелкнуть на кнопке ОК. Откроется окно диалога Создание форм, в котором необходимо отвечать на вопросы каждого текущего экрана Мастера и щелкать на кнопке Далее.
Рис. 3.2. Создание формы с помощью Мастера (шаг 1)
В первом окне необходимо выбрать поля из источника данных (таблиц или запросов). Для этого надо открыть список Таблицы и запросы, щелкнув на кнопку, справа. Затем доступные поля требуется перевести в Выбранные поля, выделив их и щелкнув на кнопку >> (рис. 3.3).
Между окнами находятся кнопки:
Рис. 3.3. Создание формы с помощью Мастера (шаг 2)
Например, выберем источник – таблицу Студенты и все ее поля, а затем необходимо щелкнуть на кнопке Далее.
Рис. 3.4. Создание формы с помощью Мастера (шаг 3)
В этом окне надо выбрать внешний вид формы, например в один столбец и щелкнуть Далее.
Рис. 3.5. Создание формы с помощью Мастера (шаг 4)
После выбора стиля формы (например, официальный), требуется перейти в последнее окно, щелкнув на кнопке Далее. В последнем окне Мастера требуется ввести имя формы и указать дальнейшие действия: Открыть форму для просмотра и ввода данных; Изменить макет формы.
После ввода имени формы (например, Студенты), выбора режима: «Открыть форму для просмотра и ввода данных» и щелчка на кнопке Готово, получим следующую форму для ввода и просмотра записей в таблицу Студенты (рис. 3.6).
Рис. 3.6. Создание формы с помощью Мастера (шаг 5)
Создание формы с помощью Конструктора
Для создания формы Студенты необходимо выполнить следующие действия:
1. Запустить программу Microsoft Access и открыть БД
2. В окне БД выбрать вкладку Формы. Выполнить щелчок по кнопке Создать. Появится диалоговое окно Новая форма. В этом окне необходимо выбрать из списка пункт Конструктор. Затем в списке "Выберите в качестве источника данных таблицу или запрос" выбрать имя таблицы (например, Студент). Выполнить щелчок по кнопке ОК. На экране появится окно Форма 1 (рис. 3.7).
Рис. 3.7. Окно Форма 1 Конструктора
3. Если на экране отсутствует список полей выбранной для построения формы таблицы, выбрать пункт меню Вид / Список полей.
4. Поля из списка переместить на форму (по одному или предварительно выделив с использованием клавиши Shift и мыши, для выделения всех полей выполнить двойной щелчок мышью на заголовке окна Список полей)
5. Разместить поля на форме в нужных местах по разработанному образцу
6. Перемещение полей и их имен по форме производиться следующим образом:
~ Выделить объект (поле с именем) щелчком мыши. Вокруг него появятся маркеры перемещения и изменения размеров. Перемещать поле можно вместе с привязанным к нему именем или отдельно от него.
~ Для перемещения поместить указатель мыши на квадратик, находящийся в левом верхнем углу элемента. Указатель мыши в виде ладони позволяет перемещать объект вместе с привязанным к нему именем, в виде ладони с вытянутым указательным пальцем - перемещает один объект.
~ Нажать кнопку мыши и, удерживая ее, буксировать поле или его имя в нужное место в форме. Затем отпустить кнопку мыши.
~ Для изменения надписи, связанной с полем необходимо выполнить на ней двойной щелчок мышью. В открывшемся диалоговом окне Надпись выбрать вкладку Макет и выполнить необходимые изменения. Затем закрыть окно.
~ Для изменения размеров поместить курсор на размерные маркеры, при этом курсор примет вид двунаправленной стрелки. Нажать кнопку мыши, буксировать в нужном направлении, затем отпустить кнопку мыши.
~ Для удаления поля выделить его, нажать клавишу Delete или выбрать команду Правка / Удалить.
7. Сохранить форму, выбрав из меню Файл команду Сохранить как, и в открывшемся окне выбрать режим сохранения «в текущей базе данных», затем щелчок по кнопке ОК.
8. Просмотреть форму в режиме Конструктора, выполнив щелчок по кнопке Открыть (рис. 3.8).
Рис. 3.8. Просмотр формы в режиме Конструктора
9. Если вид формы не удовлетворяет, открыть форму в режиме Конструктор и внести необходимые изменения, затем сохранить форму Файл — Сохранить или выполнить щелчок по пиктограмме Сохранить.
Шаг 0. А вдруг получится сразу?
В настоящее время IDE, поддерживающих Windows forms, не так много — буквально одна только Visual Studio, более известная как просто "студия". Поэтому будем рассматривать создание и решение проблем именно в этой среде разработки. Первым шагом запустим студию, начнём создавать новый проект и попытаемся найти Windows forms проект для C++:
Если у вас более старая версия Visual Studio, то интерфейс будет выглядеть немного иначе, однако данная функциональность будет той же. Также не исключено, что у Вас может быть данный тип проекта для C++ (на некоторых версиях формы для C++ были доступны сразу после установки IDE). Если же у Вас, как и у нас поиск не дал нужных результатов, то переходим к следующему шагу.
Шаг 1. Создание CLR проекта
Поскольку непосредственно Windows Forms проекта у нас не оказалось, мы обхитрим студию и создадим пустой CLR проект на С++. Для этого в том же окне поиска необходимо найти и выбрать Новый CLR проект , ввести имя (если нужно, то поменять директорию расположения проекта) и немного подождать, пока студия сделает свою работу.
В результате Visual Stido создаст новый C++ CLR проект, который будет выглядеть примерно так:
Шаг 2. Добавить форму
Чтобы сделать CLR проект проектом Windows Forms, нужно просто добавить в него форму. Для этого в верхнем меню нужно выбрать Проект - Добавить новый элемент и в появившемся окне выбрать категорию Visual C++ - UI и затем выбрать Форма Windows Forms .
После данной операции нас ждёт разочарование в виде ошибки Исключение из HRESULT: 0x8000000A :
Шаг 3. Исправляем появившуюся ошибку
Данная ошибка появляется из-за того, что для создания окна формы приложению необходима основная программа, создающая форму и переключающая управление на неё, однако после добавления новой формы файл Form1.cpp предсказуемо создаётся пустым. Поэтому необходимо добавить основную программу в файл с формой:
В результате код файла Form1.cpp будет выглядеть следующим образом:
Шаг 4. Переоткрыть проект
Всё, что теперь осталось сделать — это закрыть текущее решение, а затем открыть его снова. Для этого можно закрыть саму студию, а можно выбрать в верхнем меню Файл - Закрыть решение , после чего в появившемся окне выбрать только что созданный проект и открыть его заново.
Благодаря добавленному коду основной программы, студия сможет создать форму и на экране появится изображение формы, на которую можно будет добавлять компоненты, задавать их свойства, а также свойства самой формы.
Выпускник МГУ им. М.В. Ломоносова
Programforyou — это сообщество, в котором Вы можете подтянуть свои знания по программированию, узнать, как эффективно решать те или иные задачи, а также воспользоваться нашими онлайн сервисами.
Читайте также: