WinUI 2-Beispiel-App (UWP)

  • Artikel
  • 5 Minuten Lesedauer

In diesem WebView2-Beispiel wird die Verwendung des WebView2-Steuerelements und der WebView2-APIs zum Implementieren eines Webbrowsers in einer WinUI 2(UWP)-App veranschaulicht.

  • Beispielname: webview2_sample_uwp
  • Repositoryverzeichnis: webview2_sample_uwp
  • Lösungsdatei: webview2_sample_uwp.sln

Installierte NuGet-Pakete

Dieses Beispiel enthält die folgenden NuGet-Pakete:

  • Microsoft.NETCore.UniversalWindowsPlatform
  • Microsoft.UI.Xaml - Vorabversion - umfasst Microsoft.Web.WebView2 SDK als Abhängigkeit.

Um die neuesten Features zu veranschaulichen, ist dieses Beispiel im WebView2Samples-Repository so eingerichtet, dass eine Vorabversion des WinUI 2 SDK (in NuGet Package Manager als Microsoft.UI.Xaml aufgeführt) anstelle einer Stable-Version verwendet wird. Das WinUI 2 SDK enthält eine kompatible Version des WebView2 SDK als Abhängigkeit von Microsoft.UI.Xaml.

Schritt 1 : Anzeigen der Infodatei

  1. Lesen Sie in einem separaten Fenster oder einer separaten Registerkarte kurz die gerenderte README.md Datei für dieses Projekt auf GitHub: README-Datei für webview2_sample_uwp. Kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den nachstehenden Schritten fort.

    Sie können auch die README.md Quelldatei (nicht gerendert) in Visual Studio anzeigen. Öffnen Sie die Datei im Datei-Manager oder in Visual Studio > Projektmappen-Explorer:

    <your-repos-directory>/WebView2Samples/SampleApps/webview2_sample_uwp/README.md

    oder:

    <your-repos-directory>/WebView2Samples-main/SampleApps/webview2_sample_uwp/README.md

Schritt 2 : Installieren von Visual Studio

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

  1. Wenn Visual Studio (mindestens erforderliche Version) noch nicht installiert ist, lesen Sie visual Studio in einem separaten Fenster oder einer separaten Registerkarte unter "Installieren von Visual Studio " unter "Einrichten Ihrer Dev-Umgebung 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 nachstehenden Schritten fort.

Schritt 3: 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, lesen Sie "Installieren eines Vorschaukanals von Microsoft Edge " in "Einrichten Ihrer Dev-Umgebung 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 nachstehenden Schritten fort.

Schritt 4 : Herunterladen oder Klonen des WebView2Samples-Repositorys

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

Schritt 5: Öffnen der Lösung in Visual Studio

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

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

    oder:

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

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

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

Schritt 7 : Erstellen und Ausführen des Projekts mithilfe der anfänglichen NuGet-Pakete

Projektmappen-Explorer zeigt das webview2_sample_uwp Projekt an:

Das in Visual Studio in Projektmappen-Explorer geöffnete webview2_sample_uwp Beispiel

Erstellen Und führen Sie das Projekt mithilfe der Versionen der NuGet-Pakete aus, die im Beispiel aus dem Repository installiert wurden:

  1. Wählen Sie in der Dropdownliste " Lösungskonfigurationen " eine Konfiguration aus, z. B. Debuggen.

  2. Wählen Sie in der Dropdownliste " Lösungsplattformen " eine Plattform aus, z. B. x64.

    Festlegen des Buildziels oben in Visual Studio

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

    Das Projekt wird erstellt.

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

    Ein leeres Rasterfenster wird zunächst für einen Moment angezeigt:

    Das webview2_sample_uwp Projekt mit anfänglich leerem Raster

    Das Beispiel-App-Fenster zeigt dann Webseiteninhalte an:

    Das webview2_sample_uwp Projekt, das ausgeführt wird und Webseiteninhalte anzeigt

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

Aktualisieren Sie als Nächstes die NuGet-Pakete für das Projekt gemäß den folgenden Abschnitten.

Schritt 8 : Aktualisieren der NuGet-Pakete

In diesem Schritt aktualisieren wir die NuGet-Pakete des Projekts, um die neueste Vorabversion des WinUI 2 SDK abzurufen. Das WinUI 2 SDK enthält eine kompatible Vorabversion oder Releaseversion des WebView2 SDK.

Aktualisieren Sie die NuGet-Pakete des Projekts:

  1. Klicken Sie in Visual Studio in Projektmappen-Explorer mit der rechten Maustaste auf das webview2_sample_uwp Projekt (nicht auf den Lösungsknoten darüber), und wählen Sie dann "NuGet-Pakete verwalten" aus.

    Der Bereich "NuGet-Paket-Manager " wird in Visual Studio geöffnet.

  2. Klicken Sie im NuGet-Paket-Manager auf die Registerkarte " Installiert ".

  3. Aktivieren Sie das Kontrollkästchen Vorabversion einschließen .

    Es wird eine Vorabversion des Microsoft.UI.Xaml-Pakets aufgeführt, die das WinUI 2 SDK angibt. Das Microsoft.UI.Xaml-Paket enthält das WebView2 SDK; Microsoft.Web.WebView2 ist im Abschnitt "Abhängigkeiten " des Pakets "Microsoft.UI.Xaml" aufgeführt. Durch das Aktualisieren des Microsoft.UI.Xaml-Pakets wird auch das kompatible WebView2 SDK aktualisiert.

  4. Klicken Sie im NuGet-Paket-Manager auf die Registerkarte Mises à jour.

  5. Klicken Sie auf der linken Seite auf die Karte "Microsoft.UI.Xaml ".

  6. Vergewissern Sie sich, dass im Textfeld " Version " die Option "Neueste Vorabversion " ausgewählt ist.

  7. Klicken Sie auf der rechten Seite auf die Schaltfläche " Aktualisieren ":

    Der NuGet-Paket-Manager zum Installieren von Microsoft.UI.Xaml

    Nachdem Sie die neuesten Pakete erhalten haben, was einige Minuten dauern kann, wird das Dialogfeld " Vorschauänderungen " geöffnet. Microsoft.Web.WebView2 (das WebView2 SDK) wird im Dialogfeld " Vorschauänderungen " separat aufgeführt:

    Das Dialogfeld "Änderungen in der Vorschau anzeigen" zum Installieren des Microsoft.UI.Xaml-Pakets

  8. Klicken Sie auf die Schaltfläche " OK ".

  9. Das Dialogfeld "Lizenzakzeptanz " wird angezeigt:

    Das Dialogfeld "Lizenzakzeptanz" für die Installation des Microsoft.UI.Xaml-Pakets

  10. Klicken Sie auf die Schaltfläche "Ich stimme zu ". In Visual Studio wird die readme.txt Datei angezeigt, die besagt, dass Sie das WinUI-Paket installiert haben:

    Die readme.txt Datei nach der Installation des Pakets "Microsoft.UI.Xaml" meldet, dass Sie das WinUI NuGet-Paket installiert haben.

    In der Info werden einige Codezeilen aufgelistet, die mit dem, was wir hinzufügen werden, vergleichbar sind.

  11. Aktualisieren Sie das NuGet-Paket "Microsoft.NETCore.UniversalWindowsPlatform " mit ähnlichen Schritten.

    Nach dem Abrufen der neuesten UWP-Pakete, die einige Minuten dauern können, wird das Dialogfeld " Vorschauänderungen " angezeigt:

    Das Dialogfeld "Änderungen in der Vorschau" für die Installation des UWP-Pakets

  12. Wählen Sie "Datei > speichern" aus.

    Sie haben jetzt das Paket "Microsoft.UI.Xaml", winUI (WinUI 2), für Ihr Projekt installiert. Überprüfen Sie die resultierenden installierten Pakete wie folgt:

  13. Klicken Sie im NuGet-Paket-Manager auf die Registerkarte " Installiert ", und überprüfen Sie die aktualisierten Pakete:

    • Microsoft.NETCore.UniversalWindowsPlatform
    • Microsoft.UI.Xaml – Vorabversion

    Die aktualisierten installierten Pakete

  14. Schließen Sie das NuGet-Paket-Manager-Fenster .

Schritt 9 : Erstellen und Ausführen des Projekts mit aktualisierten Paketen

Nachdem die NuGet-Pakete aktualisiert wurden, erstellen Sie das Projekt, und führen Sie es erneut aus:

  1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das webview2_sample_uwp Projekt, und wählen Sie dann "Erstellen" aus.

    Das Projekt wird erstellt.

  2. Wählen Sie Debuggen > starten Debuggen (F5) aus.

    Ein leeres Rasterfenster wird zunächst für einen Moment angezeigt:

    Das webview2_sample_uwp Projekt mit anfänglich leerem Raster

    Das Beispiel-App-Fenster zeigt dann Webseiteninhalte an:

    Das webview2_sample_uwp Projekt, das ausgeführt wird und Webseiteninhalte anzeigt

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

Schritt 10 – Überprüfen des Codes

  1. Überprüfen Sie den Code im Visual Studio-Code-Editor:

    MainPage.xaml in Visual Studio

Weitere Informationen