A real-time visual designer for C# Windows Forms applications in VS Code. This extension allows you to design Windows Forms GUIs visually, similar to Visual Studio's designer, directly within VS Code. It bridges the gap for .NET developers who prefer the lightweight and versatile environment of VS Code but miss the visual design capabilities of the full Visual Studio IDE.
Features
🎨 Visual Designer
- Drag and Drop Interface: Intuitively drag controls from the Toolbox and drop them onto the design canvas.
- Real-time Synchronization:
- Code-to-Design: Changes made manually in the
.Designer.cs file are immediately reflected in the visual designer.
- Design-to-Code: Moving, resizing, or modifying controls in the designer automatically updates the underlying C# code.
- Multi-Control Selection: Select multiple controls using
Ctrl+Click or Shift+Click to move or delete them simultaneously.
- Clipboard Operations: Duplicate controls easily by holding
Ctrl and dragging them.
Access a wide range of standard Windows Forms controls organized by category:
- Common Controls: Button, Label, TextBox, CheckBox, RadioButton, ComboBox, ListBox, ListView, PictureBox, ProgressBar, and more.
- Containers: Panel, GroupBox, TabControl, SplitContainer, FlowLayoutPanel, TableLayoutPanel.
- Menus & Toolbars: MenuStrip, ToolStrip, StatusStrip, ContextMenuStrip.
- Data: DataGridView, BindingNavigator, BindingSource, DataSet.
- Components: Timer, BackgroundWorker, ImageList, ErrorProvider, FileSystemWatcher, and system components like Process and SerialPort.
- Dialogs: OpenFileDialog, SaveFileDialog, ColorDialog, FontDialog, FolderBrowserDialog.
- Printing: PrintDocument, PrintDialog, PrintPreviewDialog.
📐 Intelligent Layout & Positioning
- Smart Snaplines: Visual guidelines appear automatically when dragging controls to help you align them perfectly with other controls (left, right, top, bottom, and text baseline alignment).
- Grid System: Optional snap-to-grid functionality for precise control placement.
- Zoom Controls: Zoom in and out of the canvas to work on fine details or get a high-level view of your form.
- Alignment Tools: Dedicated toolbar buttons to:
- Align Top / Middle / Bottom: Align selected controls to the top, vertical center, or bottom of the primary selection.
- Align Left / Center / Right: Align selected controls to the left, horizontal center, or right.
- Distribute Horizontally / Vertically: Evenly space selected controls.
- Make Same Width / Height: Resize controls to match the primary selection.
📝 Advanced Property Editor
- Property Grid: A robust property inspector that allows you to modify control properties such as:
- Layout: Location, Size, Anchor, Dock, Padding, Margin.
- Appearance: BackColor, ForeColor, Font, Text, Image, BackgroundImage.
- Behavior: Enabled, Visible, TabIndex, TabStop.
- Data: DataSource binding for supported controls (e.g., DataGridView).
- Type-Specific Editors:
- Color Picker: Visual color selection for background and foreground properties.
- Image Picker: Browse and select images for PictureBox and other controls.
- Anchor Editor: Visual editor for setting control anchors.
- Dock Editor: Visual selector for docking styles.
- Font Editor: Standard font selection dialog.
🌳 Document Outline
- Hierarchical View: A tree-view sidebar that displays the logical structure of your form.
- Parent-Child Relationships: Easily visualize and navigate through nested controls (e.g., buttons inside panels).
- Selection Sync: Selecting a control in the outline selects it on the canvas, and vice versa.
⚡ Smart Actions & Enhancements
- Smart Tags: Quick-action menus for complex controls (e.g., "Add Tab" for TabControl, "Add Column" for DataGridView).
- Theme Awareness: The designer adapts to VS Code's light and dark themes for a seamless experience.
- Keyboard Shortcuts: Productivity-focused shortcuts for moving, resizing, and managing controls.
Details
Supported Frameworks
- Compatible with .NET Core, .NET 5/6/7/8+, and .NET Framework projects.
- Parses and generates standard C#
InitializeComponent code.
Control Interaction
- Resizing: Grab any of the 8 handles on a selected control to resize it.
- Moving: Drag controls freely or use arrow keys for pixel-perfect positioning.
- Z-Order: Controls are naturally layered; use the Document Outline to understand the hierarchy.
- Parenting: Dragging a control over a container (like a Panel or GroupBox) automatically reparents it.
Keyboard Shortcuts Reference
| Action |
Shortcut |
Description |
| Move Selection |
Arrow Keys |
Move selected controls by grid units. |
| Precise Move |
Ctrl + Arrow Keys |
Nudge selected controls by 1 pixel. |
| Resize |
Shift + Arrow Keys |
Resize selected controls. |
| Delete |
Delete |
Remove selected controls from the form. |
| Select All |
Ctrl + A |
Select all controls on the form. |
| Duplicate |
Ctrl + Drag |
Clone the selected control. |
| Undo |
Ctrl + Z |
Revert the last action. |
| Redo |
Ctrl + Y |
Reapply the reverted action. |
| Cycle Focus |
Tab / Shift + Tab |
Move selection to the next/previous control. |
Usage Guide
- Open Project: Open your C# Windows Forms project folder in VS Code.
- Open Form: Navigate to your Form file (e.g.,
Form1.cs).
- Launch Designer:
- Click the "Open Form Designer" icon (Paintbrush) in the editor title bar.
- Or, right-click the file in the Explorer and select "Open Form Designer".
- Or, run the command
C# Form: Open Form Designer from the Command Palette (Ctrl+Shift+P).
- Design: Use the Toolbox to add controls and the Property Grid to customize them.
- Save: Press
Ctrl+S to save your changes. The extension updates the Form1.Designer.cs file automatically.
Requirements
- VS Code: Version 1.80.0 or higher.
- Project Structure: A standard C# Windows Forms project containing a partial class with an
InitializeComponent method.
Limitations
While this extension aims to provide a comprehensive design experience, there are some limitations compared to the Visual Studio designer:
- Third-Party Controls: Support for third-party or custom controls is limited. The designer may not render them correctly if they require complex initialization logic or external resources.
- Complex Data Binding: Visual data binding is currently limited to basic property settings. Advanced dataset designers and data source wizards are not yet implemented.
- Resources: Full support for
.resx resource files (localization, embedded resources) is in progress. Images are currently referenced by file path.
- Event Handlers: You can double-click controls to generate default event handlers (e.g.,
Click), but managing other events requires manual code editing or using the Property Grid's event tab (if supported).
- Visual Inheritance: Inherited forms (Visual Inheritance) are not fully supported visually.
- Runtime Fidelity: The designer uses HTML/CSS to approximate the Windows Forms rendering. While highly accurate for layout, some controls may look slightly different than they do at runtime (native Windows rendering).
| |
