Vytvoření aplikace model Windows Forms Blazor

Článek
06/19/2024

Poznámka:

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

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v tématu .NET a .NET Core Zásady podpory. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 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

Podporované platformy (model Windows Forms dokumentace)
Visual Studio 2022 s úlohou vývoje desktopových aplikací .NET

Ú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:

The Additional Information dialog.

K instalaci Microsoft.AspNetCore.Components.WebView.WindowsForms balíčku NuGet použijte Správce balíčků 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. Postupujte podle odkazů na navigační panel ke stažení na Webu Docs.> Přímý odkaz se tady nedá zadat, protože veškerý obsah na webu je ve verzi v adrese URL.

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 BlazorStudio automaticky pojmenuje webView blazorWebView1.

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

BlazorVlastnosti WebView 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:

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

Sdílet prostřednictvím