XAML Form GUI Editor for VS Code

A real-time visual designer for WPF/XAML applications in VS Code. This extension allows you to design WPF GUIs visually, similar to Visual Studio's designer, directly within VS Code.

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 .xaml file are immediately reflected in the visual designer.
  • Design-to-Code: Moving, resizing, or modifying controls in the designer automatically updates the underlying XAML code.
• Snap-to-Grid: Helps align controls precisely.
• Interactive Controls:
  • ComboBox: Click the chevron to open the dropdown and select items directly in the designer.
  • TabControl: Click tabs to switch between TabItems and view their properties.

🛠️ Comprehensive Toolbox

Access a wide range of standard WPF controls:

• Common Controls: Button, CheckBox, ComboBox, Label, ListBox, RadioButton, TextBlock, TextBox, Image, ProgressBar, Slider, DatePicker, Calendar.
• Layout: Grid, StackPanel, WrapPanel, DockPanel, Canvas, Border, ScrollViewer.
• Containers: GroupBox, TabControl, TabItem, Expander.
• Menus & Toolbars: Menu, MenuItem, ToolBar, StatusBar.
• Data: DataGrid, ListView, TreeView.

⚡ Smart Actions & Layout Tools

• Alignment Tools:
  • Center Horizontally/Vertically: Quickly center controls within their parent container (supports both Grid and Canvas).
  • Make Same Width/Height: Standardize control sizes.
• XAML Styler:
  • Automatically sorts XAML attributes (x:Name, then Layout, then Visual properties).
  • Removes unnecessary whitespace for cleaner code.
• Code-behind Navigation: Double-click a control in the designer to jump to its corresponding code-behind file (e.g., MainWindow.xaml.cs).

📝 Enhanced Properties Panel

• Editable Properties: Modify properties like Width, Height, Margin, Content, Text, HorizontalAlignment, VerticalAlignment, etc.
• Collection Editing:
  • ComboBox/ListBox: Edit Items as a semicolon-separated string (e.g., Item1;Item2;Item3).
• Context-Aware: Shows properties for the currently selected control, including nested controls like TabItem.

Usage Guide

1. Open Project: Open your WPF project folder in VS Code.
2. Open XAML File: Navigate to your .xaml file (e.g., MainWindow.xaml).
3. Launch Designer:
   • Click the "Open XAML Designer" icon (Layout icon) in the editor title bar.
   • Or, right-click the file in the Explorer and select "Open XAML Designer".
   • Or, run the command XAML Designer: Open XAML Designer from the Command Palette (Ctrl+Shift+P).
4. Design: Use the Toolbox to add controls and drag them to position.
5. Edit Properties: Select a control to view and edit its properties in the right-hand panel.
6. Save: Press Ctrl+S to save your changes.

Requirements

• VS Code: Version 1.80.0 or higher.
• Project Structure: Standard WPF/XAML files.

Known Limitations

• Complex nested layouts might require manual XAML adjustments.
• Some advanced WPF features (e.g., complex DataTemplates, Resources) are read-only in the designer.