Een Windows Forms-app Blazor maken

Opmerking

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 10-versie van dit artikel voor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie het .NET- en .NET Core-ondersteuningsbeleid voor meer informatie. Zie de .NET 10-versie van dit artikel voor de huidige release.

In deze zelfstudie leert u hoe u een Windows Forms-app Blazor bouwt en uitvoert. U leert het volgende:

Een Windows Forms-app-project Blazor maken
De app uitvoeren in Windows

Vereiste voorwaarden

Ondersteunde platforms (Windows Forms-documentatie)
Visual Studio 2022 met de workload voor .NET-desktopontwikkeling

Visual Studio-workload

Als de workload voor .NET-desktopontwikkeling niet is geïnstalleerd, gebruikt u het Installatieprogramma van Visual Studio om de workload te installeren. Zie Visual Studio-workloads, onderdelen en taalpakketten wijzigen voor meer informatie.

Selectie van .NET-desktopontwikkelingsworkloads voor Visual Studio-installatieprogramma.

Een Windows Forms-project Blazor maken

Start Visual Studio. Selecteer een nieuw project maken in het startvenster:

Maak een nieuwe oplossing in Visual Studio.

Filter in het dialoogvenster Een nieuw project maken de vervolgkeuzelijst Projecttype naar Bureaublad. Selecteer de C#-projectsjabloon voor Windows Forms App en selecteer de knop Volgende :

Maak een nieuw project in Visual Studio.

In het dialoogvenster Uw nieuwe project configureren :

Stel de projectnaam in op WinFormsBlazor.
Kies een geschikte locatie voor het project.
Selecteer de Volgende knop.

Configureer het project.

Selecteer in het dialoogvenster Aanvullende informatie de frameworkversie met de vervolgkeuzelijst Framework . Selecteer de knop Maken :

Het dialoogvenster Aanvullende informatie.

NuGet Package Manager gebruiken om het Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet-pakket te installeren:

Gebruik Nuget Package Manager in Visual Studio om het NuGet-pakket Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet te installeren.

Klik in Solution Explorer met de rechtermuisknop op de naam WinFormsBlazorvan het project en selecteer Projectbestand bewerken om het projectbestand (WinFormsBlazor.csproj) te openen.

Wijzig bovenaan het projectbestand de SDK in Microsoft.NET.Sdk.Razor:

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

Sla de wijzigingen op in het projectbestand (WinFormsBlazor.csproj).

Voeg een _Imports.razor bestand toe aan de rootmap van het project met een @using richtlijn voor Microsoft.AspNetCore.Components.Web.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Sla het bestand _Imports.razor op.

Voeg een wwwroot map toe aan het project.

Voeg een index.html bestand toe aan de wwwroot map met de volgende markeringen.

wwwroot/index.html:

<!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" />
    <link href="WinFormsBlazor.styles.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>

Maak in de wwwroot map een css map voor het opslaan van stijlbladen.

Voeg een app.css opmaakmodel toe aan de wwwroot/css map met de volgende inhoud.

wwwroot/css/app.css:

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;
    }

Maak in de wwwroot/css map een bootstrap map. Plaats in de bootstrap map een kopie van bootstrap.min.css. U kunt de nieuwste versie van bootstrap.min.css van de Bootstrap-website verkrijgen. Omdat alle inhoud op de site versiebeheer in de URL heeft, kan hier geen directe koppeling worden opgegeven. Volg daarom de navigatiebalkkoppelingen naar Docs>Download om te verkrijgen bootstrap.min.css.

Voeg het volgende Counter onderdeel toe aan de hoofdmap van het project. Dit is het standaardonderdeel Counter dat in Blazor projectsjablonen wordt gevonden.

Counter.razor:

<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++;
    }
}

Sla het Counter onderdeel (Counter.razor) op.

Dubbelklik in Solution Explorer op het Form1.cs bestand om de ontwerpfunctie te openen:

Het bestand Form1.cs in Solution Explorer.

Open de werkset door de knop Werkset aan de linkerkant van het Visual Studio-venster te selecteren of door de menuopdracht Werkset weergeven> te selecteren.

Zoek het BlazorWebView besturingselement onder Microsoft.AspNetCore.Components.WebView.WindowsForms. Sleep de BlazorWebView van de Gereedschapskist naar de Form1 ontwerper. Zorg ervoor dat u een WebView2 controle per ongeluk niet in het formulier sleept.

BlazorWebView in de Werkset.

Visual Studio toont het BlazorWebView besturingselement in de formulierontwerper als WebView2 en geeft automatisch de naam van het besturingselement blazorWebView1:

BlazorWebView in de Form1-ontwerpfunctie.

In Form1, selecteer de BlazorWebView (WebView2) met één klik.

Controleer in de BlazorWebView van het besturingselement of het besturingselement de naam blazorWebView1heeft. Als de naam niet blazorWebView1 is, is het verkeerde controle-element vanuit de Gereedschapskist gesleept. Verwijder de WebView2 controle in Form1 en sleep de BlazorWebView controle in het formulier.

De BlazorWebView wordt automatisch 'blazorWebView1' genoemd door Visual Studio.

Wijzig in de eigenschappen van het besturingselement de BlazorWebViewDock-waarde in Vullen:

BlazorWebView-eigenschappen met Dock ingesteld op Fill.

Klik in de Form1 ontwerper met de rechtermuisknop Form1 en selecteer Code weergeven.

Voeg naamruimten toe voor Microsoft.AspNetCore.Components.WebView.WindowsForms en Microsoft.Extensions.DependencyInjection boven aan het Form1.cs bestand:

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

Voeg na de Form1 methodeaanroep de volgende code toe in de InitializeComponent constructor:

var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");

Opmerking

De InitializeComponent methode wordt automatisch gegenereerd tijdens het bouwen van apps en toegevoegd aan het compilatieobject voor de aanroepende klasse.

De uiteindelijke, volledige C#-code van Form1.cs met een naamruimte met bestandsbereik:

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

namespace WinFormsBlazor;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        blazorWebView1.HostPage = "wwwroot\\index.html";
        blazorWebView1.Services = services.BuildServiceProvider();
        blazorWebView1.RootComponents.Add<Counter>("#app");
    }
}

De app uitvoeren

Selecteer de startknop op de werkbalk van Visual Studio:

De app die wordt uitgevoerd in Windows:

De app die wordt uitgevoerd in Windows.

Volgende stappen

In deze tutorial leerde je hoe je:

Een Windows Forms-app-project Blazor maken
De app uitvoeren in Windows

Meer informatie over Blazor Hybrid apps:

ASP.NET Core Blazor Hybrid

Feedback

Is deze pagina nuttig?

Last updated on 2026-01-09