WinDev Helper - A WinUI Extension for VS Code

The WinDev Helper extension gives you the tools you need to build beautiful, performant, native Windows apps with WinUI 3 and the Windows App SDK. Built on top of the open-source C# extension (with optional C# Dev Kit integration), it streamlines your .NET development with package management, MSIX packaging, debugging, manifest tooling, and more.

The extension is published to both the Visual Studio Marketplace and the Open VSX Registry, so it works in VS Code, VSCodium, Cursor, Windsurf, and other compatible editors.

This extension leverages winapp, the Windows App Development CLI, to provide a seamless development experience for WinUI apps in VS Code.

Features

🎨 Native XAML Preview (Preview)

• Real-time XAML preview - See your WinUI XAML rendered using the actual WinUI 3 rendering engine
• Click-to-navigate - Click any element in the preview to jump to its definition in your XAML
• Cursor sync - Move your cursor in XAML and the preview highlights the corresponding element
• Theme support - Preview respects your VS Code light/dark theme
• Project resource support - Uses your project's App.xaml and merged dictionaries
• Data binding indicators - Shows where bindings are used with placeholder values

HTML Fallback Preview (macOS/Linux)

On non-Windows platforms, the extension provides an HTML-based preview renderer as a fallback:

• Cross-platform - Works on macOS, Linux, and Windows
• Approximate rendering - Uses HTML/CSS to approximate WinUI control appearance
• 69 supported controls - Layout, input, navigation, picker, shape, and icon controls
• Same interaction model - Click-to-navigate and cursor sync work the same way
• Automatic fallback - No configuration needed; the extension detects your platform

Note: The HTML renderer provides a visual approximation of WinUI controls but may not match native rendering exactly. For pixel-perfect preview, use Windows with the native renderer.

� XAML Properties Pane (Preview)

• Full property inspection - View all properties for the selected XAML element
• Rich metadata - Built-in metadata for ~85 WinUI 3 control types with full inheritance
• Attached properties - ~35 attached property definitions (Grid.Row, Canvas.Left, ScrollViewer, etc.)
• Category grouping - Properties organized by Layout, Appearance, Common, Content, Interaction, Text, Brushes, and Accessibility
• Set vs. default - Toggle between showing only explicitly set properties and all available properties
• Data binding indicators - Visual markers for properties using {x:Bind} or {Binding}
• Copy & navigate - Copy property values or jump to their XAML definition

�🚀 Debugging & Running

• Hit F5 to debug your app on Windows
• Debug your WinUI app on any supported Windows device
• Run your app without debugging
• MSIX packaged app support - Automatic deployment and launch through package identity
• Write your WinUI C# and XAML anywhere VS Code runs

🔨 Build & Configuration

• Easily change Debug/Release build configurations
• Switch between x86, x64, and ARM64 platforms
• Build, rebuild, and clean projects from the command palette
• Status bar indicators for current build configuration and platform

📦 Packaging & Deployment

• Create and sign MSIX packages
• Generate development certificates with optional .cer public key export
• View certificate details (subject, issuer, validity)
• Install certificates for testing
• Create debug identities for your apps
• Run as packaged app - Launch apps as packaged apps from build output
• Unregister dev packages - Clean up sideloaded packages
• Add app execution aliases - Launch packaged apps by name from the terminal
• Microsoft Store publishing - Publish directly to the Microsoft Store from VS Code
• Check submission status and manage Store apps
• Create external catalogs for asset management

🧪 UI Automation

• List windows - Enumerate visible app windows
• Inspect UI trees - Walk the UI Automation tree of any running Windows app
• Take screenshots - Capture app window screenshots
• Enables automated testing and agentic workflows via winapp ui

📝 Project & Item Templates

• Create new WinUI 3 projects: Blank, NavigationView, TabView, MVVM, and Unit Test variants when using the official Microsoft template pack
• Create WinUI class libraries
• Add new Pages, Windows, User Controls, Content Dialogs, Templated Controls, and Resource Dictionaries to your project
• Automatic MVVM setup - Global usings for CommunityToolkit.Mvvm are automatically added when creating views
• All scaffolded projects support dotnet run out of the box for packaged apps via the bundled Microsoft.Windows.SDK.BuildTools.WinApp reference
• Supports both the official Microsoft Windows App SDK templates and the community WinUI Templates; pick a preference via windevHelper.templates.source

🤖 WinUI Copilot Plugin

• Install WinUI Copilot Plugin - One-click helper to set up the WinUI agent plugin for the GitHub Copilot CLI and Claude Code
• Pairs naturally with this extension: the agent scaffolds and iterates on your WinUI app while VS Code handles building, debugging, packaging, and signing

🛠️ App Manifest Management

• Generate and manage AppxManifest.xml files
• Open and edit your app manifest directly

📚 C# Dev Kit Integration

• Leverage all features of C# Dev Kit including:
  • Solution Explorer
  • Test Explorer
  • Code navigation and refactoring
  • Roslyn-powered language features

Requirements

Required Extensions

This extension requires the following VS Code extension:

• C# (open source, MIT)

Recommended Extensions

• C# Dev Kit — enables Solution Explorer, Test Explorer, and the Solution Explorer context-menu entries used by Add New Page, Add New User Control, Add New Window, and Add New ViewModel. C# Dev Kit is proprietary and its license restricts who may use it; install it only if your usage scenario qualifies. All build, debug, packaging, and template features in this extension work without C# Dev Kit — you'll just lose the Solution Explorer context-menu shortcuts (the same commands remain available from the Command Palette and the file Explorer).

Required Tools

• .NET 8 SDK or later - Download
• Windows App SDK - Automatically referenced in WinUI projects
• Windows App Development CLI (winapp) - Learn more
• WinUI Templates - Install with WinUI: Install WinUI Templates, or directly:
  • Official: dotnet new install Microsoft.WindowsAppSDK.WinUI.CSharp.Templates
  • Community: dotnet new install VijayAnand.WinUITemplates

System Requirements

• Windows 10 version 1809 (build 17763) or later
• Windows 11 (recommended)
• Visual Studio Code 1.108.1 or later

Getting Started

1. Install Prerequisites

# Install .NET 8 SDK (if not already installed)
winget install Microsoft.DotNet.SDK.8

# Install WinUI Templates (pick one)
dotnet new install Microsoft.WindowsAppSDK.WinUI.CSharp.Templates
# or the community pack
dotnet new install VijayAnand.WinUITemplates

# Install Windows App Development CLI
winget install Microsoft.WinAppCli

2. Create a New Project

1. Open the Command Palette (Ctrl+Shift+P)
2. Run WinUI: Create WinUI Project
3. Enter your project name
4. Choose whether to include MVVM support
5. Select the target folder

Or use the command line:

# Create a basic WinUI app
dotnet new winui -n MyApp

# Create a NavigationView app
dotnet new winui-navview -n MyApp

# Create a TabView app
dotnet new winui-tabview -n MyApp

# Create a WinUI app with MVVM
dotnet new winui-mvvm -n MyApp

# Create a WinUI library
dotnet new winui-lib -n MyLib

3. Open and Build

1. Open your project folder in VS Code
2. Press Ctrl+Shift+B to build
3. Press F5 to debug

Commands

Extension Settings

This extension contributes the following settings:

Keyboard Shortcuts

Windows App Development CLI

This extension integrates with the Windows App Development CLI (winapp), which provides commands for:

Setup Commands

• winapp init - Initialize project with Windows SDK and App SDK
• winapp restore - Restore packages and dependencies
• winapp update - Update packages to latest versions

App Identity & Debugging

• winapp package - Create MSIX packages from directories
• winapp create-debug-identity - Add temporary app identity for debugging
• winapp manifest - Generate and manage AppxManifest.xml files

Certificates & Signing

• winapp cert generate - Generate development certificates
• winapp cert info - View certificate details (subject, issuer, validity)
• winapp cert install - Install development certificates
• winapp sign - Sign MSIX packages and executables

Development Tools

• winapp tool - Access Windows SDK tools
• winapp get-winapp-path - Get paths to installed SDK components

Run & Automation (v0.3.0+)

• winapp run - Run a build output as a packaged app (v0.3.1+: forward application args after --)
• winapp unregister - Remove a sideloaded dev package
• winapp manifest add-alias - Add an app execution alias to the manifest
• winapp ui - UI Automation: list windows, inspect trees, click, screenshot, and more
• winapp complete - Set up shell tab completion

Learn more at github.com/microsoft/WinAppCli.

WinUI Project Structure

A typical WinUI 3 packaged app project includes:

MyApp/
├── Assets/
│   ├── LockScreenLogo.scale-200.png
│   ├── SplashScreen.scale-200.png
│   ├── Square150x150Logo.scale-200.png
│   ├── Square44x44Logo.scale-200.png
│   ├── StoreLogo.png
│   └── Wide310x150Logo.scale-200.png
├── Properties/
│   └── launchSettings.json
├── App.xaml
├── App.xaml.cs
├── MainWindow.xaml
├── MainWindow.xaml.cs
├── Package.appxmanifest
├── app.manifest
└── MyApp.csproj

Known Issues

• MSIX Packaged Apps: Debugger attachment is not yet supported for packaged apps. They launch without a debugger; set <WindowsPackageType>None</WindowsPackageType> in your .csproj for full F5 debug support
• XAML Preview (Preview): Third-party controls (e.g., CommunityToolkit) are replaced with placeholder grids in the preview
• Properties Pane (Preview): Metadata covers ~85 WinUI control types; third-party controls may have limited property defaults
• XAML IntelliSense and Hot Reload are planned for future releases
• Some advanced debugging scenarios may require Visual Studio
• XAML Preview requires Windows (the native renderer uses WinUI 3)

Contributing

Contributions are welcome! Please see our Contributing Guide for details.

Roadmap

v1.0 (Stable)

• ✅ C#/.NET WinUI 3 project support
• ✅ Debug and run support
• ✅ Build configuration management
• ✅ MSIX packaging and signing
• ✅ Project and item templates
• ✅ App manifest management

v2.x (Preview)

• ✅ Native XAML preview using WinUI 3 rendering engine
• ✅ Click-to-navigate from preview to XAML source
• ✅ Bidirectional cursor/selection sync
• ✅ Project resource support (App.xaml, merged dictionaries)
• ✅ Data binding placeholder visualization
• ✅ XAML Properties pane with full control metadata (~85 types)
• ✅ XAML preprocessor for third-party control tolerance
• ✅ Expanded HTML fallback renderer coverage (69 controls)
• ✅ MSIX packaged app deployment and launch
• ✅ Improved debugging for packaged and unpackaged apps
• 🔄 Debugger attachment for MSIX-packaged apps
• 🔄 Improved element matching for complex layouts
• 🔄 DataTemplate and ItemsControl preview support

Future Releases

• 🔄 XAML syntax highlighting and IntelliSense
• 🔄 XAML Hot Reload support
• 🔄 C++ WinUI project support
• 🔄 Additional project types (WinUI with WCT, Uno Platform)

Resources

• Windows App SDK Documentation
• WinUI 3 Documentation
• WinUI Templates on GitHub
• Windows App Development CLI
• .NET CLI Documentation

Release Notes

2.5.0 (Preview)

XAML Properties Pane, packaged app support, and preview robustness:

• XAML Properties Pane - Full property inspection with metadata for ~65 WinUI control types
• MSIX Packaged App Support - Deploy and launch packaged apps through their package identity
• XAML Preprocessor - Third-party controls handled gracefully with placeholder grids
• Preview Performance - Eliminated first-render timeout with pre-initialization
• Debug Improvements - Multi-path executable resolution for packaged/unpackaged apps

2.0.0 (Preview)

New native XAML preview feature:

• Native XAML Preview - Renders XAML using the actual WinUI 3 rendering engine
• Click-to-navigate - Click elements in the preview to jump to XAML source
• Bidirectional sync - Cursor position syncs between editor and preview
• Project resources - Loads App.xaml and merged resource dictionaries
• Binding visualization - Shows placeholder values for data bindings
• Theme support - Respects VS Code light/dark theme settings

1.0.0

Initial release of WinDev Helper:

• Full debugging support for WinUI 3 apps
• Build configuration and platform management
• MSIX packaging and signing integration
• Project and item template support via WinUI Templates
• Windows App Development CLI integration
• C# Dev Kit integration

License

This extension is licensed under the MIT License.

Enjoy building Windows apps with WinDev Helper! 🚀