Blazor Basics: Why You Might Want to Build Your Desktop App with Blazor Components

Learn why integrating Blazor components into desktop applications is a valuable approach.

Blazor was once a promising new web technology that quickly established itself, and today it is a viable choice for .NET developers to build modern, robust and blazingly fast web applications.

Today, Blazor is primarily associated with web development. While at its core Blazor is a web technology, you can do so much more with it than only build web applications.

In this article, I will highlight scenarios where using Blazor components in a desktop environment (WPF, WinForms or .NET MAUI) can be a strategic move that you need to be familiar with and what benefits this approach provides.

The Blazor Component Model

When discussing why you might consider using Blazor components in a desktop application, we cannot get around the Blazor Component model.

Its simplistic syntax, the option to use HTML and CSS to define the user interface, and the component-oriented architecture, which is inherently modular and provides a robust and efficient lifecycle, are advantages you cannot overlook.

Desktop technologies often have their own distinctive way of defining a user interface. We have fewer choices of predefined components, and reusing components for different application types is usually impossible.

A user profile component developed as a Blazor component for an internal application can be reused in an existing customer-facing desktop application. Adding new features to existing applications (with different technologies) becomes simpler.

Practical use case: You can reuse existing C# services within Blazor components directly (Blazor Server) or through an API (Blazor WebAssembly). You can share Blazor components between different applications and application types.

The Integration Between Blazor and Desktop

Integrating Blazor components in desktop applications requires using a browser-based host component.

For example, the WebView2 component can be installed from a NuGet package to add Blazor component support to an existing WinForms desktop application.

Learn more about integrating Blazor components with WinForms from a step-by-step guide.

Practical use case: Add a NuGet Package to integrate Blazor components into existing WinForms applications.

Why Desktop Still Matters—and Why Blazor Helps

There are valid reasons why developers will continue maintaining desktop applications or even start new projects targeting a native desktop application.

A few industries continue to heavily use desktop applications, including finance, engineering and healthcare.

The main advantages of desktop applications are:

• Local performance and fewer server resources to manage
• Access to native features
• Offline support
• Offline updates

With Blazor, we have solutions for the first three points above. We can use Blazor WebAssembly, which mainly uses the local resources. We can use modern web features to access local resources such as a camera. And with progressive web applications, we can implement offline support.

Desktop technologies like WinForms or WPF are around 20 years old. Their user interface definition isn’t as flexible and modern as HTML and CSS.

If you want to make your newly implemented components available to as many application types as possible, implementing them as Blazor components is a great option.

While some desktop technologies might be limited in some way or another, Blazor offers you the world of the standard web technologies, HTML and CSS, including all available low-level CSS frameworks and complete Blazor UI control libraries, such as Progress Telerik UI for Blazor.

Practical use case: Blazor component can be (re)used for web, desktop and mobile applications. Future-proof your investments. You can even create new desktop applications using .NET MAUI and mainly use Blazor components to build them.

Reusing Existing Blazor Investments

We can look at it from a different angle. Let’s say you have a few older desktop applications and a few more recent Blazor-based web applications. You can modernize the desktop applications by adding Blazor components created for the web applications.

For example, you might implement a form-handling system using Telerik UI for Blazor or other controls with vast support for input validation and modern user feedback.

You can introduce those new components to the existing desktop applications step-by-step and modernize them without having to rewrite the whole application in one massive migration. With this process, you continuously deliver value and take less risk.

Practical use case: Reduce risk with a step-by-step modernization of an existing desktop application compared to a costly and long-lasting complete rewrite.

Common Pitfalls or Gotchas

Desktop applications traditionally have longer startup times compared to modern web applications. We potentially add more delay by integrating additional components and leveraging the WebView2 component.

When introducing Blazor components to an existing desktop application, we must critically investigate and potentially improve the user experience. Blazor components look and feel different from WinForms components.

We should mitigate it by adapting Blazor components to existing UI patterns and using the same spacing and colors for the components. Luckily, we can do that with CSS comparatively easily.

By cleverly leveraging dependency injection, we can inject different implementations for a web and desktop application if we need different behavior.

Practical use case: In web components, we often use links (HTML anchor tag) to navigate to a different page, while in desktop applications, we usually use buttons. We can account for those situations with a good component tree architecture and adapt Blazor components to desktop applications using CSS.

When to Choose This Path

Nothing is perfect, and neither are Blazor components. Let’s talk about use cases that perfectly fit a modernization strategy with Blazor components:

Internal tools or admin panels often don’t have the same requirements for the application’s consistent look and feel. Development speed and cost are more important than getting the last 20% of usability or user experience.

If you have difficulty finding new developers to maintain your WinForms or WPF applications, integrating Blazor components helps you attract new talent with experience with HTML and CSS.

However, applications requiring ultra-low-level native APIs or platform-specific libraries, you might want to stick with a tested and trusted desktop application technology.

Use web technologies such as regular Blazor web applications over .NET MAUI or similarly complex desktop technologies for straightforward and small applications.

Conclusion

As a developer who has worked across desktop and web development, I like the versatility of Blazor components and its modern, robust and flexible component model.

It allows you to upgrade an existing .NET desktop application with new components, and you’ll be able to share components between newly written web applications and older .NET desktop applications.

You can use Blazor to create brand-new applications or enhance existing .NET applications.

Blazor is a stable bridge between the different worlds in .NET development, including web, mobile and desktop application development.

You can save hours, days or weeks by sharing components between different applications and utilizing modern web standards to implement user interfaces compared to technology-specific user interface languages, such as WPF or other XAML-flavored tools.

If you want to learn more about Blazor development, you can watch my free Blazor Crash Course on YouTube. And stay tuned to the Telerik blog for more Blazor Basics.