Condividi tramite

Creare un'app Windows Form Blazor

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Avviso

Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere i criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Questa esercitazione illustra come compilare ed eseguire un'app Windows FormBlazor. Scopri come:

  • Creare un progetto di app Windows Form Blazor
  • Eseguire l'app in Windows

Prerequisiti

Carico di lavoro di Visual Studio

Se il carico di lavoro Sviluppo desktop .NET non è installato, usare il programma di installazione di Visual Studio per installare il carico di lavoro. Per altre informazioni, vedere Modificare carichi di lavoro, componenti e Language Pack di Visual Studio.

Selezione del carico di lavoro Sviluppo desktop .NET del programma di installazione di Visual Studio.

Creare un progetto di Windows Form Blazor

Avviare Visual Studio. Nella finestra iniziale selezionare Crea un nuovo progetto:

Creare una nuova soluzione in Visual Studio.

Nella finestra di dialogo Crea un nuovo progetto filtrare l'elenco a discesa Tipo di progetto su Desktop. Selezionare il modello di progetto C# per Windows Form'app e selezionare il pulsante Avanti:

Creare un nuovo progetto in Visual Studio

Nella finestra di dialogo Configura il nuovo progetto :

  • Impostare Il nome del progetto su WinFormsBlazor.
  • Scegliere una posizione adatta per il progetto.
  • Seleziona il pulsante Avanti.

Configurare il progetto.

Nella finestra di dialogo Informazioni aggiuntive selezionare la versione del framework con l'elenco a discesa Framework. Selezionare il pulsante Crea :

Finestra di dialogo Informazioni aggiuntive.

Usare nuGet Gestione pacchetti per installare il Microsoft.AspNetCore.Components.WebView.WindowsForms pacchetto NuGet:

Usare Nuget Gestione pacchetti in Visual Studio per installare il pacchetto NuGet Microsoft.AspNetCore.Components.WebView.WindowsForms.

In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto e WinFormsBlazorscegliere Modifica file di progetto per aprire il file di progetto (WinFormsBlazor.csproj).

Nella parte superiore del file di progetto modificare l'SDK in Microsoft.NET.Sdk.Razor:

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

Salvare le modifiche apportate al file di progetto (WinFormsBlazor.csproj).

Aggiungere un _Imports.razor file alla radice del progetto con una @using direttiva per Microsoft.AspNetCore.Components.Web.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Salvare il file _Imports.razor.

Aggiungere una wwwroot cartella al progetto.

Aggiungere un index.html file alla wwwroot cartella con il markup seguente.

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>

All'interno della wwwroot cartella creare una css cartella per contenere fogli di stile.

Aggiungere un app.css foglio di stile alla wwwroot/css cartella con il contenuto seguente.

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

All'interno della wwwroot/css cartella creare una bootstrap cartella. All'interno della bootstrap cartella inserire una copia di bootstrap.min.css. È possibile ottenere la versione più recente di bootstrap.min.css dal sito Web Bootstrap. Poiché tutto il contenuto nel sito è con controllo delle versioni nell'URL, non è possibile fornire un collegamento diretto qui. Di conseguenza, seguire i collegamenti della barra di spostamento a Docs>Download per ottenere .bootstrap.min.css

Aggiungere il componente seguente Counter alla radice del progetto, ovvero il componente predefinito Counter trovato nei Blazor modelli di progetto.

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

Salvare il Counter componente (Counter.razor).

In Esplora soluzioni fare doppio clic sul Form1.cs file per aprire la finestra di progettazione:

File Form1.cs in Esplora soluzioni.

Aprire la casella degli strumenti selezionando il pulsante Casella degli strumenti lungo il bordo sinistro della finestra di Visual Studio o selezionando il comando di menu Visualizza>casella degli strumenti.

Individuare il BlazorWebView controllo in Microsoft.AspNetCore.Components.WebView.WindowsForms. Trascinare BlazorWebView dalla casella degli strumenti nella Form1 finestra di progettazione. Prestare attenzione a non trascinare accidentalmente un WebView2 controllo nel form.

BlazorWebView nella casella degli strumenti.

Visual Studio mostra il BlazorWebView controllo nella finestra di progettazione dei moduli come WebView2 e denomina automaticamente il controllo blazorWebView1:

BlazorWebView nella finestra di progettazione di Form1.

In Form1selezionare (BlazorWebViewWebView2) con un solo clic.

BlazorWebViewIn Proprietà di verificare che il controllo sia denominato blazorWebView1. Se il nome non blazorWebView1è , il controllo errato è stato trascinato dalla casella degli strumenti. Eliminare il WebView2 controllo in Form1 e trascinare il BlazorWebView controllo nel form.

BlazorWebView viene denominato automaticamente

Nelle proprietà del controllo modificare il BlazorWebViewvalore dock del controllo in Fill:

Proprietà BlazorWebView con Dock impostato su Fill.

Nella finestra di progettazione fare clic con il pulsante destro del Form1 mouse Form1 e selezionare Visualizza codice.

Aggiungere spazi dei nomi per Microsoft.AspNetCore.Components.WebView.WindowsForms e Microsoft.Extensions.DependencyInjection all'inizio del Form1.cs file:

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

All'interno del Form1 costruttore, dopo la chiamata al InitializeComponent metodo, aggiungere il codice seguente:

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

Nota

Il InitializeComponent metodo viene generato automaticamente in fase di compilazione dell'app e aggiunto all'oggetto di compilazione per la classe chiamante.

Codice C# finale di Form1.cs con uno spazio dei nomi con ambito file:

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

Eseguire l'app

Selezionare il pulsante Start sulla barra degli strumenti di Visual Studio:

Pulsante Start della barra degli strumenti di Visual Studio.

L'app in esecuzione in Windows:

L'app in esecuzione in Windows.

Passaggi successivi

Questa esercitazione ha descritto come:

  • Creare un progetto di app Windows Form Blazor
  • Eseguire l'app in Windows

Altre informazioni sulle Blazor Hybrid app:

ASP.NET Core Blazor Hybrid