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 is powered by OpenSilver. It is open-source reimplementation of Microsoft Silverlight for the modern Web.
Let’s create one small demo Xaml Timer Control implementation in Blazor WebAssembly application
Step 1: Create the Blazor Web assembly using Visual Studio like this.
Step 2: Give the project Name
Step 3: Go to the visual studio extension and install the XAML for Blazor extension.
Step 4: Right click on Solution explore and install the NuGet package i.e. XamlforBlazor like this
Step 5: Create the Xaml folder, where will keep all xaml related file. For this right click on folder and add new items. You will see the Xaml for Blazor Controls like this
Step 6: Create the Timer Control in Xaml folder and write the code 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 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)" />
Step 9: Run the application and you will see XAML Timer control is running on browser
Now if you will see on browser console tab, with help of OpenSilver Control dll and wasm, we are able to run xaml code inside the Browser sandbox.
Limitation
Currently this NuGet package is only working with Blazor web assembly. Whenever Blazor Server will come, I will update here in 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: https://github.com/Chandradev819/XamlTest.git
Chandradev's Blog 