Erste Schritte mit WebView2 in Windows Forms

Beginnen Sie in diesem Artikel mit dem Erstellen Ihrer ersten WebView2-App, und erfahren Sie mehr über die Hauptfeatures von WebView2. Weitere Informationen zu einzelnen APIs finden Sie unter API reference.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgende Liste der Voraussetzungen installieren, bevor Sie fortfahren.

  • WebView2-Laufzeit oder ein nicht stabiler Microsoft Edge (Chromium)-Kanal, der unter unterstützten Betriebssystemen installiert ist (derzeit Windows 10, Windows 8.1 und Windows 7).

    Hinweis

    Das WebView-Team empfiehlt die Verwendung des Canary-Kanals, und die erforderliche Mindestversion ist 82.0.488.0.

  • Visual Studio 2017 oder höher.

Hinweis

WebView2 unterstützt derzeit keine .NET 5- und .NET Core-Designer.

Schritt 1 : Erstellen einer App mit einem Fenster

Beginnen Sie mit einem einfachen Desktopprojekt, das ein einzelnes Hauptfenster enthält.

  1. Wählen Visual Studio Windows Forms .NET Framework App > Next aus.

    Neues Projekt

  2. Geben Sie Werte für Projektname und Standort ein. Wählen .NET Framework 4.6.2 oder höher aus.

    Projekt starten

  3. Wählen Sie Erstellen aus, um Ihr Projekt zu erstellen.

Schritt 2 : Installieren des WebView2 SDK

Verwenden Sie NuGet, um das WebView2 SDK zum Projekt hinzuzufügen.

  1. Zeigen Sie auf das Projekt, öffnen Sie das Kontextmenü (klicken Sie mit der rechten Maustaste), und wählen Sie NuGet-Pakete verwalten... aus.

    Verwalten von NuGet-Paketen

    Verwalten von NuGet-Paketen

  2. Geben Sie in der Suchleiste Microsoft.Web.WebView2 > Wählen Sie Microsoft.Web.WebView2 aus.

    NuGet

    Beginnen Sie mit der Entwicklung von Apps mithilfe der WebView2-API. Wählen Sie aus, um das Projekt zu erstellen und F5 ausführen. Das ausgeführte Projekt zeigt ein leeres Fenster an.

    Leere App

Schritt 3 : Erstellen einer einzelnen WebView

Fügen Sie Ihrer App eine WebView hinzu.

  1. Öffnen Sie den Windows Forms Designer.

  2. Suchen Sie in der Toolboxnach WebView2.

    Hinweis

    Wenn Sie Visual Studio 2017 verwenden, wird WebView2 standardmäßig nicht in der Toolbox angezeigt. Um das Verhalten zu aktivieren, wählen Sie Tools > Options > General > legen Sie die Einstellung Toolbox automatisch auf auf . True

    Ziehen Sie das WebView2-Steuerelement in die Windows Forms App, und legen Sie es ab.

    Toolbox mit WebView2

    Toolbox mit WebView2

  3. Legen Sie die (Name)-Eigenschaft auf webView fest.

    Eigenschaften des WebView2-Steuerelements

    Eigenschaften des WebView2-Steuerelements

  4. Die Source Eigenschaft legt den anfänglichen URI fest, der im WebView2-Steuerelement angezeigt wird. Legen Sie die Source-Eigenschaft auf https://www.microsoft.com fest.

    Die Source-Eigenschaft des WebView2-Steuerelements

    Die Source-Eigenschaft des WebView2-Steuerelements

Wählen Sie aus, um Ihr Projekt zu erstellen und F5 ausführen. Stellen Sie sicher, dass Ihr WebView2-Steuerelement angezeigt [https://www.microsoft.com][|::ref1::|Main] wird.

hello webview

Hinweis

Wenn Sie an einem Monitor mit hohem DPI arbeiten, müssen Sie Ihre Windows Forms-Appmöglicherweise für die Unterstützung mit hohem DPI konfigurieren.

Schritt 4 – Behandeln von Ereignissen für die Fenstergröße

Fügen Sie ihren Windows Forms aus der Toolbox ein paar weitere Steuerelemente hinzu, und behandeln Sie die Ereignisse für die Fenstergröße entsprechend.

  1. Öffnen Sie im Windows Forms Designerdie Toolbox.

  2. Ziehen und ablegen Sie ein TextBox-Objekt in die Windows Forms App. Benennen Sie das TextBox-Postfach addressBar auf der Registerkarte Eigenschaften.

  3. Ziehen und Ablegen einer Schaltfläche in die Windows Forms App. Ändern Sie den Text in der Schaltfläche in und nennen Sie Go! die Schaltfläche auf der goButton Registerkarte Eigenschaften.

    Die App sollte wie das folgende Bild im Designer aussehen.

    WinForms-Designer

  4. Definieren Sie in der Datei, dass die Steuerelemente bei der Größenänderung des Form1.cs Form_Resize App-Fensters an Ort und Stelle bleiben.

public Form1()
{
    InitializeComponent();
    this.Resize += new System.EventHandler(this.Form_Resize);
}

private void Form_Resize(object sender, EventArgs e)
{
    webView.Size = this.ClientSize - new System.Drawing.Size(webView.Location);
    goButton.Left = this.ClientSize.Width - goButton.Width;
    addressBar.Width = goButton.Left - addressBar.Left;
}

Wählen Sie aus, um Ihr Projekt zu erstellen und F5 ausführen. Stellen Sie sicher, dass die App ähnlich dem folgenden Screenshot angezeigt wird.

App

Schritt 5 – Navigation

Fügen Sie die Möglichkeit hinzu, Benutzern das Ändern der URL zu ermöglichen, die das WebView2-Steuerelement anzeigt, indem Sie der App eine Adressleiste hinzufügen.

  1. Wählen F5 Sie aus, um Ihr Projekt zu erstellen und ausführen. Vergewissern Sie sich, dass die App ähnlich dem folgenden Screenshot angezeigt wird.

    WinForms App

  2. Fügen Sie in der Datei den folgenden Codeausschnitt oben ein, um den Form1.cs CoreWebView2 Namespace hinzuzufügen.

  3. Fügen Form1.cs Sie den CoreWebView2 Namespace hinzu, indem Sie den folgenden Codeausschnitt oben in Form1.cs einfügen.

    using Microsoft.Web.WebView2.Core;
    
  4. Doppelklicken Sie im Windows Forms Designerauf die Go! Schaltfläche, um die Methode in der Datei goButton_Click zu Form1.cs erstellen. Kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn in die Funktion ein. Nun navigiert goButton_Click die Funktion in der WebView zu der URL, die in der Adressleiste eingegeben wurde.

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

Wählen Sie aus, um Ihr Projekt zu erstellen und F5 ausführen. Geben Sie in der Adressleiste eine neue URL ein, und wählen Sie Losaus. Geben Sie z. B. https://www.bing.com ein. Stellen Sie sicher, dass das WebView2-Steuerelement zur URL navigiert.

Hinweis

Stellen Sie sicher, dass eine vollständige URL in der Adressleiste eingegeben wird. Ein ArgumentException wird ausgelöst, wenn die URL nicht mit oder http:// https://

bing.com

Schritt 6 – 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

Weitere Informationen finden Sie unter Navigationsereignisse.

Navigationsereignisse

Navigationsereignisse

Wenn ein Fehler auftritt, werden die folgenden Ereignisse ausgelöst und hängen möglicherweise von der Navigation zu einer Fehlerwebseite ab.

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Hinweis

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

Um die Verwendung der Ereignisse zu veranschaulichen, registrieren Sie zunächst einen Handler, der alle Anforderungen abbricht, die https NavigationStarting nicht verwenden.

Aktualisieren Sie Form1.cs in der Datei den Konstruktor, um dem folgenden Codeausschnitt zu entsprechen, und fügen Sie die Funktion EnsureHttps hinzu.

public Form1()
{
    InitializeComponent();
    this.Resize += new System.EventHandler(this.Form_Resize);

    webView.NavigationStarting += EnsureHttps;
}

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

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

Wählen Sie aus, um Ihr Projekt zu erstellen und F5 ausführen. Stellen Sie sicher, dass beim Navigieren zu einer HTTP-Website die WebView unverändert bleibt. Die WebView navigiert jedoch zu HTTPS-Websites.

Schritt 7 – Skripterstellung

Sie können Host-Apps verwenden, um Zur Laufzeit JavaScript-Code in WebView2-Steuerelemente zu injizieren. Sie können WebView zum Ausführen beliebiger JavaScript- oder Initialisierungsskripts aufgaben. Das injizierte JavaScript gilt für alle neuen Dokumente der obersten Ebene und alle untergeordneten Frames, bis das JavaScript entfernt wird. Das injizierte JavaScript wird mit einem bestimmten Timing ausgeführt.

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

Fügen Sie beispielsweise Skripts hinzu, die eine Warnung senden, wenn ein Benutzer zu Nicht-HTTPS-Websites navigiert. Ändern Sie EnsureHttps die Funktion, um ein Skript in den Webinhalt zu injizieren, 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;
    }
}

Wählen Sie aus, um Ihr Projekt zu erstellen und F5 ausführen. Stellen Sie sicher, dass die App eine Warnung anzeigt, wenn Sie zu einer Website navigieren, die https nicht verwendet.

https

Schritt 8 – Kommunikation zwischen Host- und Webinhalten

Host- und Webinhalte können für die postMessage Kommunikation miteinander wie folgt verwendet werden:

  • Webinhalte in einem WebView2-Steuerelement können verwendet werden, um eine window.chrome.webview.postMessage Nachricht an den Host zu posten. Der Host verarbeitet die Nachricht mit allen auf dem WebMessageReceived Host registrierten Nachrichten.
  • Hosts posten Nachrichten an Webinhalte in einem WebView2-Steuerelement mithilfe oder CoreWebView2.PostWebMessageAsString CoreWebView2.PostWebMessageAsJSON . Diese Nachrichten werden von Handlern erfasst, die zu hinzugefügt window.chrome.webview.addEventListener werden.

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

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

  1. Aktualisieren Sie Form1.cs in der Datei den Konstruktor, und erstellen Sie eine InitializeAsync Funktion, die mit dem folgenden Codeausschnitt übereinstimmen soll. Die InitializeAsync Funktion wartet auf EnsureCoreWebView2Async, da die Initialisierung CoreWebView2 von asynchron ist.

    public Form1()
    {
        InitializeComponent();
        this.Resize += new System.EventHandler(this.Form_Resize);
        webView.NavigationStarting += EnsureHttps;
        InitializeAsync();
    }
    
    async void InitializeAsync()
    {
        await webView.EnsureCoreWebView2Async(null);
    }
    
  2. Registrieren CoreWebView2 Sie nach der Initialisierung einen Ereignishandler, um auf zu WebMessageReceived reagieren. Aktualisieren Form1.cs und hinzufügen Sie InitializeAsync in der Datei mithilfe des folgenden UpdateAddressBar Codeausschnitts.

    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 webView die Webnachricht sendet und darauf antwortet, wird nach der Initialisierung ein Skript in den CoreWebView2 Webinhalt eingesenkt:

    1. Senden Sie die URL mithilfe von an den postMessage Host.
    2. Registrieren Sie einen Ereignishandler, um eine vom Host gesendete Nachricht zu drucken.

Aktualisieren Sie Form1.cs in der Datei InitializeAsync so, dass sie mit dem folgenden Codeausschnitt übereinstimmen.

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));");
}

Wählen Sie zum Erstellen und Ausführen der App F5 aus. Jetzt zeigt die Adressleiste den URI im WebView2-Steuerelement an. Wenn Sie außerdem erfolgreich zu einer neuen URL navigieren, benachrichtigt webView den Benutzer über die url, die in der WebView angezeigt wird.

Letzte App

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

Nächste Schritte

Navigieren Sie zu den folgenden Ressourcen, um weitere Informationen zu WebView2 zu erhalten.

  • Weitere Informationen zum Erstellen von WebView2-Anwendungen finden Sie unter Bewährte Methoden für die WebView2-Entwicklung.
  • Ein umfassendes Beispiel für WebView2-Funktionen finden Sie unter WebView2Samples.
  • Weitere Informationen zu WebView2 finden Sie unter WebView2 Resources.
  • Ausführliche Informationen zur WebView2-API finden Sie unter API-Referenz.

Kontakt mit dem Microsoft Edge WebView-Team

Teilen Sie Ihr Feedback mit, um eine reichhaltigere WebView2-Erfahrung zu erstellen. Navigieren Sie zum Microsoft Edge WebView-Feedback-Repository, um Featureanforderungen oder Fehler zu übermitteln oder nach bekannten Problemen zu suchen.