Erstellen einer Blazor-App in Windows Presentation Foundation (WPF)
Hinweis
Dies ist nicht die neueste Version dieses Artikels. Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.
Wichtig
Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.
Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.
Dieses Tutorial zeigt Ihnen, wie Sie in WPF eine Blazor-App erstellen und ausführen. Folgendes wird vermittelt:
- Erstellen eines Blazor-App-Projekts in WPF
- Hinzufügen einer Razor-Komponente zum Projekt
- Ausführen der App unter Windows
Voraussetzungen
- Unterstützte Plattformen (WPF-Dokumentation)
- Visual Studio 2022 mit der Workload .NET Desktop Development.
Visual Studio-Workload
Wenn die Workload .NET Desktopentwicklung nicht installiert ist, installieren Sie sie mithilfe des Visual Studio-Installationsprogramms. Weitere Informationen finden Sie unter Bearbeiten von Visual Studio-Workloads, -Komponenten und -Sprachpaketen.
Erstellen eines Blazor-Projekts in WPF
Starten Sie Visual Studio. Wählen Sie im Fenster Start die Option Neues Projekt erstellen aus:
Filtern Sie im Dialogfeld Neues Projekt erstellen die Dropdownliste Projekttyp nach Desktop. Wählen Sie die C#-Projektvorlage WPF-Anwendung und dann die Schaltfläche Weiter aus:
Führen Sie im Dialogfeld Neues Projekt konfigurieren folgende Schritte aus:
- Legen Sie den Projektnamen auf WpfBlazor fest.
- Wählen Sie einen geeigneten Speicherort für das Projekt aus.
- Wählen Sie die Schaltfläche Weiter aus.
Wählen Sie im Dialogfeld Zusätzliche Informationen die Frameworkversion mit der Dropdownliste Framework aus. Wählen Sie die Schaltfläche Erstellen aus:
Benutzen Sie den NuGet Paket-Manager um das Microsoft.AspNetCore.Components.WebView.Wpf NuGet-Paket zu installieren:
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen WpfBlazor, und wählen Sie Projektdatei bearbeiten aus, um die Projektdatei (WpfBlazor.csproj) zu öffnen.
Ändern Sie oben in der Projektdatei das SDK in Microsoft.NET.Sdk.Razor:
<Project Sdk="Microsoft.NET.Sdk.Razor">
Fügen Sie in der vorhandenen <PropertyGroup> das folgende Markup hinzu, um den Stammnamespace der App festzulegen, der in diesem Tutorial WpfBlazor ist:
<RootNamespace>WpfBlazor</RootNamespace>
Hinweis
Die obige Anleitung zum Festlegen des Stammnamespaces des Projekts ist eine temporäre Problemumgehung. Weitere Informationen finden Sie unter [Blazor][Wpf] Problem mit dem Stammnamespace (dotnet/maui #5861).
Speichern Sie die Änderungen in der Projektdatei (WpfBlazor.csproj).
Fügen Sie eine _Imports.razor-Datei dem Stammverzeichnis des Projekts mithilfe einer @using-Anweisung für Microsoft.AspNetCore.Components.Web hinzu.
_Imports.razor:
@using Microsoft.AspNetCore.Components.Web
Speichern Sie die Datei _Imports.razor.
Fügen Sie dem Projekt den Ordner wwwroot hinzu.
Fügen Sie dem Ordner wwwroot eine index.html-Datei mit dem folgenden Markup hinzu:
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>
Erstellen Sie im Ordner wwwroot den Ordner css.
Fügen Sie dem Ordner wwwroot/css ein app.css-Stylesheet mit dem folgenden Inhalt hinzu.
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;
}
Erstellen Sie im Ordner wwwroot/css den Ordner bootstrap. Platzieren Sie im bootstrap-Ordner eine Kopie von bootstrap.min.css. Sie können die neueste Version von bootstrap.min.css der Bootstrap-Websiteabrufen. Folgen Sie den Links der Navigationsleiste Herunterladenvon Dokumenten>. Hier kann kein direkter Link bereitgestellt werden, da der gesamte Inhalt auf der Website in der URL versioniert ist.
Fügen Sie die folgende Counter-Komponente zum Stamm des Projekts hinzu, die die Standardkomponente Counter in Blazor-Projektvorlagen ist.
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++;
}
}
Speichern Sie die Counter-Komponente (Counter.razor).
Wenn der MainWindowDesigner nicht geöffnet ist, öffnen Sie ihn durch Doppelklicken auf die Datei MainWindow.xaml im MainWindow. Ersetzen Sie im MainWindow-Designer den vorhandenen XAML-Code durch folgenden Code:
<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>
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf MainWindow.xaml, und wählen Sie dann Code anzeigen aus:
Fügen Sie den Namespace Microsoft.Extensions.DependencyInjection am Anfang der Datei MainWindow.xaml.cs hinzu:
using Microsoft.Extensions.DependencyInjection;
Fügen Sie innerhalb des MainWindow Konstruktors nach dem InitializeComponent Methodenaufruf den folgenden Code hinzu:
var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
Hinweis
Die InitializeComponent-Methode wird automatisch zur App-Erstellungszeit generiert und dem Kompilierungsobjekt für die aufrufende Klasse hinzugefügt.
Der endgültige, vollständige C#-Code von MainWindow.xaml.cs mit einem Dateibereichsnamespace und entfernten Kommentaren:
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());
}
}
Ausführen der App
Wählen Sie auf der Symbolleiste von Visual Studio die Schaltfläche „Start“ aus:
Die unter Windows ausgeführte App:
Nächste Schritte
In diesem Tutorial haben Sie Folgendes gelernt:
- Erstellen eines Blazor-App-Projekts in WPF
- Hinzufügen einer Razor-Komponente zum Projekt
- Ausführen der App unter Windows
Weitere Informationen zu Blazor Hybrid-Apps:
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für