Blazor - Desktop Crossplatform

Getting Started

This tutorial will show you how you can use Smart components in a Blazor Desktop app with .NET 6, running in both a web browser and in WinForms.

Prerequisites

• Visual Studio 2022
• .NET 6 SDK

Before getting started you need to have Visual Studio 2022 with .NET 6 SDK installed.

Blazor Server App

First, we will start by opening Visual Studio 2022 and creating a Blazor Server App called CrossPlatformBlazor with target framework .NET 6.0

Then we need to add Smart.Blazor NuGet package to the project.

Open the \_Imports.razor file and add `@using Smart.Blazor`.
Then open the \Pages\_Layout.cshtml file and include a theme CSS file by adding this snippet:

and Smart source files by adding this snipet:

The next step is to open the Program.cs file and to add builder.Services.AddSmart(); and using Smart.Blazor; in the using statements.

After that Program.cs file should look like this:

    using CrossPlatformBlazor.Data;
    using Microsoft.AspNetCore.Components;
    using Microsoft.AspNetCore.Components.Web;
    using Smart.Blazor;

    var builder = WebApplication.CreateBuilder(args);

    // Add services to the container.
    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services.AddSingleton();
    // Add Smart UI for Blazor.  
    builder.Services.AddSmart();
    
    var app = builder.Build();
    
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();

    app.UseStaticFiles();

    app.UseRouting();

    app.MapBlazorHub();
    app.MapFallbackToPage("/_Host");

    app.Run();

        

Now you can open the \Pages\Index.razor file and paste the following code:

    @page "/"
    @using CrossPlatformBlazor.Data
    
    @inject WeatherForecastService ForecastService
    
    
Weather forecast
    
    
This component demonstrates fetching data from the server.
    
    @if (forecasts == null)
    {
      
Loading...
    }
    else
    {
      

@foreach (var forecast in forecasts) { }

Date	Temp. (C)	Temp. (F)	Summary
@forecast.Date.ToShortDateString()	@forecast.TemperatureC	@forecast.TemperatureF	@forecast.Summary

} @code { private WeatherForecast[] forecasts; protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); } }

We are ready with the web part of our application. If you run the project you should see the following result:

Windows Forms Blazor

The next step is to add a new Windows Forms App to the solution. We will name it WinFormsBlazor.

Add the Smart.Blazor and Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet packages to the project.


After that add a wwwroot folder which should contain an index.html file and a css folder.
You can copy the css folder from CrossPlatformBlazor project's wwwroot folder and the index.html file should look like this:

    
    

    
        


        

            An unhandled error has occurred.
            Reload
            🗙
        

        

Blazor Class Library

We will extract the code shared between the Blazor Desktop app and the Blazor Server App in a separate Razor Class Library that we will call BlazorClassLibrary.

Again, add Smart.Blazor NuGet package to the project.

Then in the project file BlazorClassLibrary.csproj replace:

    enable

with

    true
        

and add:

Note, that you need to add a reference to the class library in the Blazor Server App and the Windows Forms App by right-clicking on them and choosing Add Project Refrence...

Now you can move Data, Pages, Shared and wwwroot folders and _Imports.razor and App.Razor files from CrossPlatformBlazor to BlazorClassLibrary.

Then you should fix the reference of ILogger inside \Pages\Error.cshtml.cs by adding:

    using Microsoft.Extensions.Logging;
        

Inside _Imports.razor replace:

    @using CrossPlatformBlazor
    @using CrossPlatformBlazor.Shared
        

with

    @using BlazorClassLibrary 
    @using BlazorClassLibrary.Shared
        

Inside \Pages\_Layout.cshtml file you need to change the references of the css files by replacing:

with

And finally, inside \Pages\_Host.cshtml add:

    @using BlazorClassLibrary
        

Final Configurations

Lastly, in the WinFormsBlazor project you should open the Form1.cs file and paste this code:

    using BlazorClassLibrary;
    using CrossPlatformBlazor.Data;
    using Microsoft.AspNetCore.Components.WebView.WindowsForms;
    using Microsoft.Extensions.DependencyInjection;
    using Smart.Blazor;

    namespace WinFormsBlazor
    {
        public partial class Form1 : System.Windows.Forms.Form
        {
            public Form1()
            {
                var serviceCollection = new ServiceCollection();
                serviceCollection.AddBlazorWebView();
            
                serviceCollection.AddSingleton();
            
                serviceCollection.AddSmart();
            
                InitializeComponent();
            
                blazorWebView1.HostPage = @"wwwroot\index.html";
                blazorWebView1.Services = serviceCollection.BuildServiceProvider();
                blazorWebView1.RootComponents.Add("#app");
            }
        }
    }
        

Then open also the Form1.Designer.cs file and paste the following code:

    namespace WinFormsBlazor
    {
        partial class Form1
        {
            /// 

            ///  Required designer variable.
            /// 
            private System.ComponentModel.IContainer components = null;
            
            /// 

            ///  Clean up any resources being used.
            /// 
            /// true if managed resources should be disposed; otherwise, false.
            protected override void Dispose(bool disposing)
            {
                if (disposing && (components != null))
                {
                    components.Dispose();
                }
                base.Dispose(disposing);
            }
          
            #region Windows Form Designer generated code
          
            /// 

            ///  Required method for Designer support - do not modify
            ///  the contents of this method with the code editor.
            /// 
            private void InitializeComponent()
            {
                this.blazorWebView1 = new Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView();
                this.SuspendLayout();
                // 
                // blazorWebView1
                // 
                this.blazorWebView1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
                | System.Windows.Forms.AnchorStyles.Left) 
                | System.Windows.Forms.AnchorStyles.Right)));
                this.blazorWebView1.Location = new System.Drawing.Point(3, 7);
                this.blazorWebView1.Name = "blazorWebView1";
                this.blazorWebView1.Size = new System.Drawing.Size(796, 436);
                this.blazorWebView1.TabIndex = 20;
                // 
                // Form1
                // 
                this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 20F);
                this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
                this.ClientSize = new System.Drawing.Size(800, 450);
                this.Controls.Add(this.blazorWebView1);
                this.Name = "Form1";
                this.Text = "Form1";
                this.ResumeLayout(false);
            
            }
          
            #endregion
          
            private Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView blazorWebView1;
        }
    }
      

The last thing you need to do is to open the WinFormsBlazor's project file WinFormsBlazor.csproj and change the first line to:

and add the following lines:

    PreserveNewestPreserveNewesttruePreserveNewest

Now if you start both the CrossPlatformBlazor and WinFormsBlazor projects you should get the following result:

The post Smart UI Desktop App with Blazor and Windows Forms appeared first on Smart UI Components.