Vytvoření aplikace model Windows Forms Blazor
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.
Vytvoření projektu model Windows Forms Blazor
Spusťte Visual Studio. V úvodním okně vyberte Vytvořit nový projekt:
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ší:
V dialogovém okně Konfigurovat nový projekt :
- Nastavte název projektu na WinFormsBlazorhodnotu .
- Zvolte vhodné umístění pro projekt.
- Vyberte tlačítko Další.
V dialogovém okně Další informace vyberte verzi architektury s rozevíracím seznamem Framework. Vyberte tlačítko Vytvořit:
K instalaci Microsoft.AspNetCore.Components.WebView.WindowsForms
balíčku NuGet použijte Správce balíčků 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:
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 BlazorWebView
Microsoft.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.
Visual Studio zobrazí BlazorWebView ovládací prvek v návrháři formulářů jako WebView2
a automaticky pojmenuje ovládací prvek blazorWebView1
:
V Form1
okně 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.
Ve vlastnostech ovládacího prvku změňte hodnotu Dock na BlazorWebViewFill:
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 Form1
InitializeComponent
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:
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:
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro