Unleash the Power of XAML in Your Blazor Applications

Discover more

Leverage Existing Skills

Seamlessly integrate your XAML expertise within Blazor WebAssembly applications, maximizing productivity and reducing learning curve.

Revitalize Legacy Applications

Reuse or migrate code from existing XAML-based applications such as WPF, Silverlight, UWP or WinUI, thanks to XAML for Blazor's close similarity with these technologies.

Boost Web App Capabilities

Utilize powerful XAML controls like DataGrid and DataForm in combination with Blazor's unique strengths, paving the way for superior web application development.

XAML and Razor, Side by Side

Mix and match XAML and Razor within the same Blazor WebAssembly project
Seamlessly pass objects between XAML UIElements and Razor Components
Use familiar XAML features like MVVM, Binding, Styling, Templating, Panels, Custom Controls
Access powerful features like RIA Services, WCF SOAP, PRISM, MEF...

Get Started in 30 Seconds

Reference the “XAML for Blazor” package (on NuGet.org) from your “Blazor WebAssembly” project (note: “Blazor Server” support is on the roadmap).
Optionally, install this VSIX that will add some “item templates” to Visual Studio 2022. It lets you create new XAML files in Blazor projects via the “Add New Item” dialog.
Add XAML files to your Blazor WebAssembly project.
(Note: If you copy/paste XAML files from your disk, make sure that their “Build Action” is set to “Content” or “Page” instead of “None“)
Instantiate your XAML controls (or instantiate the built-in types like DataGrid, DataForm, etc.) from within your Razor pages using the code shown here.

Web App by Using XAML

Use XAML files side by side with Razor in
your Blazor WebAssembly projects

Migrate Your XAML App

Use legacy XAML files into
your Blazor WebAssembly projects

UI Controls and Mechanisms

Extend the list of enterprise UI controls and
mechanisms that exists in OpenSilver,
in your Blazor WebAssembly projects

Get Started in 30 Seconds

Reference the “XAML for Blazor” package (on NuGet.org) from your “Blazor WebAssembly” project (note: “Blazor Server” support is on the roadmap).
Optionally, install this VSIX that will add some “item templates” to Visual Studio 2022. It lets you create new XAML files in Blazor projects via the “Add New Item” dialog.
Add XAML files to your Blazor WebAssembly project.
(Note: If you copy/paste XAML files from your disk, make sure that their “Build Action” is set to “Content” or “Page” instead of “None”)
Instantiate your XAML controls (or instantiate the built-in types like DataGrid, DataForm, etc.) from within your Razor pages using the code shown here.

Get Started

Add the XAML for Blazor NuGet package into your Blazor WebAssembly project and start adding XAML files into the project to create the App's UI

📦 Community Edition (Free)

Suitable for individuals or teams with revenue <$200k during the last 12 months.

📦 Professional Edition

Suitable for organizations that are not under the terms of the Community Edition

📦 Enterprise Edition

Let us propose you a suitable offer after we discuss your specific needs

Get a License

The required essential tool is Visual Studio 2022 and .NET 7.
You have to be sure that the Blazor WebAssembly VS project targets net7.0.
To do so,
- verify the Target framework (net7.0) under the Application > General section in the properties of the Blazor WebAssembly VS project or
- verify the TargetFramework tag in the project file (.csproj file)
  <TargetFramework>net7.0</TargetFramework>
Install the XamlForBlazor.VSIX (VS Extension) will provide you with the possibility of adding/creating XAML files in a Blazor WebAssembly VS project.

Create a Blazor WebAssembly project that uses .NET 7 (NOTE: If you need it to work on .NET 6, please get in touch with us)
Add a reference to the Nuget Package XAML for Blazor
Add XAML file(s)
Run the application

You can use XAML components in your razor page by adding the XamlElement tag.
<XamlElement Type=”@typeof(TextBlock)” Text=”a TextBlock” />

You can change the type to whatever XAML component you want instead, as well as the properties (events are not handled yet)
press ctrl+; (or right click -> “quick actions and refactoring” -> “@using …”) to automatically add the usings for the XamlElement and the type inside the typeof
It is possible to use the variables defined inside the razor page as input for the components:
Text=”@someRazorVariable“
This way, whenever the someRazorVariable is modified in the razor, the component will have its corresponding value changed.

Create a new XAML file
by using the VS Extension it will be possible to create a XAML filer in the Blazor WebAssembly project. You can create your custom component in the added file.
Import existing XAML files from another project
it is required to change the Build Action of the XAML file to Content (Properties > Advanced > Build Action)
NOTE: Also, maybe it will be required the parameter Custom Tool to be set to MSBuild:Compile

⚠️ IMPORTANT: Visual Studio doesn’t detect the changes in XAML files, so you will need to fully rebuild the project whenever you modify them before running your application.

🔨 Empty the Internet browser cache and reload

In a case, you experience some strange behavior or something doesn’t work as expected, try emptying the internet browser cache and reloading the page, but after you rebuild the project. To do so:

1. run the Developer tools in the Internet browser (CTRL + SHIFT + I or F12)
2. right-click on the Reload button
3. click Empty cache and hard reload

🔨 Clean the Internet browser storage

Sometimes if things don’t work and the browser doesn’t refresh the page properly which causes errors, cleaning the browser storage can help to overcome the issue. To do so:

1. run the Developer tools in the Internet browser (CTRL + SHIFT + I or F12)
2. click the Application (Chrome and Edge) / Storage (Firefox) tab
3. select the item Storage under the Application section
4. click on the button Clear site data