Skip to content

WinDev Helper VS Code extension to create, build, debug, and publish WinUI apps.

License

Notifications You must be signed in to change notification settings

alvinashcraft/windev-helper

Repository files navigation

WinDev Helper - A WinUI Extension for VS Code

Visual Studio Marketplace Version License: MIT Preview

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 C# and C# Dev Kit extensions, it supercharges your .NET development with powerful IntelliSense, an intuitive Solution Explorer, package management, and more.

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

⚠️ Preview Release: Version 2.x is currently in preview. It includes experimental features like native XAML preview. To get stable releases only, disable "Show Pre-Release Versions" in the VS Code extension settings.

WinDev Helper Extension

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
  • 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 ~65 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
  • Install certificates for testing
  • Create debug identities for your apps

📝 Project & Item Templates

  • Create new WinUI 3 projects with optional MVVM support
  • Create WinUI class libraries
  • Add new Pages, Windows, and User Controls to your project
  • Automatic MVVM setup - Global usings for CommunityToolkit.Mvvm are automatically added when creating views
  • Powered by WinUI Templates

🛠️ 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 extensions:

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: 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
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 WinUI app with MVVM
dotnet new winui -n MyApp -mvvm

# Create a WinUI library
dotnet new winuilib -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

Command Description
WinUI: Create WinUI Project Create a new WinUI 3 application
WinUI: Create WinUI Library Create a new WinUI class library
WinUI: Add New Page Add a new XAML page to your project
WinUI: Add New User Control Add a new user control
WinUI: Add New Window Add a new window
WinUI: Open XAML Preview Open native XAML preview panel (Preview)
WinDev: Refresh Properties Refresh the XAML Properties pane
WinDev: Toggle Property Grouping Switch between grouped and flat property view
WinDev: Toggle Default Properties Show/hide default (unset) properties
WinUI: Build Project Build the current project
WinUI: Rebuild Project Clean and rebuild the project
WinUI: Clean Project Clean build outputs
WinUI: Debug Project Start debugging (F5)
WinUI: Run Without Debugging Run without debugger
WinUI: Create MSIX Package Create an MSIX package
WinUI: Sign Package Sign an MSIX package or executable
WinUI: Generate Development Certificate Create a dev certificate
WinUI: Install Certificate Install a certificate
WinUI: Create Debug Identity Add temporary app identity
WinUI: Generate App Manifest Generate AppxManifest.xml
WinUI: Open App Manifest Open the manifest file
WinUI: Restore Packages Restore NuGet packages
WinUI: Update Packages Update packages to latest
WinUI: Select Build Configuration Switch Debug/Release
WinUI: Select Target Platform Switch x86/x64/ARM64
WinUI: Install WinUI Templates Install dotnet templates
WinUI: Check WinApp CLI Installation Verify CLI is installed

Extension Settings

This extension contributes the following settings:

Setting Type Default Description
windevHelper.defaultConfiguration string Debug Default build configuration
windevHelper.defaultPlatform string x64 Default target platform
windevHelper.winAppCliPath string "" Path to winapp CLI (leave empty for PATH)
windevHelper.autoRestoreOnOpen boolean true Auto-restore packages on project open
windevHelper.showStatusBarItems boolean true Show config/platform in status bar
windevHelper.certificatePath string "" Default certificate path for signing
windevHelper.preview.renderer string auto XAML preview renderer: auto, native, html
windevHelper.preview.theme string auto Preview theme: auto, light, dark
windevHelper.preview.width number 800 Default preview width
windevHelper.preview.height number 600 Default preview height
windevHelper.preview.updateDelay number 300 Delay (ms) before updating preview after edits

Keyboard Shortcuts

Shortcut Command
F5 Debug Project
Ctrl+Shift+B Build Project

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 and 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

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: Metadata covers ~65 common WinUI controls; uncommon or 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 (~65 types)
  • ✅ XAML preprocessor for third-party control tolerance
  • ✅ 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

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! 🚀

About

WinDev Helper VS Code extension to create, build, debug, and publish WinUI apps.

Resources

License

Contributing

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •