Zenzel UI Designer

Design Windows Forms, WinUI/UWP, and .NET MAUI interfaces visually without leaving Visual Studio Code.

Zenzel UI Designer provides a familiar design surface with a framework-aware Toolbox, Document Outline, Properties and Events, component tray, layout tools, preview rendering, undo/redo, and safe source generation.

Highlights

• One shared VS Code Toolbox that automatically shows the correct controls for the active designer.
• One shared Properties view with reflected properties, enum choices, custom properties, and events.
• Framework-aware previews for standard WinForms, WinUI/UWP, and MAUI controls.
• Nested child controls, containers, drag-and-drop parenting, and a hierarchical Document Outline.
• Smart alignment guides, grid snapping, rulers, eight-way resizing, keyboard nudging, and zoom-to-fit.
• Automatic, fixed, and Stretch/Fill sizing. Automatic sizing is the default.
• WinForms docking, margins, padding, anchors, component tray, and non-visual components.
• XAML alignment, margins, padding, grid rows, columns, spans, and responsive layouts.
• Event-handler wiring with automatic code-behind creation and missing handler stubs.
• Safe undo/redo, duplication, z-order commands, deletion, and source regeneration.
• Clear diagnostics and read-only safety mode when source cannot be changed without risk.

Supported designers

• Windows Forms C# designer files (*.Designer.cs)
• Windows Forms Visual Basic designer files (*.Designer.vb)
• WinUI 3 XAML
• UWP XAML
• .NET MAUI XAML
• Built-in, project, custom, and supported third-party controls

Windows Forms and WinUI/UWP target Windows. MAUI preview capabilities depend on the SDKs and target platforms installed on your system.

Get started

1. Install Zenzel UI Designer from the Visual Studio Marketplace.
2. Open a supported XAML or Windows Forms designer file.
3. Choose Reopen Editor With… → Zenzel UI Designer.
4. Open the UI Designer icon in the Activity Bar.
5. Add controls from Toolbox, arrange them on the surface, and edit them through Properties.
6. Save normally with Ctrl+S.

To start a new interface, run Zenzel UI Designer: Create Document from the Command Palette. The command can create Windows Forms, WinUI 3, UWP, or .NET MAUI documents with their required companion files. Existing files are not overwritten.

Toolbox and child controls

The Activity Bar Toolbox is shared by every designer. It switches automatically between WinForms, WinUI/UWP, and MAUI controls and includes compatible project controls discovered in the active workspace.

Select a container before choosing a Toolbox item to add the new control as its child. You can also drag a control directly onto a compatible container or change its parent through Properties. Invalid and cyclic parent relationships are rejected. Nested hierarchies are shown in Document Outline and preserved when saving or duplicating a container.

Properties and events

Select a control on the surface or in Document Outline, then use the Activity Bar Properties view:

• Click a property to edit it.
• Choose Add property… for custom or attached properties.
• Choose Auto, Fixed, or Stretch independently for width and height.
• Click an event to assign or remove its handler.

Automatic sizing is used unless Stretch/Fill or a fixed dimension is explicitly selected. The designer supports MAUI HorizontalOptions and VerticalOptions, WinUI/UWP alignment, WinForms docking, and applicable margins, padding, colors, typography, visibility, enabled state, and control-specific values.

When an event handler does not exist, the designer adds a handler stub to the companion partial class. If a XAML code-behind file is missing, it is created automatically. Existing handler implementations are never replaced.

Design surface

Standard controls receive framework-specific design-time previews, including buttons, toggle buttons, switches, check boxes, radio buttons, text inputs, lists, trees, data grids, calendars, navigation, menus, media, charts, dialogs, shapes, and layout containers.

Stateful controls reflect properties such as Checked, IsChecked, IsOn, IsToggled, and CheckState. Local image sources are also shown when they are available inside the workspace.

Custom controls use a recognized base-control preview when possible. If a native or vendor renderer is unavailable, the control remains visible and editable through a clearly labeled placeholder instead of causing the designer to fail.

Non-visual Windows Forms items—such as timers, dialogs, image lists, and data components—appear in the component tray beneath the design surface.

Useful shortcuts

• Ctrl+S — Save
• Ctrl+Z — Undo
• Ctrl+Y or Ctrl+Shift+Z — Redo
• Ctrl+D — Duplicate the selected control or subtree
• Ctrl+0 — Zoom to fit
• Arrow keys — Move the selected control by one pixel
• Shift+Arrow keys — Move by one grid interval
• Delete — Delete the selection
• Escape — Clear the selection or close the context menu

Safety and diagnostics

Your source remains authoritative. If the designer encounters markup, bindings, serializers, or code that it cannot safely reproduce, it enters read-only safety mode and explains the problem instead of partially rewriting the file.

Parsing and rendering failures appear in the Problems view and on a recoverable designer error page. Source files remain unchanged when an operation fails.

Project-control discovery can inspect compiled metadata in a trusted workspace. The designer reads property and event metadata without constructing project controls or running application code.

Settings

• zenzelUiDesigner.gridSize — Designer grid and snap interval.
• zenzelUiDesigner.showGrid — Show or hide the design grid.
• zenzelUiDesigner.buildForControlDiscovery — Allow a trusted project build when assemblies are needed to discover project controls.
• zenzelUiDesigner.previewMode — Choose automatic, native-preferred, or browser preview behavior.

Preview note

The portable preview is a design-time representation. Runtime-only behavior, platform services, complex bindings, external resources, and vendor-specific native rendering may still require running the target application.

Support the project

Use the Donate button in the designer toolbar to support Zenzel UI Designer through Venmo.

Repository: https://github.com/czenzel/vscode-zenzel-ui-designer