WinFormedge.Blazor 1.0.0

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package WinFormedge.Blazor --version 1.0.0
                    


                    

                
NuGet\Install-Package WinFormedge.Blazor -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="WinFormedge.Blazor" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="WinFormedge.Blazor" Version="1.0.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="WinFormedge.Blazor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add WinFormedge.Blazor --version 1.0.0
                    


                    

                
#r "nuget: WinFormedge.Blazor, 1.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package WinFormedge.Blazor@1.0.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=WinFormedge.Blazor&version=1.0.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=WinFormedge.Blazor&version=1.0.0
                    


                            Install as a Cake Tool

Blazor Hybrid Plugin for WinFormedge

✨ About

The Blazor Hybrid Plugin for WinFormedge enables seamless integration of Blazor components into WinFormedge-based Windows Forms applications. With this plugin, developers can leverage the power of Blazor's modern web UI framework alongside traditional WinForms, allowing for interactive, component-based user interfaces using C#, HTML, and CSS. This hybrid approach combines the flexibility of web technologies with the performance and capabilities of native Windows applications, making it easy to build rich, cross-technology desktop solutions.

📖 Usage

To use the Blazor Hybrid Plugin, you need to follow these steps:

Install the NuGet Package: Add the WinFormedge.Blazor package to your WinFormedge project.

In Solution Explorer, right-click the project's name, and select Edit Project File to open the project file.

At the top of the project file, change the SDK to Microsoft.NET.Sdk.Razor:

<Project Sdk="Microsoft.NET.Sdk.Razor">

Add an _Imports.razor file to the root of the project with an @using directive for Microsoft.AspNetCore.Components.Web.

@using Microsoft.AspNetCore.Components.Web

Add a wwwroot folder to the project.

Add an index.html file to the wwwroot folder with the following markup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui" data-nosnippet>
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

</body>
</html>

Inside the wwwroot folder, create a css folder to hold stylesheets.

Add an app.css stylesheet to the wwwroot/css folder with the following content.

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Inside the wwwroot/css folder, create a bootstrap folder. Inside the bootstrap folder, place a copy of bootstrap.min.css. You can obtain the latest version of bootstrap.min.css from the Bootstrap website. Because all of the content at the site is versioned in the URL, a direct link can't be provided here. Therefore, follow navigation bar links to Docs > Download to obtain bootstrap.min.css.

Add the following Counter component to the root of the project, which is the default Counter component found in Blazor project templates.

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Open the source file for the window that you want to host the Blazor component in, and add the following code:

using WinFormedge;
using WinFormedge.Blazor;

namespace BlazorHybridExampleApp;

internal class MainWindow : Formedge
{
    public MainWindow()
    {
        Url = "https://blazorapp.local/";
        Load += MainWindow_Load;
    }

    private void MainWindow_Load(object? sender, EventArgs e)
    {
        this.SetVirtualHostNameToBlazorHybrid(new BlazorHybridOptions
        {
            Scheme = "https",
            HostName = "blazorapp.local",
            RootComponent = typeof(Counter),
            HostPath = "wwwroot/index.html"
        });
    }
}

This code sets up the Blazor Hybrid environment for the MainWindow class, using the SetVirtualHostNameToBlazorHybrid method to specify the Blazor app's URL and the root component to be rendered.

🎶 Run the app

Run the application, and you should see the Blazor Counter component rendered within the WinFormedge window. You can interact with the component as you would in a standard Blazor application.

Product Compatible and additional computed target framework versions.
.NET net8.0-windows7.0 is compatible.  net9.0-windows was computed.  net9.0-windows7.0 is compatible.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.0 91 7/4/2025
0.1.3296.5 132 6/24/2025
0.1.3296.4 128 6/24/2025
0.1.3296.3 140 6/17/2025
0.1.3296.2 141 6/15/2025
0.1.3296.1 124 6/14/2025
0.1.3240.3 271 6/13/2025
0.1.3240.2 266 6/13/2025
0.1.3240.1 278 6/12/2025