Dela via

Skapa en Windows Forms-app Blazor

Anmärkning

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i .NET 10-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i supportpolicyn för .NET och .NET Core. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Den här självstudien lär dig hur du skapar och kör en Windows Forms-app Blazor. Du lär dig att:

  • Skapa ett Windows Forms-appprojekt Blazor
  • Kör appen i Windows

Förutsättningar

Visual Studio-arbetsbelastning

Om arbetsbelastningen för .NET-skrivbordsutveckling inte är installerad använder du Installationsprogrammet för Visual Studio för att installera arbetsbelastningen. Mer information finns i Ändra Visual Studio-arbetsbelastningar, komponenter och språkpaket.

Arbetsbelastningsval för Visual Studio-installationsprogrammet för .NET-skrivbordsutveckling.

Skapa ett Windows Forms-projekt Blazor

Starta Visual Studio. I startfönstret väljer du Skapa ett nytt projekt:

Skapa en ny lösning i Visual Studio.

I dialogrutan Skapa ett nytt projekt filtrerar du listrutan Projekttyp till Desktop. Välj C#-projektmallen för Windows Forms App och välj knappen Nästa :

Skapa ett nytt projekt i Visual Studio.

I dialogrutan Konfigurera det nya projektet :

  • Ange projektnamnet till WinFormsBlazor.
  • Välj en lämplig plats för projektet.
  • Välj knappen Nästa.

Konfigurera projektet.

I dialogrutan Ytterligare information väljer du ramverksversionen med listrutan Framework . Välj knappen Skapa :

Dialogrutan för ytterligare information.

Använd NuGet Package Manager för att installera NuGet-paketet Microsoft.AspNetCore.Components.WebView.WindowsForms :

Använd Nuget Package Manager i Visual Studio för att installera NuGet-paketet Microsoft.AspNetCore.Components.WebView.WindowsForms.

Högerklicka på projektets namn i WinFormsBlazor och välj Redigera projektfil för att öppna projektfilen (WinFormsBlazor.csproj).

Överst i projektfilen ändrar du SDK till Microsoft.NET.Sdk.Razor:

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

Spara ändringarna i projektfilen (WinFormsBlazor.csproj).

Lägg till en _Imports.razor-fil till projektets rotmapp med ett @using direktiv för Microsoft.AspNetCore.Components.Web.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Spara filen _Imports.razor.

Lägg till en wwwroot mapp i projektet.

Lägg till en index.html fil i wwwroot mappen med följande markering.

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>

Skapa en css mapp för formatmallar i wwwroot mappen.

Lägg till en app.css formatmall i wwwroot/css mappen med följande innehåll.

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

Skapa en wwwroot/css mapp i bootstrap mappen. Placera en kopia av bootstrap i bootstrap.min.css mappen. Du kan hämta den senaste versionen av bootstrap.min.css från Bootstrap-webbplatsen. Eftersom allt innehåll på webbplatsen är versionshanterat i URL:en kan du inte ange en direktlänk här. Följ därför länkarna i navigeringsfältet till Docs>Download för att hämta bootstrap.min.css.

Lägg till följande Counter komponent i roten för projektet, som är standardkomponenten Counter som finns i Blazor projektmallar.

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

Komponenten Counter (Counter.razor) sparas.

I Solution Explorer dubbelklickar du på Form1.cs filen för att öppna designern:

Filen Form1.cs i Solution Explorer.

Öppna verktygslådan genom att antingen välja knappen Verktygslåda längs den vänstra kanten av Visual Studio-fönstret eller välja menykommandot Visa>verktygslåda .

Leta reda på kontrollen BlazorWebView under Microsoft.AspNetCore.Components.WebView.WindowsForms. Dra BlazorWebView från verktygslådan och släpp den på Form1 designern. Var försiktig så att du inte oavsiktligt drar en WebView2 kontroll till formuläret.

BlazorWebView i verktygslådan.

Visual Studio visar BlazorWebView kontrollen i formulärdesignern som WebView2 och namnger automatiskt kontrollen blazorWebView1:

BlazorWebView i Form1-designern.

I Form1väljer du BlazorWebView (WebView2) med ett enda klick.

Bekräfta i BlazorWebViewEgenskaper att kontrollen heter blazorWebView1. Om namnet inte är blazorWebView1, drogs fel kontroll från verktygslådan. WebView2 Ta bort kontrollen i Form1 och dra BlazorWebView kontrollen till formuläret.

BlazorWebView heter automatiskt

I kontrollens egenskaper ändrar du BlazorWebViewDock-värdet till Fyllning:

BlazorWebView-egenskaper med Dock inställt till Fill.

Högerklicka i designern Form1Form1 och välj Visa kod.

Lägg till namnområden för Microsoft.AspNetCore.Components.WebView.WindowsForms och Microsoft.Extensions.DependencyInjection överst i Form1.cs filen:

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

Inuti konstruktorn Form1, efter metodanropet InitializeComponent, lägg till följande kod:

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

Anmärkning

Metoden InitializeComponent genereras automatiskt vid appbyggtiden och läggs till i kompileringsobjektet för den anropande klassen.

Den sista, fullständiga C#-koden för Form1.cs med ett filomfattningsnamnområde:

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

Kör appen

Välj startknappen i Visual Studio-verktygsfältet:

Startknappen i Visual Studio-verktygsfältet.

Appen som körs i Windows:

Appen som körs i Windows.

Nästa steg

I den här handledningen lärde du dig att:

  • Skapa ett Windows Forms-appprojekt Blazor
  • Kör appen i Windows

Läs mer om Blazor Hybrid appar:

ASP.NET Core Blazor Hybrid

  • Last updated on