How to Render XAML Controls in Blazor WebAssembly?

Introduction

Many times, we encounter the need to migrate Silverlight or WPF applications to modern web applications like Blazor WebAssembly. In such scenarios, the typical approach involves re-engineering the Silverlight or WPF application, which can be time-consuming and expensive. However, there is a smarter and easier alternative: we can leverage the 'XAML for Blazor' NuGet package to reuse our existing XAML code in Blazor WebAssembly. This approach not only saves us significant development time but also reduces costs.

XAML for Blazor

XAML for Blazor is powered by OpenSilver. It is an open-source reimplementation of Microsoft Silverlight for the modern Web.

Let's create one small demo XAML Timer Control implementation in the Blazor WebAssembly application.

Step 1. Create the Blazor Web assembly using Visual Studio like this.

Xaml Controls in Blazor WebAssembly

Step 2. Give the project name.

Xaml Controls in Blazor WebAssembly

Step 3. Go to the visual studio extension and install the XAML for the Blazor extension.

Xaml Controls in Blazor WebAssembly

Step 4. Right-click on Solution Explore and install the NuGet package i.e. XamlforBlazor, like this.

Xaml Controls in Blazor WebAssembly

Step 5. Create the XAML folder, where you will keep all XAML-related files. For this right, click on the folder and add new items. You will see the XAML for Blazor Controls like this.

Xaml Controls in Blazor WebAssembly

Step 6. Create the Timer Control in the XAML folder like this.

<UserControl
    x:Class="XamlTest.Xaml.Timer.TimerControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:XamlTest.Xaml.Timer">

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="TimerValue" FontSize="24" HorizontalAlignment="Center" Margin="0,0,0,10"/>

        <Button Content="Start Timer" Click="StartTimer_Click" HorizontalAlignment="Center" Margin="10"/>
        <Button Content="Stop Timer" Click="StopTimer_Click" HorizontalAlignment="Center" Margin="10"/>
        <Button Content="Reset Timer" Click="ResetTimer_Click" HorizontalAlignment="Center" Margin="10"/>

    </StackPanel>

</UserControl>

Step 7. Create the Code behind the file, i.e., Timer.xaml.cs file like this.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace XamlTest.Xaml.Timer {
  public partial class TimerControl: UserControl {

    private DispatcherTimer _timer;
    private TimeSpan _elapsedTime;

    public TimeSpan ElapsedTime {

      get => _elapsedTime;
      set {

        _elapsedTime = value;
        UpdateTimerValue();
      }
    }

    public TimerControl() {
      InitializeComponent();
      _timer = new DispatcherTimer();
      _timer.Interval = TimeSpan.FromSeconds(1);
      _timer.Tick += TimerTick;
    }

    private void TimerTick(object sender, EventArgs e) {
      ElapsedTime = ElapsedTime.Add(TimeSpan.FromSeconds(1));
    }

    private void StartTimer_Click(object sender, RoutedEventArgs e) {
      _timer.Start();
    }

    private void StopTimer_Click(object sender, RoutedEventArgs e) {

      _timer.Stop();

    }

    private void ResetTimer_Click(object sender, RoutedEventArgs e)

    {
      ElapsedTime = TimeSpan.Zero;
    }

    private void UpdateTimerValue()
    {
        
      TimerValue.Text = ElapsedTime.ToString(@ "hh\:mm\:ss");

    }
  }
}

Step 8. Go to Index.razor page and call the Timer XAML control like this.

@page "/"

<PageTitle>Index</PageTitle>
<h1>Time Control demo using Xaml for Blazor</h1>
<br />

<XamlForBlazor.XamlElement Type="@typeof(XamlTest.Xaml.Timer.TimerControl)" />

Xaml Controls in Blazor WebAssembly

Step 9. Run the application, and you will see XAML Timer control is running on the browser.

Xaml Controls in Blazor WebAssembly

Now as you will see on the browser console tab, with the help of OpenSilver Control dll and wasm, we can run XAMLcode inside the Browser sandbox.

Xaml Controls in Blazor WebAssembly

Limitation of rendering XAMLcontrols in Blazor WebAssembly

Currently, this NuGet package is only working with Blazor web assembly. Whenever Blazor Server comes, I will update it here in the dotnet community.

Summary

In this step-by-step demo post, we discovered that it is easy to integrate any XAML control into Blazor WebAssembly without the need to write code in Razor pages. This makes the XAML for Blazor NuGet package extremely valuable when migrating Silverlight or WPF applications to Blazor, as it significantly reduces development time and effort.

Source Code to download: Source Code