Tworzenie aplikacji Windows Presentation Foundation (WPF) 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.
Ostrzeżenie
Ta wersja ASP.NET Core nie jest już obsługiwana. Aby uzyskać więcej informacji, zobacz .NET i .NET Core Support Policy (Zasady obsługi platformy .NET Core). 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ę WPF Blazor . Dowiedz się, jak odbywa się:
- Tworzenie projektu aplikacji WPF Blazor
- Razor Dodawanie składnika do projektu
- Uruchamianie aplikacji w systemie Windows
Wymagania wstępne
- Obsługiwane platformy (dokumentacja WPF)
- 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 WPF Blazor
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 WPF i wybierz przycisk Dalej :
W oknie dialogowym Konfigurowanie nowego projektu:
- Ustaw nazwę projektu na WpfBlazor.
- 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.Wpf
pakiet NuGet:
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy nazwę projektu, a następnie wybierz polecenie Edytuj plik projektu, WpfBlazoraby otworzyć plik projektu (WpfBlazor.csproj
).
W górnej części pliku projektu zmień zestaw SDK na Microsoft.NET.Sdk.Razor
:
<Project Sdk="Microsoft.NET.Sdk.Razor">
W istniejącym <PropertyGroup>
pliku projektu dodaj następujący znacznik, aby ustawić przestrzeń nazw głównej aplikacji, która znajduje się WpfBlazor
w tym samouczku:
<RootNamespace>WpfBlazor</RootNamespace>
Uwaga
Powyższe wskazówki dotyczące ustawiania głównej przestrzeni nazw projektu są tymczasowym obejściem. Aby uzyskać więcej informacji, zobacz [Blazor][Wpf] Problem związany z przestrzeń nazw root (dotnet/maui #5861).
Zapisz zmiany w pliku projektu (WpfBlazor.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>WpfBlazor</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WpfBlazor.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.
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.css
pliku . 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
).
MainWindow
Jeśli projektant nie jest otwarty, otwórz go, klikając MainWindow.xaml
dwukrotnie plik w Eksplorator rozwiązań. W projektancie MainWindow
zastąp kod XAML następującym kodem:
<Window x:Class="WpfBlazor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
xmlns:local="clr-namespace:WpfBlazor"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
<blazor:BlazorWebView.RootComponents>
<blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
</blazor:BlazorWebView.RootComponents>
</blazor:BlazorWebView>
</Grid>
</Window>
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy MainWindow.xaml
i wybierz polecenie Wyświetl kod:
Dodaj przestrzeń nazw Microsoft.Extensions.DependencyInjection na początku MainWindow.xaml.cs
pliku:
using Microsoft.Extensions.DependencyInjection;
Wewnątrz konstruktora po wywołaniu MainWindow
InitializeComponent
metody dodaj następujący kod:
var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
Uwaga
Metoda InitializeComponent
jest generowana automatycznie w czasie kompilacji aplikacji i dodawana do obiektu kompilacji dla klasy wywołującej.
Końcowy, kompletny kod MainWindow.xaml.cs
języka C# z usuniętą przestrzenią nazw o zakresie plików i komentarzami:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Extensions.DependencyInjection;
namespace WpfBlazor;
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
}
}
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 WPF Blazor
- Razor Dodawanie składnika do projektu
- Uruchamianie aplikacji w systemie Windows
Dowiedz się więcej o Blazor Hybrid aplikacjach:
Opinia
https://aka.ms/ContentUserFeedback.
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ź:Prześlij i wyświetl opinię dla