Sdílet prostřednictvím

Vytvoření aplikace model Windows Forms Blazor

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 10 tohoto článku.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete ve verzi .NET 10 tohoto článku.

V tomto kurzu se dozvíte, jak sestavit a spustit aplikaci model Windows FormsBlazor. Získáte informace pro:

  • Vytvoření projektu aplikace model Windows Forms Blazor
  • Spuštění aplikace ve Windows

Požadavky

Úloha sady Visual Studio

Pokud není nainstalovaná úloha vývoje desktopových aplikací .NET, nainstalujte ji pomocí instalačního programu sady Visual Studio. Další informace najdete v tématu Úprava úloh, komponent a jazykových sad sady Visual Studio.

Výběr úloh vývoje desktopových aplikací .NET instalačního programu sady Visual Studio

Vytvoření projektu model Windows Forms Blazor

Spusťte Visual Studio. V úvodním okně vyberte Vytvořit nový projekt:

Vytvořte nové řešení v sadě Visual Studio.

V dialogovém okně Vytvořit nový projekt vyfiltrujte rozevírací seznam Typ projektu na Plochu. Vyberte šablonu projektu C# pro model Windows Forms Aplikaci a vyberte tlačítko Další:

Vytvořte nový projekt v sadě Visual Studio.

V dialogovém okně Konfigurovat nový projekt :

  • Nastavte název projektu na WinFormsBlazorhodnotu .
  • Zvolte vhodné umístění pro projekt.
  • Vyberte tlačítko Další.

Nakonfigurujte projekt.

V dialogovém okně Další informace vyberte verzi architektury s rozevíracím seznamem Framework. Vyberte tlačítko Vytvořit:

Dialogové okno Další informace.

K instalaci balíčku NuGet použijte Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet:

Pomocí Správce balíčků NuGet v sadě Visual Studio nainstalujte balíček NuGet Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet.

V Průzkumník řešení klikněte pravým tlačítkem myši na název WinFormsBlazorprojektu a výběrem možnosti Upravit soubor projektu otevřete soubor projektu (WinFormsBlazor.csproj).

V horní části souboru projektu změňte sadu SDK na Microsoft.NET.Sdk.Razor:

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

Uložte změny do souboru projektu (WinFormsBlazor.csproj).

_Imports.razor Přidejte soubor do kořenového adresáře projektu s direktivou @using pro Microsoft.AspNetCore.Components.Web.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Uložte soubor _Imports.razor.

wwwroot Přidejte do projektu složku.

index.html Přidejte do wwwroot složky soubor s následujícím kódem.

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>

wwwroot Ve složce vytvořte css složku pro uložení šablon stylů.

app.css Do složky přidejte šablonu wwwroot/css stylů s následujícím obsahem.

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

wwwroot/css Ve složce vytvořte bootstrap složku. bootstrap Do složky umístěte kopii souboru bootstrap.min.css. Nejnovější verzi bootstrap.min.css můžete získat z webu Bootstrap. Vzhledem k tomu, že veškerý obsah na webu je ve verzi v adrese URL, přímý odkaz se tady nedá zadat. Proto postupujte podle odkazů navigačního panelu na Docs>Download získat .bootstrap.min.css

Do kořenového adresáře projektu přidejte následující Counter komponentu, což je výchozí Counter komponenta nalezená v Blazor šablonách projektů.

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

Uložte komponentu Counter (Counter.razor).

V Průzkumník řešení poklikejte na Form1.cs soubor a otevřete návrháře:

Soubor Form1.cs v Průzkumník řešení.

Otevřete panel nástrojů tak, že buď vyberete tlačítko Sada nástrojů podél levého okraje okna sady Visual Studio, nebo vyberete příkaz nabídky Zobrazit>sadu nástrojů.

Vyhledejte ovládací prvek pod položkou BlazorWebViewMicrosoft.AspNetCore.Components.WebView.WindowsForms. Přetáhněte panel nástrojů BlazorWebView do návrhářeForm1. Dávejte pozor, abyste nechtěně nepřetáhli WebView2 ovládací prvek do formuláře.

BlazorWebView v sadě nástrojů

Visual Studio zobrazí BlazorWebView ovládací prvek v návrháři formulářů jako WebView2 a automaticky pojmenuje ovládací prvek blazorWebView1:

BlazorWebView v návrháři Form1.

V Form1okně vyberte BlazorWebView (WebView2) jediným kliknutím.

Ve vlastnostech BlazorWebViewvlastnosti potvrďte, že je ovládací prvek pojmenovaný .blazorWebView1 Pokud název není blazorWebView1, přetáhl se nesprávný ovládací prvek ze sady nástrojů. WebView2 Odstraňte ovládací prvek a Form1 přetáhněte hoBlazorWebView do formuláře.

Visual Studio automaticky pojmenuje BlazorWebView1.

Ve vlastnostech ovládacího prvku změňte hodnotu Dock na BlazorWebViewFill:

Vlastnosti BlazorWebView s Dockem nastaveným na Fill.

V návrháři Form1 klikněte pravým tlačítkem myši Form1 a vyberte Zobrazit kód.

Přidejte obory názvů pro Microsoft.AspNetCore.Components.WebView.WindowsForms a Microsoft.Extensions.DependencyInjection do horní části Form1.cs souboru:

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

Do konstruktoru Form1InitializeComponent za volání metody přidejte následující kód:

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

Poznámka:

Metoda InitializeComponent se automaticky vygeneruje v době sestavení aplikace a přidá se do objektu kompilace volající třídy.

Konečný úplný kód Form1.cs jazyka C# s oborem názvů s oborem souborů:

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

Spustit aplikaci

Na panelu nástrojů sady Visual Studio vyberte tlačítko Start:

Tlačítko Start na panelu nástrojů sady Visual Studio

Aplikace spuštěná ve Windows:

Aplikace spuštěná ve Windows.

Další kroky

V tomto kurzu jste se naučili, jak:

  • Vytvoření projektu aplikace model Windows Forms Blazor
  • Spuštění aplikace ve Windows

Další informace o Blazor Hybrid aplikacích:

ASP.NET Core Blazor Hybrid

  • Last updated on