Tworzenie aplikacji Windows Forms Blazor
Uwaga
Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.
Ważne
Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.
Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.
W tym samouczku pokazano, jak skompilować i uruchomić aplikację Windows Forms Blazor . Dowiedz się, jak odbywa się:
- Tworzenie projektu aplikacji Windows Forms Blazor
- Uruchamianie aplikacji w systemie Windows
Wymagania wstępne
- Obsługiwane platformy (dokumentacja formularzy systemu Windows)
- Program Visual Studio 2022 z obciążeniem tworzenia aplikacji klasycznych platformy .NET
Obciążenie programu Visual Studio
Jeśli nie zainstalowano obciążenia programowanie aplikacji klasycznych platformy .NET, zainstaluj obciążenie za pomocą instalatora programu Visual Studio. Aby uzyskać więcej informacji, zobacz Modyfikowanie obciążeń, składników i pakietów językowych programu Visual Studio.
Tworzenie projektu formularzy Blazor systemu Windows
Uruchom program Visual Studio. W oknie startowym wybierz pozycję Utwórz nowy projekt:
W oknie dialogowym Tworzenie nowego projektu przefiltruj listę rozwijaną Typ projektu na Pulpit. Wybierz szablon projektu języka C# dla aplikacji Windows Forms, a następnie wybierz przycisk Dalej :
W oknie dialogowym Konfigurowanie nowego projektu:
- Ustaw nazwę projektu na WinFormsBlazor.
- Wybierz odpowiednią lokalizację dla projektu.
- Kliknij przycisk Next (Dalej).
W oknie dialogowym Dodatkowe informacje wybierz wersję platformy z listą rozwijaną Framework. Wybierz przycisk Utwórz:
Użyj Menedżer pakietów NuGet, aby zainstalować Microsoft.AspNetCore.Components.WebView.WindowsForms pakiet NuGet:
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy nazwę projektu, a następnie wybierz polecenie Edytuj plik projektu, WinFormsBlazoraby otworzyć plik projektu (WinFormsBlazor.csproj).
W górnej części pliku projektu zmień zestaw SDK na Microsoft.NET.Sdk.Razor:
<Project Sdk="Microsoft.NET.Sdk.Razor">
Zapisz zmiany w pliku projektu (WinFormsBlazor.csproj).
_Imports.razor Dodaj plik do katalogu głównego projektu z dyrektywą @using .Microsoft.AspNetCore.Components.Web
_Imports.razor:
@using Microsoft.AspNetCore.Components.Web
Zapisz plik _Imports.razor.
wwwroot Dodaj folder do projektu.
index.html Dodaj plik do wwwroot folderu przy użyciu następującego znacznika.
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>
W folderze wwwroot utwórz css folder do przechowywania arkuszy stylów.
app.css Dodaj arkusz stylów do wwwroot/css folderu z następującą zawartością.
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;
}
W folderze wwwroot/css utwórz bootstrap folder. W folderze bootstrap umieść kopię bootstrap.min.csspliku . Najnowszą wersję bootstrap.min.css można uzyskać z witryny internetowej Bootstrap. Postępuj zgodnie z linkami paska nawigacyjnego do witryny Docs>Download. Nie można tutaj podać linku bezpośredniego, ponieważ cała zawartość w witrynie jest wersjonowana w adresie URL.
Dodaj następujący Counter składnik do katalogu głównego projektu, który jest domyślnym Counter składnikiem znajdującym się w Blazor szablonach projektów.
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++;
}
}
Counter Zapisz składnik (Counter.razor).
W Eksplorator rozwiązań kliknij Form1.cs dwukrotnie plik, aby otworzyć projektanta:
Otwórz przybornik, wybierając przycisk Przybornik wzdłuż lewej krawędzi okna programu Visual Studio lub wybierając polecenie Menu Widok>przybornika.
Znajdź kontrolkę BlazorWebView w obszarze Microsoft.AspNetCore.Components.WebView.WindowsForms. Przeciągnij element BlazorWebView z przybornika do projektanta Form1. Należy zachować ostrożność, aby przypadkowo przeciągnąć kontrolkę WebView2 do formularza.
Program Visual Studio wyświetla kontrolkę BlazorWebView w projektancie formularzy jako WebView2 i automatycznie nazywa kontrolkę blazorWebView1:
W Form1pliku wybierz BlazorWebView element (WebView2) za pomocą jednego kliknięcia.
W obszarze BlazorWebViewWłaściwości upewnij się, że kontrolka ma nazwę blazorWebView1. Jeśli nazwa nie blazorWebView1jest nazwą , nieprawidłowa kontrolka została przeciągnięta z przybornika. Usuń kontrolkę WebView2 i Form1 przeciągnij kontrolkęBlazorWebView do formularza.
We właściwościach kontrolki zmień BlazorWebViewwartość Dock na Fill:
W projektancie Form1 kliknij prawym przyciskiem myszy Form1 i wybierz polecenie Wyświetl kod.
Dodaj przestrzenie nazw dla Microsoft.AspNetCore.Components.WebView.WindowsForms pliku i Microsoft.Extensions.DependencyInjection na początku Form1.cs pliku:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
Wewnątrz konstruktora po wywołaniu Form1InitializeComponent metody dodaj następujący kod:
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
Uwaga
Metoda InitializeComponent jest generowana automatycznie w czasie kompilacji aplikacji i dodawana do obiektu kompilacji dla klasy wywołującej.
Końcowy, kompletny kod języka C# z Form1.csprzestrzenią nazw o zakresie plików:
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");
}
}
Uruchom aplikację
Wybierz przycisk Start na pasku narzędzi programu Visual Studio:
Aplikacja uruchomiona w systemie Windows:
Następne kroki
W tym samouczku zawarto informacje na temat wykonywania następujących czynności:
- Tworzenie projektu aplikacji Windows Forms Blazor
- Uruchamianie aplikacji w systemie Windows
Dowiedz się więcej o Blazor Hybrid aplikacjach:
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla