Erste Schritte mit WebView2 in WPF

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 Runtime oder Microsoft Edge (Chromium) nicht stabile Kanal, der auf dem unterstützten Betriebssystem (derzeit Windows 10, Windows 8.1 und Windows 7\ installiert ist).
  • Visual Studio 2017 oder höher.

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 WPF .NET Core App (oder WPF .NET Framework App) > Weiter aus.

    WPF Core

    WPF Core :::image-end:::

    WPF Framework

    WPF Framework :::image-end:::

  2. Geben Sie Werte für Project und Location ein. Wählen .NET Framework 4.6.2 oder höher (oder .NET Core 3.0 oder höher) aus.

    Erstellen eines Kerns

    Erstellen eines Kerns :::image-end:::

    Create Framework

    Create Framework :::image-end:::

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

Schritt 2 : Installieren des WebView2 SDK

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

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

    NuGet-Pakete verwalten

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

    NuGet

    Bereit zum Entwickeln 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 als Nächstes Ihrer App eine WebView hinzu.

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

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

    Stellen Sie sicher, dass der Code in MainWindow.xaml wie der folgende Codeausschnitt 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>
    
  2. Zum Hinzufügen des WebView2-Steuerelements ersetzen Sie die <Grid> Tags durch den folgenden Codeausschnitt. 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>
    
  3. Zum Erstellen und Ausführen des Projekts wählen Sie F5 Sicherstellen, dass Ihr WebView2-Steuerelement angezeigt [https://www.microsoft.com][|::ref1::|Main] wird.

    Microsoft.com

    Microsoft.com

Schritt 4 – 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. Fügen Sie in der Datei eine Adressleiste hinzu, indem Sie den folgenden Codeausschnitt in den Codeausschnitt kopieren und einfügen, der MainWindow.xaml <DockPanel> die WebView enthält.

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

    Stellen Sie <DockPanel> sicher, dass der Abschnitt MainWindow.xaml der Datei mit dem folgenden Codeausschnitt 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>
    
  2. Fügen Visual Studio in der Datei den folgenden Codeausschnitt oben ein, um den MainWindow.xaml.cs CoreWebView2 Namespace hinzuzufügen.

    using Microsoft.Web.WebView2.Core;
    
  3. Kopieren Sie in der Datei den folgenden Codeausschnitt, um die Methode zu erstellen, die im WebView zu der URL navigiert, die in der MainWindow.xaml.cs ButtonGo_Click Adressleiste eingegeben wurde.

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

    Wählen Sie aus, um das Projekt zu erstellen und F5 ausführen. Geben Sie in der Adressleiste eine neue URL ein, und wählen Sie Losaus. Geben Sie beispielsweise 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:// beginnt.

    Bing

    bing.com

Schritt 5 – 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 einen Handler, NavigationStarting der alle Nicht-HTTPS-Anforderungen abbricht.

Ändern Sie MainWindow.xaml.cs in der Datei den Konstruktor, um dem folgenden Codeausschnitt zu entsprechen, und fügen Sie die Funktion EnsureHttps hinzu.

public MainWindow()
{
    InitializeComponent();
    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 das 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 6 – 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 das 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

HTTPS

Schritt 7 – Kommunikation zwischen Host- und Webinhalten

Host- und Webinhalte können auf folgende Weise mithilfe von postMessage kommunizieren.

  • Webinhalte in einem WebView2-Steuerelement können eine Nachricht mithilfe von an den Host window.chrome.webview.postMessage senden. 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 . Die 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 MainWindow.xaml.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 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 WebMessageReceived reagieren. Aktualisieren MainWindow.xaml.cs und hinzufügen Sie in mithilfe des folgenden InitializeAsync 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 auf sie antwortet, wird der Host nach der CoreWebView2 Initialisierung:

    1. Injects a script to the web content that registers a handler to print message from the host.
    2. Injects a script to the web content that posts the URL to the host.

    Aktualisieren Sie MainWindow.xaml.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 erfolgreich zu einem neuen URI navigieren, benachrichtigt das WebView2-Steuerelement den Benutzer über den URI, der im WebView2-Steuerelement angezeigt wird.

    addressBar

    addressBar

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.

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.