Blazor Compatibility Pack for OpenSilver

Use Blazor Components in your XAML, access thousands of 3rd party controls from the Blazor ecosystem, and include Razor files in your OpenSilver projects!

Table of Contents

Installation

The “Blazor Compatibility Pack” is an add-on for OpenSilver that is distributed as a NuGet package named “OpenSilver.Compatibility.Blazor” on NuGet.org (link here).

Before referencing this package, you need to make a few small changes to your OpenSilver project:

Step No. 1:

Make sure you are referencing the latest version of OpenSilver (2.0 at the time of writing) and that your Visual Studio is up to date with the latest updates.

Step No. 2:

Edit the CSPROJ of your main OpenSilver project (the one that contains your app’s C# and XAML files), and
– Replace: <Project Sdk=”Microsoft.NET.Sdk”> with: <Project Sdk=”Microsoft.NET.Sdk.Razor”>
– Replace: <TargetFramework>netstandard2.0</TargetFramework>
with: <TargetFramework>net7.0</TargetFramework> or <TargetFramework>net8.0</TargetFramework> depending on the version that is used in the project with the .Browser suffix.

Step No. 3:

Unload the project with the .Simulator suffix (if any) because it won’t work yet with Blazor Components.

Step No. 4:

Add a reference to the package “OpenSilver.Blazor.Compatibility” (from NuGet.org) in your main OpenSilver project (the one that contains your app’s C# and XAML files).

Step No. 5:

Rebuild the solution and add the following line inside Program.cs (you need to add it just before the line var host = builder.Build();)
OpenSilver.Compatibility.Blazor.Initializer.Initialize(builder);

How to use it

Using the “Blazor Compatibility Pack” is very simple! After following the installation steps above, you can do the following:

  • You can add references to NuGet packages made for Blazor.

For example, you can reference 3rd party Blazor components like “Microsoft.AspNetCore.Components.QuickGrid“, “Radzen.Blazor“, “MudBlazor“, “Syncfusion.Blazor.Core“, and many more.

  • You can add .Razor files into your OpenSilver project, side-by-side with your C# and XAML files.
To do so, just right-click your main OpenSilver project in the Solution Explorer and click “Add” -> “New item…”

then, choose “Razor Component“:

Important: After adding the razor component, make sure to set its property “Build Action” to “Content” instead of “None”, as shown below. To do so, select the newly created .razor file in the Solution Explorer and press the F4 key.

 

  • You can add Blazor Components in your XAML.

To do so, just type the following code in your XAML:

<blazor:RazorComponent ComponentType=”local:Component1″/>

Where you should replace “local” with the prefix where the Razor component is located, and the “blazor” prefix shall be defined as follows:

xmlns:blazor=”clr-namespace:OpenSilver.Compatibility.Blazor;assembly=OpenSilver.Compatibility.Blazor”

Screenshot:

You can also interact with the component from code-behind using the .Instance property, as shown in this screenshot:

Sample apps

We are working on some sample apps. Please check back soon for updates.

Troubleshooting

If you encounter issues, please check below:

  • if you don’t see “Razor Component” in the list of new items that you can add to your projecy, try relaunching Visual Studio, as the item templates are sometimes not updated after changing the project SDK in the .csproj as instructed above.
  • After adding the razor component, make sure to set its property “Build Action” to “Content” instead of “None”.
  • If you get a compilation error on the line “OpenSilver.Compatibility.Blazor.Initializer.Initialize(builder);”, make sure to rebuild the project and double-check the step under “installation” above.
  • If you get compilation errors related to the Simulator, please unload the Simulator project, as it does not support Blazor Components yet.

Contact us at: [email protected] for any questions.

Pricing

  • Hobbyists and individuals: FREE. The product is free for individuals who do not work in a team and who do not work on a product that generates more than $200k in revenue per year. For all other cases, a “professional” license is required (see below).
  • Professionals and companies: The pricing will be announced soon. You can start a 30-day trial by simply referencing the NuGet package, choosing “Professionals”, and clicking “Start Trial”. You will be requested to log it with Microsoft.

Support

Please contact us for support.