Visual studio 2015 конструктор

Обновлено: 18.05.2024

Конструктор XAML в Visual Studio и Blend для Visual Studio предоставляет визуальный интерфейс для разработки приложений на основе XAML, таких как WPF и UWP. Вы можете создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления из окна "Панель элементов" (окно "Ресурсы" в Blend для Visual Studio) и задавая свойства в окне "Свойства". Также можно изменить код XAML непосредственно в представлении XAML.

Для опытных пользователей предоставляется даже возможность настроить Конструктор XAML.

Xamarin.Forms не поддерживает конструктор XAML. Чтобы просмотреть пользовательские интерфейсы XAML Xamarin.Forms и изменить их во время работы приложения, используйте горячую перезагрузку XAML для Xamarin.Forms. Дополнительные сведения см. на странице горячей перезагрузки XAML для Xamarin.Forms (предварительная версия).

Рабочая область конструктора XAML

Рабочая область конструктора XAML состоит из нескольких элементов визуального интерфейса. К ним относятся область рисования (визуальная область конструктора), редактор XAML, окно "Структура документа" (окно "Объекты и временная шкала" в Blend для Visual Studio) и окно "Свойства". Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши XAML-файл в обозревателе решений и выберите Конструктор представлений.

В конструкторе XAML реализовано представление XAML и синхронизированное представление конструктора для отображения XAML-разметки приложения. Открыв XAML-файл в Visual Studio или в Blend для Visual Studio, можно переключаться между представлением конструктора и представлением XAML с помощью вкладок Конструктор и XAML. С помощью кнопки "Переключить области" можно переключить окно сверху: область рисования или редактор XAML.

Конструктор

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

В области рисования доступны следующие функции.

Линии привязки

Линии прикрепления — это границы выравнивания , которые отображаются как красные пунктирные линии для отображения выравнивания краев элементов управления или выравнивания текстовых базовых показателей. Границы выравнивания появляются, только если привязка к линиям привязки включена.

Границы сетки

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

Графические элементы сетки

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

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

Маркеры изменения размера

Маркеры изменения размера появляются на выбранных элементах управления и позволяют изменить их размер. При изменении размера элемента управления обычно отображаются значения ширины и высоты. Дополнительные сведения о работе с элементами управления в представлении Конструктор см. в статье Работа с элементами в Конструкторе XAML.

Поля

Поля представляют собой фиксированное пространство между краем элемента управления и краем его контейнера. Поля элемента управления можно задать с помощью свойств полей в разделе "Макет" в окне "Свойства ".

Графические элементы полей

Графические элементы полей можно использовать для изменения полей элемента относительно его контейнера макета. Если графический элемент поля открыт, поле не задано, а его графический значок отображается как разорванная цепь. Если поле не задано, элементы остаются на месте при изменении размеров контейнера макета во время выполнения. Если графический элемент поля закрыт, отображается значок целой цепи, а элементы перемещаются вместе с полем при изменении размеров контейнера макета во время выполнения (поля остаются фиксированными).

Маркеры элемента

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

В представлении Конструктор в левой нижней части окна доступны дополнительные команды области рисования, как показано ниже:

На этой панели инструментов доступны следующие команды:

Zoom

Команда "Масштаб" позволяет указать размер области конструктора. Вы можете выбрать масштаб от 12,5 % до 800 % или выбрать параметры, такие как Вписать выделенное и Вписать все.

Показать/скрыть сетку привязки

Показывает или скрывает сетку привязки, которая отображает линии сетки. Линии сетки используются при включении привязки к линиям сетки или привязки к линиям привязки.

Включить/выключить привязку к линиям сетки

Если привязка к линиям сетки включена, элемент, как правило, выравнивается с ближайшими горизонтальными и вертикальными линиями сетки при перетаскивании в область рисования.

Переключить фон области рисования

Выполняет переключение между светлым и темным фоном.

Включить/выключить привязку к линиям привязки

Линии привязки помогают выравнивать элементы управления относительно друг друга. Если привязка к линиям привязки включена, при перетаскивании элемента управления относительно других элементов появляются границы выравнивания, когда края и текст некоторых элементов управления выровнены по горизонтали или вертикали. Граница выравнивания отображается в виде красной пунктирной линии.

Отключить код проекта

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

Представление XAML

В представлении XAML окно, содержащее редактор XAML, активно, а редактор XAML служит основным средством разработки. Язык XAML предоставляет декларативный, основанный на XML словарь для создания пользовательского интерфейса приложения. Представление XAML поддерживает IntelliSense, автоматическое форматирование, выделение синтаксиса и перемещение по тегам. На следующем рисунке показано представление XAML с открытым меню IntelliSense:

Окно Структура документа

Окно "Структура документа" в Visual Studio аналогично окну Объекты и временная шкала в Blend для Visual Studio. Структура документа помогает выполнять следующие задачи:

Просматривать иерархическую структуру всех объектов в области рисования.

Выберите элементы, чтобы их можно было изменить. Например, можно перемещать их по иерархии или задавать их свойства в окне "Свойства". Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML.

Создавать и изменять шаблоны для элементов управления.

Создавать анимации (только Blend для Visual Studio).

Чтобы просмотреть окно "Структура документа" в Visual Studio, в строке меню выберите "Вид> другойструктуры документаWindows>". Чтобы просмотреть окно "Объекты и временная шкала" в Blend для Visual Studio, в строке меню выберите "Вид>структуры документа".

В основном представлении окна "Структура документа" или "Объекты и временная шкала" отображается иерархия документа в виде древовидной структуры. Иерархическую структуру документа можно использовать для просмотра документа на различных уровнях детализации, а также для блокировки и скрытия элементов по отдельности или в группе. Следующие параметры доступны в окне "Структура документа", "Объекты" и "Временная шкала".

Показать или скрыть

Отображает или скрывает элементы области рисования. При отображении выглядит как символ глаза. Вы также можете нажать клавиши CTRL+H , чтобы скрыть элемент и shift+CTRL+H , чтобы отобразить его.

Заблокировать или разблокировать

Блокирует или разблокирует элементы области рисования. Заблокированные элементы невозможно изменить. При отображении выглядит как символ замка в режиме блокировки. Вы также можете нажать клавиши CTRL+L , чтобы заблокировать элемент и shift+CTRL+L , чтобы разблокировать его.

Вернуть для области значение pageRoot

Параметр в верхней части окна "Структура документа" или "Объекты и временная шкала" со значком стрелки вверх выполняет перемещение в предыдущую область. Перемещение к более высокой области доступно только при изменении стиля или шаблона.

Окно "Свойства"

Окно Свойства позволяет задавать значения свойств для элементов управления. Вот как оно выглядит:

В верхней части окна "Свойства " есть различные параметры:

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

Некоторые свойства позволяют задать дополнительные свойства, для этого нужно нажать кнопку со стрелкой вниз.

Справа от значения каждого свойства отображается метка свойства в виде квадрата. Внешний вид метки свойства указывает, применены ли к свойству привязка данных или ресурс. Например, белый квадрат указывает значение по умолчанию, черный квадрат обычно указывает, что был применен локальный ресурс, а оранжевый квадрат обычно указывает, что была применена привязка данных. Щелкнув метку свойства, можно перейти к определению стиля, открыть построитель привязки данных или открыть средство выбора ресурсов.

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

Что? Этот компонент позволяет немедленно создать код для нового конструктора в классе.

Когда? Вы представляете новый конструктор и можете настроить соответствующее автоматическое объявление о нем. Или вы можете изменить существующий конструктор.

Зачем? Вы можете объявить конструктор до его использования. Но этот компонент автоматически создаст его с соответствующими параметрами. Кроме того, изменение существующего конструктора требует обновления всех мест вызова, пока этот компонент не обновит их автоматически.

Как? Конструктор можно создать несколькими способами:

Поместите курсор в любую пустую строку в классе:

Затем выполните одно из следующих действий.

Клавиатура
- Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.
- Щелкните правой кнопкой мыши и выберите меню Быстрые действия и рефакторинг.
- Щелкните значок , который отображается в левом поле, если текстовый курсор уже находится в пустой строке класса.
Выберите Создать конструктор в раскрывающемся меню.

Откроется диалоговое окно Выбор элементов.

Вы можете установить флажок Добавить проверки значений NULL, чтобы для параметров конструктора автоматически создавались проверки значений NULL.

Конструктор создается с учетом указанных параметров.

Поместите курсор на экземпляр.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Создать конструктор в (со свойствами) .

Выделите элементы, которые вы хотите добавить в созданный конструктор:

Затем выполните одно из следующих действий.

Клавиатура
- Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.
Мышь
- Щелкните правой кнопкой мыши и выберите меню Быстрые действия и рефакторинг.
- Щелкните значок , который отображается в левом поле, если текстовый курсор уже находится в строке выбора элементов.
Выберите Создать конструктор "TypeName(. )" в раскрывающемся меню.

Конструктор создается с учетом выбранных параметров.

Поместите курсор в строку с красной волнистой линией. Она указывает вызов несуществующего конструктора.

Затем выполните одно из следующих действий.

Клавиатура
- Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.
Мышь
- Щелкните правой кнопкой мыши и выберите меню Быстрые действия и рефакторинг.
- Наведите указатель мыши на красную волнистую линию и щелкните появившийся значок .
- Щелкните появившийся значок , который отображается в левом поле, если текстовый курсор уже находится в строке выбора с красной волнистой линией.
Выберите Создать конструктор в "TypeName" в раскрывающемся меню.

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

Конструктор создается со всеми параметрами, выведенными из его использования.

Добавьте параметр в вызов существующего конструктора.

Поместите курсор в строку с красной волнистой линией. Она указывает, что вы использовали конструктор, который еще не существует.

Затем выполните одно из следующих действий.

Клавиатура
- Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.
Мышь
- Щелкните правой кнопкой мыши и выберите меню Быстрые действия и рефакторинг.
- Наведите указатель мыши на красную волнистую линию и щелкните появившийся значок .
- Щелкните появившийся значок , который отображается в левом поле, если текстовый курсор уже находится в строке выбора с красной волнистой линией.
Выберите Добавить параметр в "TypeName(. )" в раскрывающемся меню.

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

Вы также можете добавить параметр к существующему методу. Дополнительные сведения см. в статье Добавление параметра в метод.

Найдите существующий конструктор и добавьте параметр:

Поместите курсор внутри добавленного параметра.

Затем выполните одно из следующих действий:
- Клавиатура
  - Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.
  - Щелкните правой кнопкой мыши и выберите меню Быстрые действия и рефакторинг.
  - Щелкните значок , который отображается в левом поле, если текстовый курсор уже находится в строке выбора с добавленным параметром.
  Выберите Создать и инициализировать свойство или Создать и инициализировать поле в раскрывающемся меню.
  
  Свойство или поле объявляется и автоматически называется в соответствии с вашими типами. Также добавляется строка кода для инициализации поля или свойства в теле конструктора.
  
  Конструктор 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.
  
  Сведения о применении диаграмм классов
  
  Разработка: редактируйте код своего проекта путем редактирования схемы классов. Добавляйте новые и удаляйте ненужные элементы. Внесенные изменения будут отражены в коде.
  
  Визуализация: лучше понимайте структуру своего проекта путем просмотра классов в проекте на схеме классов. Настраивайте схему таким образом, что было можно сосредоточиться на наиболее важных сведениях о проекте. Сохраняйте свою схему для использования ее в дальнейшем для демонстрации или в документации.
  
  Рефакторинг: переопределяйте методы, переименовывайте идентификаторы, выполняйте рефакторинг параметров, реализуйте интерфейсы и абстрактные классы.
  
  Просмотр типов и отношений
  
  В диаграмме классов отображаются сведения о типах, например о составляющих их элементах и отношениях между ними. Визуализация этих сущностей является динамическим представлением кода. Это означает, что можно изменять типы в конструкторе, а затем просматривать эти правки в исходном коде сущности. Аналогичным образом диаграмма классов синхронизируется с изменениями, вносимыми в файлы с кодом.
  
  Если проект содержит диаграмму классов и в проекте есть ссылка на тип, который находится в другом проекте, диаграмма классов не отображает этот тип до сборки проекта для него. Аналогичным образом, диаграмма не отображает изменения кода внешней сущности, пока вы не перестроите проект с этой сущностью.
  
  Процесс создания диаграммы классов
  
  Диаграммы классов помогают понять структуру классов в проектах. Возможно, эти проекты были созданы другими разработчиками или необходимо просто обновить ваш собственный проект. Диаграммы классов можно использовать для настройки, совместного использования и предоставления сведений о проекте другим пользователям.
  
  Первым шагом в предоставлении сведений о проекте является создание схемы классов, отображающей то, что вы хотите показать. Дополнительные сведения см. в разделе Добавление диаграммы классов. Можно создать несколько схем классов для проекта, которые можно использовать для отображения отдельного представления проекта, выбранного подмножества типов проекта или выбранного подмножества членов типов.
  
  Кроме определения того, что именно показывает каждая диаграмма классов, также можно изменить способ представления данных. Дополнительные сведения см. в статье Практическое руководство. Настройка диаграмм классов.
  
  После точной настройки одной или нескольких схем классов можно скопировать их в документы Microsoft Office и распечатать или экспортировать в виде графических файлов. Дополнительные сведения см. в разделе Практическое руководство. Копирование элементов диаграммы классов в документ Microsoft Office, Практическое руководство. Печать диаграмм классов и Практическое руководство. Экспорт диаграмм классов в виде изображений.
  
  Конструктор классов не отслеживает расположение исходных файлов, поэтому, изменение структуры проекта или перемещение исходных файлов в проекте может привести к тому, что конструктор классов не будет отслеживать тип, особенно исходный тип для typedef, базовые классы или типы ассоциаций. Может возникнуть ошибка вида Конструктору классов не удалось отобразить этот тип. В этом случае перетащите измененный или перемещенный исходный код в схему классов и повторно отобразите ее.
  
  Не так давно компания Microsoft представила обновленные предложения продуктов семейства Visual Studio. Visual Studio 2015 Enterprise на текущий момент является топ-продуктом и предоставляет доступ ко всем возможностям, созданным компанией Microsoft для разработки программного обеспечения.
  
  Не смотря на наличие бесплатной версии Visual Studio Сommunity, обладающей огромным функционалом, достаточным для комфортной разработки, возможности этих инструментов различаются. Посмотрим, некоторые дополнительные преимущества, которые предлагает Visual Studio 2015 Enterprise.
  
  Помимо нюансов в вопросах масштабирования команды разработчиков, Visual Studio Enterprise также имеет заметные преимущества в технологических сценариях, а именно для отладки и тестирования создаваемого программного обеспечения.
  
  Отладка
  
  В VS 2015 Enterprise расширяются возможности работы с кодом, благодаря функциям CodeLens, IntelliTrace, CodeMap и другим возможностям работы с большими объемами кода, которые пригодятся на следующих этапах развития проекта.
  
  СodeLens
  
  CodeLens представляют из себя подсказки, которые появляются над вашим кодом, предоставляющие информацию о том, какие зависимости есть у этого кода, результаты тестов этого метода, кто менял этот код, связанные рабочие элементы, чекины и т.д. Все, что необходимо знать о коде доступно в контексте редактора:
  
  Для получения более подробной информации достаточно нажать на подсказку, чтобы переместится прямо в код, связанный с этим методом или классом.
  
  Подробнее о возможностях CodeLens можно узнать по ссылке.
  
  IntelliTrace
  
  Возможности IntelliTrace значительно повышают продуктивность отладки. На диагностику ошибок может уходить большое количество времени: исходный код просматривается в поисках связанных фрагментов кода и интуитивно в разные места устанавливаются точки останова. IntelliTrace автоматически ведет журналы выполнения кода, запоминает и отмечает события в таймлайнах, которые далее можно просматривать, перемещаться и проверять состояния:
  
  Двойное нажатие на событие переместит к связанному коду. А двойное нажатие на исключение позволит увидеть стек вызовов в те моменты, когда исключение было зафиксировано приложением:
  
  CodeMap
  
  Эта возможность пригодится при работе с большими кодовыми базами. Код, может быть написан другой командой разработчиков, может быть сложен и вам сложно его отлаживать. В этом случае пригодится CodeMap. Когда необходимо понять специфичные зависимости в имеющемся коде, можно визуализировать их в качестве карты, построить архитектуру решения, используя эту возможность.
  
  Поддерживается так же перемещение по созданной карте с параллельно открытым кодом. Это помогает отслеживать ваше местонахождение в коде во время работы. Карты могут генерироваться для решения, проекта или функции, выбором опции через нажатие правой кнопки мыши соответственно:
  
  Вы можете добавлять легенду, комментарии и т.д. Подробнее по ссылке.
  
  Тестирование
  
  Visual Studio 2015 Enterprise позволяет использовать все возможности платформы Microsoft, для обеспечения контроля за качеством выпускаемого продукта. VS Enterprise поддерживает инструменты для ручного тестирования, модульных тестов, нагрузочного тестирования, управления тестовыми средами и т.д.
  
  IntelliTest
  
  Использование технологии IntelliTest позволяет проанализировать код и автоматически сгенерировать соответствующие модульные тесты.
  
  Для каждого выражения в коде генерируются входные данные. Анализируются так же все возможные операторы и выражения, которые могут вызвать исключения. Эти данные используются для генерации тестовых данных для использования их в качестве параметров модульных тестов для каждого метода:
  
  IntelliTest позволяет обеспечить высокий уровень покрытия кода модульными тестами, например, при наличии больших «старых» кодовых баз, что может значительно повысить продуктивность разработки и сфокусироваться на выполнении задач для создания ПО.
  
  Сгенерированные тесты можно сохранять в тестовые проекты для обеспечения регрессионного тестирования.
  
  Microsoft Fakes
  
  Microsoft Fakes — фреймворк, который помогает при тестировании приложения, заменяя компоненты решения заглушками и обертками — небольшими управляемыми фрагментами кода. Например, изолируя зависимый код при тестировании, можно быть уверенными, что если тест не был пройден, то проблема находится именно в этом месте и не зависит от других факторов. Эти возможности позволяют расширить сценарии тестирования, позволяя тестировать код, когда другие части приложения не готовы или не работоспособны. Подробнее об этой возможности по ссылке.
  
  Нагрузочное тестирование
  
  После создания теста можно настроить его свойства и указать необходимые параметры:
  
  Для создания нагрузочного теста Visual Studio предоставляет шаблон теста, который можно настроить при помощи мастера:
  
  Затем добавить в него созданный тест производительности.
  
  При запуске нагрузочных тестов с помощью аккаунта Visual Studio Online, выполнение тестов и генерирование нагрузки будет происходить в указанном датацентре Azure. Возможно так же выполнять нагрузочные тесты локально.
  
  Visual Studio предоставляет сводку результатов о запуске теста, данные счетчиков производительности, инструменты для анализа теста пошагово:
  
  Управление процессами разработки
  
  Благодаря возможностям MSDN подписки, предоставляемой с Visual Studio 2015 Enterprise, становятся доступны инструменты для построения процессов управления проектами и командной работой: Team Foundation Server или Visual Studio Online Advanced.
  
  Выбирая шаблоны процессов, с помощью нескольких манипуляций можно построить совместную работу всей команды, следить за выполнением плана, требований исправлением дефектов и т.д. Так же получать многоуровневую отчетность: от результатов выполнения сборки проекта до степени покрытия требований кодом.
  
  Читайте также: