Erste Schritte mit WebView2 in WPF-Apps

  • Artikel

In diesem Artikel erfahren Sie, wie Sie Ihre Entwicklungstools einrichten und eine erste WebView2-App für Windows Presentation Foundation (WPF) erstellen und dabei mehr über WebView2-Konzepte erfahren.

In diesem Tutorial verwenden Sie die Projektvorlage WPF-Anwendung oder WPF-App (.NET Framework), um eine WPF-App zu erstellen, und installieren dann das WebView2 SDK für das Projekt, um WebView2 hinzuzufügen.

Abgeschlossenes Projekt

Eine vollständige Version dieses Tutorialprojekts ist im WebView2Samples-Repository verfügbar:

  • Beispielname: WPF_GettingStarted
  • Repositoryverzeichnis: WPF_GettingStarted
  • Projektmappendatei: WPFSample.sln

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

Für dieses Tutorial ist Microsoft Visual Studio und nicht Microsoft Visual Studio Code erforderlich. In diesem Artikel wird hauptsächlich die Verwendung von Visual Studio 2022 beschrieben.

  1. Installieren Sie Visual Studio. Installieren Sie die Unterstützung für die .NET-Desktopentwicklung , um die erforderlichen Projektvorlagen wie folgt zu erhalten.

  2. Wenn Sie sich auf dem Visual Studio-Startbildschirm befinden, scrollen Sie zum Ende des Dialogfelds Neues Projekt erstellen , und klicken Sie auf den Link Ohne Code öffnen. Visual Studio wird geöffnet.

  3. Wählen Sie in Visual Studio Tools>und Features abrufen aus. Das fenster Visual Studio-Installer wird geöffnet, und das Dialogfeld Ändern wird darüber geöffnet.

  4. Wählen Sie die Workload .NET-Desktopentwicklung aus, damit ein Häkchen vorhanden ist.

  5. Stellen Sie im Abschnitt Installationsdetails.NET-Desktopentwicklung>>enthalten auf der rechten Seite sicher, dass die .NET-Desktopentwicklungstools und .NET Framework 4.7.2-Entwicklungstools mit einem Häkchen daneben aufgeführt sind.

  6. Im Abschnitt Installationsdetails.NET-Desktopentwicklung>> Optional auf der rechten Seite:

    • Wenn Sie Visual Studio 2022 verwenden, stellen Sie sicher, dass Entwicklungstools für .NET ausgewählt ist:

    Visual Studio 2022-Dialogfeld

    • Wenn Sie Visual Studio 2019 verwenden, stellen Sie sicher, dass .NET-Entwicklungstools ausgewählt sind:

    Visual Studio 2019-Dialogfeld

  7. Klicken Sie auf die Schaltfläche Ändern .

Dieses Tutorial funktioniert auch mit Visual Studio 2017. Weitere Informationen finden Sie unter Ältere Downloads in Visual Studio. Installieren Sie .NET-Unterstützung, um die erforderlichen Projektvorlagen zu erhalten, ähnlich wie in den obigen Schritten.

Schritt 2: Installieren eines Vorschaukanals von Microsoft Edge

  1. Laden Sie einen beliebigen Microsoft Edge Insider-Kanal (Vorschauversion) (Beta, Dev oder Canary) auf ein unterstütztes Betriebssystem herunter:

    • Windows 10
    • Windows 11

    Es wird empfohlen, den Canary-Kanal von Microsoft Edge zu verwenden. Die erforderliche Mindestversion ist 82.0.488.0.

Schritt 3: Erstellen einer WebView2-App mit nur einem Fenster

Erstellen Sie zunächst ein einfaches Desktopprojekt, das ein einzelnes Standard Fenster enthält.

  1. Entscheiden Sie, ob ein .NET Core/5/6-Projekt (neuer) oder ein WPF-App-Projekt (.NET Framework) (älter) erstellt werden soll. Weitere Informationen finden Sie unter:

  2. Befolgen Sie den entsprechenden Abschnitt weiter unten.

Erstellen eines .NET Core/5/6-Projekts

Wenn Sie ein .NET Core/5/6-Projekt erstellen, führen Sie die folgenden Schritte aus. Fahren Sie andernfalls mit Erstellen eines WPF-App-Projekts (.NET Framework) fort.

  1. Öffnen Sie Microsoft Visual Studio, z. B. Visual Studio 2022.

  2. Klicken Sie im öffnenden Bereich auf Neues Projekt erstellen. Oder wählen Sie im Standard Visual Studio-Fenster Datei>Neues>Projekt aus. Das Dialogfeld Neues Projekt erstellen wird geöffnet.

  3. Geben Sie im Textfeld Nach Vorlagen suchen den Text ein WPF Application. Im Bereich Neues Projekt erstellen werden die installierten Projektvorlagen angezeigt, die ihrem eingegebenen Text entsprechen. In diesem Artikel werden die C#-Dialoge anstelle von VB-Dialogfeldern gezeigt. Beide Sprachen werden für WebView2 unterstützt.

  4. Wenn Sie Visual Studio 2022 verwenden, klicken Sie auf eine Projektvorlage mit dem Titel WPF-Anwendung und dem Beschreibungstext Ein Projekt zum Erstellen einer .NET WPF-Anwendung:

    Auswählen der Vorlage

    Wenn Sie Visual Studio 2019 verwenden, klicken Sie auf eine Projektvorlage mit dem Titel WPF-Anwendung und dem Beschreibungstext Ein Projekt zum Erstellen einer .NET Core-WPF-Anwendung:

    Auswählen der Vorlage

    Wenn die obige Projektvorlage nicht aufgeführt ist, lesen Sie Schritt 1 – Installieren von Visual Studio mit .NET-Unterstützung weiter oben, um .NET-Desktopentwicklungstools zu installieren.

  5. Klicken Sie auf die Schaltfläche Weiter .

    Das Dialogfeld Neues Projekt konfigurieren: WPF-Anwendung wird geöffnet:

    Dialogfeld

  6. Geben Sie im Textfeld Projektname einen Projektnamen ein, z. B. MyWpfDotnetCoreWv2App.

  7. Wählen Sie im Textfeld Speicherort einen Pfad auf Ihrem lokalen Laufwerk aus, z C:\Users\myusername\Documents\MyProjects. B. , und klicken Sie dann auf die Schaltfläche Weiter .

    Das Dialogfeld Zusätzliche Informationen wird mit einer Dropdownliste Zielframework angezeigt:

    Dialogfeld

  8. Wählen Sie .NET Core 3.1 oder höher aus, z. B. .NET 6.0. (Wählen Sie nicht .NET Core 3.0 aus.) Klicken Sie dann auf die Schaltfläche Erstellen .

    Das anfängliche .NET Core WPF-Anwendungsprojekt wird in Visual Studio geöffnet:

    Erstes Projekt in Visual Studio 2022 mit .NET Core WPF-Anwendungsvorlage

Fahren Sie mit Schritt 4 – Erstellen und Ausführen des Anfangsprojekts ohne WebView2 fort.

Erstellen eines WPF-App-Projekts (.NET Framework)

Wenn Sie ein WPF-App-Projekt (.NET Framework) erstellen, führen Sie die folgenden Schritte aus. Fahren Sie andernfalls mit Schritt 4 – Erstellen und Ausführen des anfänglichen Projekts ohne WebView2 fort.

  1. Öffnen Sie Microsoft Visual Studio, z. B. Visual Studio 2022.

  2. Klicken Sie im öffnenden Bereich auf Neues Projekt erstellen. Oder wählen Sie im Standard Visual Studio-Fenster Datei>Neues>Projekt aus. Das Dialogfeld Neues Projekt erstellen wird geöffnet.

  3. Geben Sie im Textfeld Nach Vorlagen suchen den Text ein WPF App. Im Bereich Neues Projekt erstellen werden die installierten Projektvorlagen angezeigt, die ihrem eingegebenen Text entsprechen. In diesem Artikel werden die C#-Dialoge anstelle von VB-Dialogfeldern gezeigt. Beide Sprachen werden für WebView2 unterstützt.

  4. Klicken Sie auf eine Projektvorlage mit dem Titel WPF-App (.NET Framework) und dem Beschreibungstext Windows Presentation Foundation Clientanwendung:

    Auswählen der Vorlage

    Wenn die obige Projektvorlage nicht aufgeführt ist, lesen Sie Schritt 1 – Installieren von Visual Studio mit .NET-Unterstützung weiter oben, um .NET-Desktopentwicklungstools zu installieren.

  5. Klicken Sie auf die Schaltfläche Weiter .

    Das Dialogfeld Neues Projekt konfigurieren: WPF-App (.NET Framework) wird geöffnet:

    Dialogfeld

  6. Geben Sie im Textfeld Projektname einen Projektnamen ein, z. B. MyWpfDotnetFwkWv2App.

  7. Wählen Sie im Textfeld Speicherort einen Pfad auf Dem lokalen Laufwerk aus, z C:\Users\myusername\Documents\MyProjects. B. .

  8. Wählen Sie in der Dropdownliste Framework.NET Framework 4.6.2 oder höher aus.

  9. Klicken Sie auf die Schaltfläche Erstellen.

    Das anfängliche WPF-App-Projekt (.NET Framework) wird in Visual Studio geöffnet:

    Erstes Projekt in Visual Studio 2022 mit der Vorlage WPF-App (.NET Framework)

Schritt 4: Erstellen und Ausführen des anfänglichen Projekts ohne WebView2

  1. Wählen Sie Datei>Alle speichern aus, um das Projekt zu speichern.

  2. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

    Das Projekt wird ausgeführt und zeigt ein leeres Fenster an:

    Leeres App-Fenster ohne WebView2

    Möglicherweise müssen Sie die ausgewählte .NET Framework Version wie folgt installieren.

  3. Wenn die App nicht geöffnet wird, wählen Sie Debuggen>Starten ohne Debuggen aus.

    Wenn Sie die ausgewählte Version von .NET Framework nicht installiert haben, wird möglicherweise das folgende Dialogfeld angezeigt: "Diese Anwendung konnte nicht gestartet werden. Die Anwendung erfordert eine der folgenden Versionen des .NET Framework: . NETFramework,Version=v4.8.1 – Möchten Sie diese .NET Framework Version jetzt installieren?"

  4. Wenn Sie ein solches Dialogfeld erhalten, wechseln Sie zu Download .NET Framework, und laden Sie die erforderliche Version des Developer Packs (nicht die Runtime) herunter, und installieren Sie sie dann. Laden Sie ndp481-devpack-enu.exe beispielsweise auf C:\Users\username\Downloadsherunter, und doppelklicken Sie dann auf die Datei, um sie zu installieren.

  5. Wenn Sie dazu aufgefordert werden, starten Sie Den Computer neu:

    Neustarten, um .NET Framework zu installieren

  6. Wechseln Sie zur heruntergeladenen Datei, zndp481-devpack-enu.exe. B. in C:\Users\username\Downloads, und doppelklicken Sie erneut auf die heruntergeladene Datei, um das .NET Framework Developer Pack zu installieren. Das Dialogfeld Erfolg wird angezeigt:

    Erfolgreiches Setup für die Installation von .NET Framework

  7. Wenn Sie dazu aufgefordert werden, starten Sie den Computer erneut neu.

  8. Öffnen Sie Visual Studio, und öffnen Sie die projektmappe, die Sie erstellt haben.

  9. Drücken Sie F5 , um die anfängliche App (siehe oben) auszuführen, ohne das WebView2 SDK einzuschließt.

  10. Schließen Sie die anfängliche App.

Schritt 5: Installieren des WebView2 SDK

Verwenden Sie in Visual Studio den NuGet-Paket-Manager, um dem Projekt das WebView2 SDK wie folgt hinzuzufügen:

  1. Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen (basierend auf der Projektvorlage .NET (Core) oder .NET Framework), und wählen Sie dann NuGet-Pakete verwalten aus:

    Befehl

  2. Klicken Sie oben links auf die Registerkarte Durchsuchen . Geben Sie in der Suchleiste ein Microsoft.Web.WebView2, und klicken Sie dann auf das Paket Microsoft.Web.WebView2 .

    Im Dialogfeld "NuGet-Paket-Manager" werden Suchergebnisse angezeigt, einschließlich eines Microsoft.Web.WebView2-Pakets . Das Dialogfeld enthält eine Versionsnummer und die Schaltfläche Installieren .

    Im Dialogfeld

  3. Übernehmen Sie die Standardversion, und klicken Sie dann auf die Schaltfläche Installieren .

  4. Klicken Sie im Dialogfeld Vorschau der Änderungen auf die Schaltfläche OK .

  5. Wählen Sie Datei>Alle speichern aus, um das Projekt zu speichern.

  6. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

    Das Projekt wird ausgeführt und zeigt ein leeres Fenster an. Dadurch wird überprüft, ob WebView2 installiert ist und funktioniert, obwohl WebView2 noch keinen Inhalt zum Anzeigen hat:

    Leeres App-Fenster mit WebView2 SDK

  7. Schließen Sie die App.

Schritt 6: Erstellen eines einzelnen WebView2-Steuerelements

Fügen Sie Ihrer App ein WebView2-Steuerelement hinzu.

  1. Fügen Sie in der MainWindow.xaml Datei die folgende Zeile in <Window/> das Tag ein, um den WebView2-XAML-Namespace hinzuzufügen:

    xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

  2. Stellen Sie sicher, dass der Code in MainWindow.xaml wie der folgende Code aussieht:

    <Window x:Class="WPF_Getting_Started.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:local="clr-namespace:{YOUR PROJECT NAME}"
      xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
      mc:Ignorable="d"
      Title="MainWindow"
      Height="450"
      Width="800"
>
   <Grid>

   </Grid>
</Window>

  3. Um das WebView2-Steuerelement hinzuzufügen, ersetzen Sie die <Grid> Tags durch den folgenden Code. Die Source -Eigenschaft legt den anfänglichen URI fest, der im WebView2-Steuerelement angezeigt wird.

    <DockPanel>
   <wv2:WebView2 Name="webView"
                  Source="https://www.microsoft.com"
   />
</DockPanel>

  4. Wählen Sie Datei>Alle speichern aus, um das Projekt zu speichern.

  5. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  6. Stellen Sie sicher, dass ihr WebView2-Steuerelement anzeigt https://www.microsoft.com:

    Das WebView2-Steuerelement, das Webseiteninhalte aus microsoft.com

Schritt 7: Navigation

Ermöglichen Sie Es Benutzern, die URL zu ändern, die vom WebView2-Steuerelement angezeigt wird, indem Sie der App eine Adressleiste hinzufügen.

  1. Fügen Sie in der MainWindow.xaml Datei eine Adressleiste hinzu, indem Sie den folgenden Code kopieren und in die einfügen, die <DockPanel> das WebView2-Steuerelement enthält. Behalten Sie den vorhandenen Code unter dem neuen Codeausschnitt bei.

    <DockPanel DockPanel.Dock="Top">
    <Button x:Name="ButtonGo"
              DockPanel.Dock="Right"
              Click="ButtonGo_Click"
              Content="Go"
    />
    <TextBox Name="addressBar"/>
</DockPanel>

  2. Stellen Sie sicher, dass der <DockPanel> Abschnitt der MainWindow.xaml Datei dem folgenden Code entspricht:

    <DockPanel>
    <DockPanel DockPanel.Dock="Top">
        <Button x:Name="ButtonGo" DockPanel.Dock="Right" Click="ButtonGo_Click" Content="Go"/>
        <TextBox Name = "addressBar"/>
    </DockPanel>
    <wv2:WebView2 Name = "webView"
                  Source = "https://www.microsoft.com"
    />
</DockPanel>

  3. MainWindow.xaml.csFügen Sie in den folgenden Code am Anfang der Datei ein, um den Namespace hinzuzufügenCoreWebView2:

    using Microsoft.Web.WebView2.Core;

  4. Kopieren Sie in der MainWindow.xaml.csDatei den folgenden Code, um die ButtonGo_Click -Methode zu erstellen. Dieser Code navigiert das WebView2-Steuerelement zu der url, die in der Adressleiste eingegeben wurde.

    private void ButtonGo_Click(object sender, RoutedEventArgs e)
{
    if (webView != null && webView.CoreWebView2 != null)
    {
        webView.CoreWebView2.Navigate(addressBar.Text);
    }
}

  5. Fügen Sie den Code direkt nach der Public MainWIndow Deklaration ein, wie im folgenden Code gezeigt:

    namespace WpfApp1
{
   /// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class MainWindow : Window
   {
      public MainWindow()
      {
            InitializeComponent();
      }
      void ButtonGo_Click(object sender, RoutedEventArgs e)
      {
            if (webView != null && webView.CoreWebView2 != null)
            {
               webView.CoreWebView2.Navigate(addressBar.Text);
            }
      }
   }
}

  6. Wählen Sie Datei>Alle speichern aus, um das Projekt zu speichern.

  7. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  8. Geben Sie in der Adressleiste eine neue URL ein, und wählen Sie Los aus. Geben Sie beispielsweise ein https://www.bing.com.

  9. Stellen Sie sicher, dass das WebView2-Steuerelement die url öffnet, die Sie eingegeben haben.

    Stellen Sie sicher, dass Sie eine vollständige URL in die Adressleiste eingeben. Die App generiert eine ArgumentException , wenn die URL nicht mit http:// oder https://beginnt.

    Die Beispiel-App zeigt die Bing-Website mit der URL https://www.bing.com in der Adressleiste an:

    Die App zeigt die Bing-Website an.

Schritt 8: Navigationsereignisse

Während der Webseitennavigation löst das WebView2-Steuerelement Ereignisse aus. Die App, die WebView2-Steuerelemente hostet, lauscht auf die folgenden Ereignisse:

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

Navigationsereignisse, vom neuen Dokument bis zum Start der Navigation bis zur abgeschlossenen Navigation

Das obige Diagramm zeigt die Ereignissequenz. Navigationsereignisse beginnen mit einem neuen Dokument.

Erfolgspfad

Ein erfolgreicher Pfad enthält die vollständige Abfolge von Ereignissen:

  1. Navigation wird gestartet.
  2. Quelle geändert, mit möglicher Eingabe aus demselben Dokument.
  3. Inhalt wird geladen.
  4. Verlaufsänderungen.
  5. Navigation abgeschlossen.

Weitere Informationen finden Sie unter Navigationsereignisse für WebView2-Apps.

Fehlerpfad

Wenn ein Fehler auftritt, wird der Fehlerpfad direkt von der Navigation gestartet bis zur abgeschlossenen Navigation fortgesetzt, wobei die dazwischen liegenden Ereignisse übersprungen werden.

Wenn ein Fehler auftritt, werden die folgenden Ereignisse ausgelöst und können von der Navigation zu einer Fehlerwebseite abhängen:

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Umleitung

Wenn eine HTTP-Umleitung auftritt, gibt es mehrere NavigationStarting Ereignisse in einer Zeile.

Beispiel zur Veranschaulichung von Navigationsereignissen

Um die Verwendung der Ereignisse zu veranschaulichen, registrieren Sie einen Handler für NavigationStarting , der alle Nicht-HTTPS-Anforderungen wie folgt abbricht.

  1. Ändern Sie in der MainWindow.xaml.cs Datei den Konstruktor so, dass er dem oberen Teil des folgenden Codes entspricht. Fügen Sie unterhalb des Konstruktors die EnsureHttps Funktion hinzu:

    public MainWindow()
{
    InitializeComponent();
    webView.NavigationStarting += EnsureHttps;
}

void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        args.Cancel = true;
    }
}

    Im Konstruktor EnsureHttps ist als Ereignishandler für das NavigationStarting Ereignis im WebView2-Steuerelement registriert.

  2. Wählen Sie Datei>Alle speichern aus, um das Projekt zu speichern.

  3. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  4. Versuchen Sie, eine HTTP-Website zu öffnen. Stellen Sie sicher, dass das WebView2-Steuerelement unverändert bleibt.

  5. Versuchen Sie, eine HTTPS-Website zu öffnen. Mit dem WebView2-Steuerelement können Sie HTTPS-Websites öffnen.

Schritt 9: Skripterstellung

Sie können Host-Apps verwenden, um JavaScript-Code zur Laufzeit in WebView2-Steuerelemente einzufügen. Mit WebView2 können Sie beliebiges JavaScript ausführen oder Initialisierungsskripts hinzufügen. Das eingefügte JavaScript gilt für alle neuen Dokumente der obersten Ebene und alle untergeordneten Frames, bis das JavaScript entfernt wird.

Das eingefügte JavaScript wird mit einem bestimmten Zeitpunkt ausgeführt:

  • Führen Sie ihn nach der Erstellung des globalen Objekts aus.
  • Führen Sie es aus, bevor ein anderes im HTML-Dokument enthaltenes Skript ausgeführt wird.

Fügen Sie beispielsweise Skripts hinzu, die eine Warnung senden, wenn ein Benutzer zu Nicht-HTTPS-Websites navigiert, wie folgt:

  1. Ändern Sie die EnsureHttps -Funktion, um ein Skript in den Webinhalt einzufügen, der die ExecuteScriptAsync-Methode verwendet.

    void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
   String uri = args.Uri;
   if (!uri.StartsWith("https://"))
   {
      webView.CoreWebView2.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
      args.Cancel = true;
   }
}

  2. Wählen Sie Datei>Alle speichern aus, um das Projekt zu speichern.

  3. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  4. Stellen Sie sicher, dass die App eine Warnung anzeigt, wenn Sie zu einer Website navigieren, die kein HTTPS verwendet.

    Meldung, die zeigt, dass eine HTTP-URL nicht sicher ist, und empfiehlt, stattdessen eine https: URL zu versuchen

Schritt 10: Kommunikation zwischen Host- und Webinhalten

Host- und Webinhalte können mithilfe von postMessageauf folgende Weise kommunizieren:

  • Webinhalte in einem WebView2-Steuerelement können mithilfe window.chrome.webview.postMessagevon eine Nachricht an den Host senden. Der Host verarbeitet die Nachricht mit allen auf dem Host registrierten WebMessageReceived Nachrichten.

  • Hostet Postnachrichten für Webinhalte in einem WebView2-Steuerelement mithilfe von CoreWebView2.PostWebMessageAsString oder CoreWebView2.PostWebMessageAsJSON. Die Nachrichten werden von Handlern abgefangen, die zu window.chrome.webview.addEventListenerhinzugefügt wurden.

Der Kommunikationsmechanismus übergibt Nachrichten von Webinhalten mithilfe nativer Funktionen an den Host.

Wenn das WebView2-Steuerelement in Ihrem Projekt zu einer URL navigiert, zeigt es die URL in der Adressleiste an und benachrichtigt den Benutzer über die url, die im WebView2-Steuerelement angezeigt wird.

  1. Aktualisieren Sie in MainWindow.xaml.csIhren Konstruktor, und erstellen Sie eine InitializeAsync Funktion, die dem folgenden Code entspricht. Die InitializeAsync Funktion wartet auf EnsureCoreWebView2Async, da die Initialisierung von CoreWebView2 asynchron ist.

    public MainWindow()
{
   InitializeComponent();
   webView.NavigationStarting += EnsureHttps;
   InitializeAsync();
}

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
}

  2. Registrieren Sie nach der Initialisierung von CoreWebView2 einen Ereignishandler, um auf zu WebMessageReceivedreagieren. Aktualisieren MainWindow.xaml.csInitializeAsync Sie in , und fügen Sie es mithilfe des folgenden Codes hinzuUpdateAddressBar:

    async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;
}

void UpdateAddressBar(object sender, CoreWebView2WebMessageReceivedEventArgs args)
{
   String uri = args.TryGetWebMessageAsString();
   addressBar.Text = uri;
   webView.CoreWebView2.PostWebMessageAsString(uri);
}

  3. Damit das WebView2-Steuerelement die Webnachricht senden und darauf reagieren kann, führt der Host nach CoreWebView2 der Initialisierung folgendes aus:

    1. Fügt ein Skript in den Webinhalt ein, das einen Handler zum Drucken von Nachrichten vom Host registriert.
    2. Fügt ein Skript in den Webinhalt ein, das die URL an den Host sendet.

  4. Aktualisieren Sie MainWindow.xaml.csInitializeAsync in so, dass sie mit dem folgenden Code übereinstimmt:

    async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;

   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.postMessage(window.document.URL);");
   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener(\'message\', event => alert(event.data));");
}

  5. Wählen Sie Datei>Alle speichern aus, um das Projekt zu speichern.

  6. Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.

  7. Wenn Sie einen neuen URI öffnen, zeigt das WebView2-Steuerelement den URI in der Adressleiste an.

    Die Beispiel-App zeigt den URI in der Adressleiste und auf der Microsoft-Website an: https://www.microsoft.com

    Die Beispiel-App zeigt den URI in der Adressleiste und auf der Microsoft-Website an.

Herzlichen Glückwunsch, Sie haben Ihre erste WebView2-App erstellt!

Siehe auch

developer.microsoft.com:

Lokale Seiten:

Github: