WPF-Beispiel-App

Dieses Beispiel, WebView2WpfBrowser, ist eine WPF .NET-App, die veranschaulicht, wie sie das WebView2-Steuerelement einbetten und WebView2-APIs verwenden, um einen Webbrowser zu implementieren.

• Beispielname: WebView2WpfBrowser
• Repositoryverzeichnis: WebView2WpfBrowser
• Projektmappendatei: WebView2WpfBrowser.sln

Dieses Beispiel wird als WPF Visual Studio 2019-Projekt erstellt. Es verwendet C# und HTML/CSS/JavaScript in der WebView2-Umgebung.

In diesem Beispiel wird eine Auswahl von WebView2-Ereignishandlern und API-Methoden vorgestellt, die es einer WPF-Anwendung ermöglichen, direkt mit einer WebView zu interagieren und umgekehrt.

Die WebView2WpfBrowser-Beispiel-App verfügt über die folgenden Menüs, die viele nützliche Menüelemente enthalten:

• Datei
• View
• Einstellungen
• Szenario

Wenn Sie WebView2 zum ersten Mal verwenden, empfehlen wir Ihnen, zuerst das Erste Schritte Tutorial zu befolgen, in dem beschrieben wird, wie Sie eine WebView2 erstellen und einige grundlegende WebView2-Funktionen durchlaufen. Weitere Informationen finden Sie unter Erste Schritte mit WebView2 in WPF-Apps.

Weitere Informationen zu Ereignissen und API-Handlern in WebView2 finden Sie unter WebView2-API-Referenz.

Schritt 1: Installieren eines Vorschaukanals von Microsoft Edge

1. Wenn noch kein Vorschaukanal von Microsoft Edge (Beta, Dev oder Canary) in einem separaten Fenster oder einer separaten Registerkarte installiert ist, finden Sie weitere Informationen unter Installieren eines Vorschaukanals von Microsoft Edge unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

2. Informationen zum Vorabtest der experimentellen APIs und zum Sicherstellen der Vorwärtskompatibilität Ihrer WebView2-App finden Sie unter Ansätze zum Verwenden eines bestimmten Browserkanals für Ihre App unter Testen anstehender APIs und Features. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

Schritt 2: Installieren von Visual Studio 2019 mit .NET-Unterstützung

Microsoft Visual Studio ist erforderlich. Microsoft Visual Studio Code wird für dieses Beispiel nicht unterstützt.

1. Wenn Visual Studio 2019 (mindestens erforderliche Version) mit .NET-Unterstützung noch nicht installiert ist, finden Sie in einem separaten Fenster oder einer separaten Registerkarte weitere Informationen unter Installieren von Visual Studio unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, um Visual Studio 2019 mit .NET-Unterstützung zu installieren, kehren Sie dann zu dieser Seite zurück, und führen Sie die folgenden Schritte aus.

Schritt 3: Klonen oder Herunterladen des WebView2Samples-Repositorys

1. Falls noch nicht geschehen, klonen Sie das Repository, oder laden Sie es WebView2Sample auf Ihr lokales Laufwerk herunter. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Herunterladen des WebView2Samples-Repositorys unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

Schritt 4: Öffnen der Projektmappe in Visual Studio

1. Öffnen Sie die .sln Datei auf Ihrem lokalen Laufwerk in Visual Studio im Verzeichnis:

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln

   oder:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln

Schritt 5: Installieren von Workloads, wenn Sie dazu aufgefordert werden

1. Wenn Sie dazu aufgefordert werden, installieren Sie alle angeforderten Visual Studio-Workloads. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Installieren von Visual Studio-Workloads unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

   Das Projekt WebView2WpfBrowser wird in Visual Studio geöffnet:

   

Schritt 6: Erstellen und Ausführen des Projekts

Legen Sie oben in Visual Studio das Buildziel wie folgt fest:

1. Wählen Sie in der Dropdownliste Projektmappenkonfigurationendie Option Debuggen oder Freigeben aus.

2. Wählen Sie in der Dropdownliste Lösungsplattformendie Option Beliebige CPU aus.

3. Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2WpfBrowser, und wählen Sie dann Erstellen aus.

   Dadurch wird die Projektdatei WebView2WpfBrowser.csprojerstellt.

4. Wählen Sie in Visual Studio Debuggen>Debuggen starten (F5) aus.

   Das Beispiel-App-Fenster wird geöffnet:

   

5. Wählen Sie in Visual Studio Debuggen>Debuggen Debuggen beenden aus. Visual Studio schließt die App.

Schritt 7: Aktualisieren des WebView2 SDK

1. Aktualisieren Sie die Vorabversion des WebView2 SDK auf dem Projektknoten (nicht dem Projektmappenknoten) in Projektmappen-Explorer. Installieren Sie die neueste Vorabversion des WebView2 SDK, damit Sie die neuesten Features ausprobieren können. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Installieren oder Aktualisieren des WebView2 SDK unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

2. Erstellen Sie das Projekt, und führen Sie es erneut aus.

Schritt 8: Erkunden der Menüs und Untersuchen des Codes

1. Erkunden Sie die Menüs der WebView2WpfBrowser-Beispiel-App , die viele nützliche Menüelemente enthalten:

   • Datei
   • View
   • Einstellungen
   • Szenario

2. Untersuchen Sie den Code im Code-Editor von Visual Studio:

   

Siehe auch

• WebView2-API-Referenz
• Erste Schritte mit WebView2 in WPF-Apps