#Визуальный дизайнер

Дизайнер NetForms — это расширение VS Code NetForms Designer (netforms.netforms-designer). Это дизайнер Windows Forms из Visual Studio, заново сделанный для VS Code, на Windows и Linux. Правка форм работает полностью без сети; создание проектов и форм использует шаблоны NetForms из NuGet.

Как поставить его и VS Code: Установка и настройка.

#Как это устроено

• *.Designer.cs открывается холстом (Open as Text в заголовке редактора показывает код). F7 — переход в MainForm.cs, Shift+F7 — обратно.
• Форму на холсте рисует сам NetForms: хост времени разработки (tools/NetFormsDesigner.Host, входит в расширение) читает InitializeComponent() через Roslyn без компиляции вашего проекта, строит живую форму и отдаёт картинку в webview.
• Каждая правка записывается обратно в *.Designer.cs так, как пишет Visual Studio (тот же порядок операторов, те же комментарии, те же правила ShouldSerialize — это сверяется с настоящим сериализатором WinForms в CI). Форма, сохранённая здесь, без изменений открывается в Visual Studio, и наоборот. Единственный источник истины — файл: правьте его как текст или переключайте ветки, холст перечитается.
• Переименование контрола переименовывает поле, обработчики событий и их использования в вашем коде.
• Вкладка «События»: + рядом с событием пишет обработчик с именем по умолчанию (button1_Click) в MainForm.cs и открывает его — так же, как двойной щелчок по событию (или по контролу — для его события по умолчанию); ввод имени и Enter привязывают обработчик со своим именем. → — переход к обработчику, ✕ — отвязать (метод остаётся в коде, как в Visual Studio).

#Создание проектов и форм

NetForms: Create New Project… и NetForms: New Form… (есть и в контекстном меню папки в проводнике) запускают dotnet new с пакетом NetForms.Templates. В первый раз расширение ставит из NuGet ту версию шаблонов, для которой оно сделано (dotnet new install NetForms.Templates::<версия>); новый проект ссылается на пакет NetForms той же версии. Новая форма получает пространство имён проекта плюс папки, как в Visual Studio, и открывается на холсте. Кроме пустой формы и пользовательского контрола есть готовые: диалоговое окно (ОК и Отмена с DialogResult, AcceptButton/CancelButton, фиксированная рамка), окно «О программе» (продукт, версия, авторские права и описание из атрибутов сборки), форма входа (имя и пароль) и заставка (окно без рамки с названием, версией и индикатором). Из командной строки — dotnet new netforms-dialog, netforms-aboutbox, netforms-login, netforms-splash.

#Команды

Отладка (F5) — от расширения C#: его команда .NET: Generate Assets for Build and Debug создаёт launch.json.

#Настройки

#Холст

Слева две вкладки: Элементы и Структура документа (Document Outline) — контролы формы деревом (в каждом контейнере — сначала передний, пункты полосы — под ней), как в Visual Studio. Щелчок выбирает; перетаскивание на контейнер кладёт контрол в него, выше или ниже другого контрола — ставит на это место среди соседей (z-порядок: порядок докинга, порядок FlowLayoutPanel).

Смарт-теги: стрелка ◂ в правом верхнем углу выбранного контрола открывает панель Задачи, как в Visual Studio, — самые нужные свойства (MultiLine у TextBox; источник данных и разрешения добавлять, править, удалять у таблицы; режим размера PictureBox; ориентация SplitContainer…), редакторы (Изменить пункты…, Изменить колонки…, Изменить узлы…) и команды: Заполнить родительский контейнер, Добавить/Удалить вкладку, Добавить колонку/строку, Встроить в ToolStripContainer (полосы — по его сторонам, прочие контролы — в середину) и у MenuStrip Вставить стандартные пункты (File, Edit, Tools, Help с сочетаниями клавиш; без картинок Visual Studio).

Перемещение и изменение размера мышью или стрелками (Ctrl — по 8, Shift — размер), линии привязки, выбор нескольких с Ctrl/Shift или рамкой (на форме; внутри панели или группы — когда она уже выбрана, и тогда она перемещается за значок ✥ в левом верхнем углу, как в Visual Studio; Ctrl/Shift добавляет к выбранному), Escape выбирает родителя, перенос в другой контейнер, Формат → Выровнять / Сделать одинаковыми / Интервалы, масштаб, блокировка, на передний / задний план, режим порядка обхода (щёлкайте по контролам по порядку). Докнутые контролы обведены пунктиром и тянутся только за свободную кромку, как в Visual Studio. Компоненты без места на форме (Timer, ToolTip, ImageList, меню, диалоги) попадают в лоток под формой. Отмена и повтор — Ctrl+Z / Ctrl+Y внутри холста.

Ctrl+C / Ctrl+X / Ctrl+V копируют, вырезают и вставляют контролы вместе со всем содержимым (дочерние контролы, пункты меню, колонки, ячейки TableLayoutPanel), в том числе в другую форму; Ctrl+D дублирует рядом с оригиналом. Вставленный контрол сохраняет имя, если оно свободно (иначе — button2), и обработчики событий, если вставлен в ту же форму. Правый щелчок открывает контекстное меню, как в Visual Studio: перейти к коду, вырезать, копировать, вставить, дублировать, удалить, передний/задний план, блокировка, выбрать родителя, свойства; у формы — «Сделать стартовой формой».

TableLayoutPanel раскладывается по ячейкам, как в Visual Studio. Ячейки нарисованы пунктиром; контрол, брошенный из панели элементов или перетащенный в таблицу, встаёт в ячейку под мышью (она подсвечивается), на занятую ячейку — меняется местами с тем, кто в ней; стрелки двигают контрол по ячейкам; заполненная таблица растёт на строку (или столбец — по GrowStyle). Границу между столбцами или строками можно тянуть мышью — меняется их размер. … у Columns и Rows в окне свойств открывает редактор: тип размера каждого (Absolute — пиксели, Percent — доля оставшегося места, AutoSize — по содержимому) и размер, вставка, удаление, перестановка; контролы едут вместе со своими столбцами, а контролы удалённого столбца переезжают в свободные ячейки (вместе с ним не удаляются). Правый щелчок в таблице — вставить или удалить столбец или строку под мышью. У контрола в таблице в окне свойств есть Column, Row, ColumnSpan и RowSpan; каждый контрол таблицы, которую правил дизайнер, пишется как Controls.Add(control, column, row).

Щелчок по заголовку вкладки TabControl показывает эту страницу — так раскладываются контролы на каждой вкладке (выбор пишется в SelectedIndex, как в Visual Studio). … у TabPages, Items полосы меню или панели инструментов, DropDownItems и Columns открывает редактор коллекции: элементы по их заголовкам, добавление, удаление (страница — вместе с её контролами), перемещение вверх и вниз; - добавляет разделитель меню. У пунктов полосы вид нового пункта выбирается рядом с ним — кнопка, надпись, раскрывающаяся или разделённая кнопка, разделитель, поле со списком, текстовое поле, индикатор (что Visual Studio предлагает для этой полосы); «Изменить пункты…» / «Изменить подпункты…» в контекстном меню открывает редактор.

Столбцы DataGridView и ListView (в режиме Details) выбираются щелчком по заголовку и правятся в окне свойств: Width, DataPropertyName, ReadOnly, стиль ячеек и остальное; ColumnType превращает столбец DataGridView в столбец флажков, списка, кнопок, картинок или ссылок с тем же именем и настройками. Сам DataGridView выбирается щелчком по телу таблицы (или Escape на столбце).

FlowLayoutPanel раскладывается по порядку, а не по координатам: добавленный контрол встаёт в конец, брошенный или перетащенный в панель — туда, где показывает метка между контролами; перетаскивание внутри панели меняет порядок, а стрелки сдвигают выбранный контрол на одно место назад или вперёд.

Nodes у TreeView (…) открывают редактор узлов, как в Visual Studio: узлы деревом — Добавить корень, Добавить дочерний, удалить, выше и ниже, наружу (соседом родителя) и внутрь (дочерним узлом выше) — и у выбранного узла Text, Name, ImageKey, SelectedImageKey и StateImageKey (из ImageList дерева, с миниатюрами), Tag, ToolTipText и Checked. Текстом… — правка текстов строками с отступами.

▾ рядом с Anchor, Dock, цветом или шрифтом открывает редактор как в Visual Studio: четыре планки вокруг прямоугольника для Anchor, шесть мест для Dock, выбор цвета со вкладками Свои (палитра), Веб и Системные, семейство, размер и стиль шрифта с образцом. Кнопка со своим цветом получает UseVisualStyleBackColor = false, как в Visual Studio, — иначе цвет не виден.

Привязка данных задаётся в окне свойств, как в Visual Studio. DataSource (у BindingSource, DataGridView, ComboBox, ListBox) предлагает источники привязки формы и классы проекта (его сборка загружается так же, как для своих контролов, — сначала соберите проект): класс, выбранный для BindingSource, даёт DataSource = typeof(Customer); для таблицы или списка — свой customerBindingSource (или тот, что на форме уже есть для этого класса), а таблица получает по колонке на каждое свойство (nameDataGridViewTextBoxColumn, для bool — колонку флажков). DisplayMember, ValueMember, DataMember и DataPropertyName колонки подсказывают свойства источника. Группа (DataBindings) привязывает свойства контрола (Text, Tag, Checked, Value, SelectedValue…) к свойству источника: customerBindingSource - Name пишет textBox1.DataBindings.Add(new Binding("Text", customerBindingSource, "Name", true)).

Сплиттер SplitContainer перетаскивается прямо на холсте, как в Visual Studio: за мышью идёт полоса, а SplitterDistance ставится, когда кнопку отпустили (кроме IsSplitterFixed и свёрнутой панели).

ToolStripContainer редактируется как в Visual Studio: полосы (ToolStrip, MenuStrip, StatusStrip) кладутся в четыре боковые панели, всё остальное — в середину (ContentPanel); если контейнер выбран, щелчок в панели элементов кладёт полосу в верхнюю панель, а контрол — в середину. Полоса встаёт в тот ряд, на который её бросили, или в новый, если бросить на полосу за последним рядом; её можно перетащить на другое место, в другой ряд или на другую сторону. В дизайнере пустая верхняя панель держит 25 пикселей, чтобы было куда бросить, остальные и полоса за последним рядом — 8 (во время работы пустая панель места не занимает). Скрыть сторону — TopToolStripPanelVisible и соседние свойства.

Картинки и значки — Image, BackgroundImage, Icon формы, Image пункта меню — выбираются из файла кнопкой … в окне свойств (✕ убирает; в гриде видна миниатюра) и хранятся в .resx формы, как у Visual Studio: button1.Image = (Image)resources.GetObject("button1.Image"). Картинки ImageList (Images, …) добавляются из файлов, переименовываются, переставляются и удаляются; ImageStream списка тоже уходит в .resx. Локализуемая форма (Localizable = true) по-прежнему показывается, но не записывается (её свойства — в .resx по культурам).

Меню раскрываются на холсте, как в Visual Studio: щелчок по пункту меню показывает под ним его выпадающий список (подменю — справа), а ContextMenuStrip, выбранный в лотке, раскрывается в левом верхнем углу формы. Любой пункт в них можно выбрать — двойной щелчок пишет его обработчик Click, а ShortcutKeys, Checked, Image и собственные DropDownItems задаются в окне свойств. Выбор чего-то другого закрывает меню.

ToolTip, HelpProvider, ErrorProvider и FlowLayoutPanel дают контролам свои свойства — в окне свойств они подписаны именем поставщика: ToolTip on toolTip1, HelpString on helpProvider1, Error on errorProvider1, FlowBreak on flowLayoutPanel1 — и пишутся как toolTip1.SetToolTip(button1, "...").

BindingNavigator, брошенный на форму, появляется со стандартными кнопками (первая, предыдущая, позиция, счётчик, следующая, последняя, добавить, удалить) — каждая становится компонентом формы с именем как в Visual Studio (bindingNavigatorMoveFirstItem, …); BindingSource задаётся в окне свойств. HelpProvider добавляет всем контролам формы свойства HelpString, HelpKeyword, HelpNavigator и ShowHelp — так же, как ToolTip добавляет ToolTip on toolTip1. Компоненты печати (группа Printing: PrintDocument, PrintDialog, PageSetupDialog, PrintPreviewDialog) уходят в лоток, PrintPreviewControl ставится на форму.

#Библиотеки элементов управления

По шагам — с проверкой, .vscode/netforms.json и тем, как написать свою библиотеку: Библиотеки элементов управления в дизайнере.

На панели элементов есть собственные элементы управления проекта, как группа «Компоненты <Проект>» в Visual Studio: все открытые контролы, пользовательские контролы и компоненты проекта (не формы) из последней успешной сборки. После сборки — в терминале, по F5 или кнопкой ↻ на панели — дизайнер подхватывает их сам; контрол, добавленный после последней сборки, до следующей остаётся заглушкой с именем типа.

Другие библиотеки подключаются командой NetForms: Add Control Library… (кнопка + Библиотека элементов… на панели); само при открытии формы или перетаскивании ничего не ставится. Источники:

Перед добавлением сборки библиотеки читаются без выполнения её кода: собрана под NetForms — добавляется; под настоящий System.Windows.Forms — предупреждение (проект может не собраться на Linux); нативные части только для Windows — предупреждение; собрана под .NET Framework или без фреймворка, совместимого с .NET 10, — не добавляется, с объяснением. Затем показываются найденные контролы и компоненты с иконками из [ToolboxBitmap]; снимите галочки с лишних.

Ссылки хранятся в .csproj, группы панели элементов — в .vscode/netforms.json (закоммитьте его — и у коллег панель будет той же). Библиотека, ссылка на которую пропала из .csproj, скрывается, а не ломает дизайнер. Добавленные раньше библиотеки предлагаются первыми в следующем проекте.

Код библиотеки выполняется в хосте дизайнера, как и в Visual Studio. В папке, которой вы не доверились (ограниченный режим), панель перечисляет контролы только по метаданным: их код не загружается, добавить ничего нельзя. Контрол, у которого бросает исключение конструктор или OnPaint, рисуется красным крестом с текстом ошибки — форма всё равно открывается, и из неё ничего не теряется. Сборки загружаются из копии, поэтому следующая сборка не упрётся в занятую .dll.

#Пока нет

• Правки формы с Localizable = true (такие формы открываются только для чтения с объяснением).
• Редактора темы.
• Дизайн-тайм-дополнений сторонних библиотек: их собственных дизайнеров ([Designer], смарт-теги) и UITypeEditor. Их TypeConverter работают. Как загружаются библиотеки — designer-control-libraries.md.

#Язык

Интерфейс следует языку VS Code: английский или русский. Группы панели элементов и категории свойств названы как в русской Visual Studio; описания свойств берутся из WinForms и остаются на английском.

Исправить страницу на GitHub