Erste Schritte mit WebView2 in WPF (Preview)

In diesem Artikel erfahren Sie, wie Sie Ihre erste WebView2-app erstellen und die wichtigsten Features von WebView2 (Preview)kennenlernen. Weitere Informationen zu einzelnen APIs finden Sie unter API-Referenz.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgende Liste der Voraussetzungen installiert haben, bevor Sie fortfahren:

Schritt 1 – Erstellen einer einzelnen Fenster Anwendung

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

  1. Öffnen Sie Visual Studio.

  2. Wählen Sie WPF .net Core-App oder WPF .NET Framework-Appaus, und wählen Sie dann weiteraus.

    WPF-Kern

    WPF-Kern :::image-end:::

    WPF-Kern

    WPF-Framework :::image-end:::

  3. Geben Sie Werte für Projektname und Speicherortein. Wählen Sie .NET Framework 4.6.2 oder höher oder .net Core 3,0 oder höher aus.

    WPF-Kern

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

    WPF-Kern

    Erstellen eines Frameworks :::image-end:::

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

Schritt 2 – Installieren des WebView2 SDK

Fügen Sie als nächstes das WebView2-SDK zum Projekt hinzu. Installieren Sie für die Vorschau das WebView2-SDK mithilfe von Nuget.

  1. Öffnen Sie das Kontextmenü im Projekt \ (Klicken Sie mit der rechten Maustaste auf ), und wählen Sie NuGet-Pakete verwaltenaus.

    WPF-Kern

    Nuget

  2. Geben Sie Microsoft.Web.WebView2 in die Suchleiste ein. Wählen Sie in den Suchergebnissen Microsoft. Web. WebView2 aus.

    Wichtig

    Stellen Sie sicher, dass Sie die Vorabversion einbeziehen, wählen Sie ein Vorabversion-Paket in Versionaus, und wählen Sie dann Installierenaus.

    nuget

    Sie können mit der WebView2-API beginnen, Anwendungen zu entwickeln. Wählen Sie aus F5 , um das Projekt zu erstellen und auszuführen. Im laufenden Projekt wird ein leeres Fenster angezeigt.

Fügen Sie Ihrer Anwendung als nächstes eine WebView hinzu.

  1. Öffnen Sie MainWindow.xaml. Fügen Sie den WebView2-XAML-Namespace hinzu, indem Sie die folgende Zeile innerhalb der <Window/> Kategorie einfügen.

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

    Vergewissern Sie sich, dass der Code in MainWindow.xaml wie im folgenden 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. Fügen Sie das WebView2-Steuerelement hinzu, indem Sie die <Grid> Tags mit dem folgenden Codeausschnitt ersetzen. 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. Drücken Sie F5 , um das Projekt zu erstellen und auszuführen. Vergewissern Sie sich, dass Ihr WebView2-Steuerelement angezeigt wird https://www.microsoft.com .

    WPF-Kern eine Adressleiste hinzu, indem Sie den folgenden Codeausschnitt innerhalb der DockPanel-Datei, die die WebView enthält, kopieren und einfügen.

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

    Vergewissern Sie sich, dass der DockPanel Abschnitt MainWindow.xaml wie im folgenden Codeausschnitt aussieht.

    <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>
    

  4. MainWindow.xaml.csIn Visual Studio öffnen. Fügen Sie den CoreWebView2 Namespace hinzu, indem Sie am oberen Rand des folgenden Codeausschnitts einfügen MainWindow.xaml.cs .

    using Microsoft.Web.WebView2.Core;
    
  5. Kopieren Sie in MainWindow.XAML.csden folgenden Codeausschnitt, um die ButtonGo_Click Methode zu erstellen, die die WebView zu der in der Adressleiste eingegebenen URL navigiert.

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

    Drücken Sie F5 , um das Projekt zu erstellen und auszuführen. Geben Sie in der Adressleiste eine neue URL ein, und wählen Sie dann gehezu aus. Geben Sie beispielsweise ein https://www.bing.com . Überprüfen Sie, ob das WebView2-Steuerelement zur URL navigiert.

    Hinweis

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

    WPF-Kern

    Bing

Schritt 5 – Navigationsereignisse

Die Anwendung, die WebView2-Steuerelemente hostet, überwacht die folgenden Ereignisse, die vom WebView2-Steuerelement während der Navigation zu Webseiten ausgelöst werden.

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

Weitere Informationen finden Sie unter Navigationsereignisse.

WPF-Kern

Navigationsereignisse

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

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Wenn eine HTTP-Umleitung vorhanden ist, gibt es mehrere NavigationStarting Ereignisse.

Um zu veranschaulichen, wie diese Ereignisse verwendet werden, müssen Sie zunächst einen Handler registrieren, der NavigationStarting alle Anforderungen abbricht, die nicht HTTPS verwenden.

MainWindow.xaml.csÄndern Sie in den Konstruktor wie unten dargestellt, und fügen Sie 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 wird EnsureHttps als Ereignishandler für das NavigationStarting Ereignis im WebView2-Steuerelement registriert.

Drücken Sie F5 , um das Projekt zu erstellen und auszuführen. Vergewissern Sie sich, dass die WebView-Ansicht beim Navigieren zu einer HTTP-Website unverändert bleibt. Die WebView navigiert jedoch zu HTTPS-Websites.

Schritt 6 – Skripting

Sie können Host-Anwendungen verwenden, um JavaScript-Code zur Laufzeit in WebView2-Steuerelemente einzufügen. Das eingefügte JavaScript gilt für alle neuen Dokumente auf oberster Ebene und für alle untergeordneten Frames, bis das JavaScript entfernt wurde. Das eingefügte JavaScript wird nach der Erstellung des globalen Objekts und vor dem Ausführen eines anderen im HTML-Dokument enthaltenen Skripts ausgeführt.

Sie können Skripting verwenden, um den Benutzer zu benachrichtigen, wenn Sie zu einer nicht-HTTPS-Website navigieren. Ändern EnsureHttps Sie die Funktion so, dass Sie mit der ExecuteScriptAsync -Methode Skripts in den Webinhalt einfügt.

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

Drücken Sie F5 , um das Projekt zu erstellen und auszuführen. Vergewissern Sie sich, dass die Anwendung eine Warnung anzeigt, wenn Sie zu einer Website navigieren, die nicht HTTPS verwendet.

WPF-Kern

HTTPS

Schritt 7 – Kommunikation zwischen Host-und Webinhalten

Die Host-und Webinhalte können mithilfe der folgenden Informationen miteinander kommunizieren postMessage :

  • Webinhalte in einem WebView2-Steuerelement senden möglicherweise eine Nachricht mithilfe von an den Host window.chrome.webview.postMessage . Der Host verarbeitet die Nachricht mit einem WebMessageReceived auf dem Host registrierten Namen.
  • Hosts Posten Nachrichten an Webinhalte in einem WebView2-Steuerelement mit CoreWebView2.PostWebMessageAsString oder CoreWebView2.PostWebMessageAsJSON . Diese Nachrichten werden von Handlern abgefangen, denen Sie hinzugefügt wurden window.chrome.webview.addEventListener .

Mit diesem Kommunikationsmechanismus können Webinhalte Nachrichten mithilfe von systemeigenen Funktionen an den Host weiterleiten.

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

  1. Aktualisieren Sie in MainWindow.XAML.csden Konstruktor, und erstellen Sie eine InitializeAsync Funktion, wie im folgenden Codeausschnitt dargestellt. Die InitializeAsync Funktion wartet EnsureCoreWebView2Async auf, da die Initialisierung von CoreWebView2 asynchron ist.

    public MainWindow()
    {
        InitializeComponent();
        webView.NavigationStarting += EnsureHttps;
        InitializeAsync();
    }
    
    async void InitializeAsync()
    {
        await webView.EnsureCoreWebView2Async(null);
    }
    
  2. Nachdem CoreWebView2 initialisiert wurde, registrieren Sie einen Ereignishandler, auf den Sie Antworten können WebMessageReceived . In MainWindow.XAML.cs Update InitializeAsync und Add UpdateAddressBar mit dem folgenden Codeausschnitt.

    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 die WebView die Webnachricht senden und beantworten kann, CoreWebView2 wird nach der Initialisierung der Host:

    1. Fügt dem Webinhalt ein Skript ein, das einen Handler registriert, um eine Nachricht vom Host zu drucken.
    2. Fügt dem Webinhalt ein Skript hinzu, das die URL an den Host sendet.

    In MainWindow.xaml.cs , aktualisieren Sie InitializeAsync wie folgt:

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

    Drücken Sie F5 , um die APP zu erstellen und auszuführen. Die Adressleiste zeigt nun den URI in der WebView an, und wenn Sie erfolgreich zu einem neuen URI navigieren, benachrichtigt die WebView den Benutzer des in der WebView angezeigten URIs.

    WPF-Kern

    addressBar

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

Nächste Schritte

Kontakt mit dem Microsoft Edge WebView-Team

Geben Sie Ihr Feedback weiter, um umfassendere WebView2-Erlebnisse zu schaffen. Informationen zum Übermitteln von Funktionsanforderungen oder Fehlern oder suchen nach bekannten Problemen finden Sie im Feedback-Repo von Microsoft Edge WebView .