Erste Schritte mit WebView2 in WinUI 2-Apps (öffentliche Vorschau)

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 WebView2-APIs finden Sie unter Microsoft Edge WebView2-API-Referenz, und wählen Sie dann die WinRT-Referenzlinks aus.

Hinweis

Das WinUI 2-Paket verwendet eine Abhängigkeit von einem WebView2-Paket vor der Veröffentlichung. Um die vollständige API-Kompatibilität sicherzustellen, verwenden Sie einen Vorschaubrowserkanal als Laufzeit (d. b. den Beta-, Dev- oder Canary-Kanal von Microsoft Edge).

Schritt 1: Installieren Visual Studio

  1. Installieren Sie Visual Studio Version 16.9 oder höher. Sie können die Standardwerte akzeptieren.

  2. Standardmäßig werden Visual Studio keine Zeilennummern im Code-Editor angezeigt. Um Zeilennummern zu **** aktivieren, wählen Sie > Extras Optionen > Text EditorAlle > Sprachen > Zeilennummern. Wählen Sie dann OKaus.

Schritt 2: Installieren von Workloads

  1. Wählen Sie in Visual Studio tools > Get Tools and Featuresaus. Das Visual Studio-Installer Fenster wird geöffnet.

  2. Wählen Sie auf der Registerkarte "Workloads" die Option .NET Desktop Developmentaus.

  3. Wählen Sie die Desktopentwicklung mit C++ aus.

  4. Wählen Sie "Universelle Windows Plattformentwicklung" aus.

  5. Erweitern Sie auf der rechten Seite "Installationsdetails > universal Windows Plattformentwicklung", und wählen Sie dann C++ (v142) Universal Windows Platform-Toolsaus.

    Auswählen von Workloads, die für Visual Studio installiert werden sollen

  6. Wählen Sie die Schaltfläche "Ändern" aus. Visual Studio installiert die ausgewählten Features.

Schritt 3: Erstellen einer UWP-App

  1. Wählen Sie in Visual Studio **** > dateineue > Projectaus. Oder verwenden Sie den Startbildschirm von Visual Studio, und wählen Sie dann ein neues Projekt erstellenaus. Das Dialogfeld "Neues Projekt erstellen" wird angezeigt.

  2. Wählen Sie in der Dropdownliste "Alle Sprachen" die Option C# aus.

  3. Wählen Sie in der Dropdownliste "Alle Plattformen" Windowsaus.

  4. Wählen Sie in der Dropdownliste "Alle Projekttypen" UWPaus. Aufgrund der Filterauswahl werden mehrere Arten von App-Vorlagen aufgelistet.

  5. Wählen Sie in der Liste der App-Vorlagen Leere App (Universelle Windows) aus.

    Dialogfeld "Neues Projekt erstellen"

  6. Wählen Sie die Schaltfläche "Weiter" aus. Die Seite "Neues Projekt konfigurieren" des Dialogfelds wird für eine leere App (Universelle Windows) angezeigt.

  7. Geben Sie im Textfeld Project Namen einen Projektnamen ein, UWPSampleProject z. B. .

    Das Dialogfeld "Neues Projekt konfigurieren" für eine leere App (Universelle Windows)'

  8. Wählen Sie die Schaltfläche "Erstellen" aus. Das Dialogfeld "Neue universelle Windows Plattform Project" wird angezeigt.

  9. Klicken Sie auf die Schaltfläche "OK". Das Einstellungen Fenster wird möglicherweise geöffnet, wenn Sie die folgenden Schritte noch nicht ausgeführt haben.

  10. Wählen Sie im Abschnitt "Entwicklermodus" die Option "Ein" aus. Das Dialogfeld "Entwicklerfeatures verwenden" wird geöffnet, um die Aktivierung des Entwicklermodus zu bestätigen.

  11. Wählen Sie die Schaltfläche "Ja" aus, und schließen Sie dann das Einstellungen Fenster.

Die Lösung und das Projekt werden angezeigt.

Das resultierende Projekt

Schritt 4: Installieren des WinUI 2-NuGet-Pakets

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie dann NuGet Pakete verwalten aus.

  2. Wählen Sie die Registerkarte "Durchsuchen" aus.

  3. Aktivieren Sie das Kontrollkästchen "Vorabrelease einschließen".

  4. Geben Sie in das Suchfeld Microsoft.UI.Xaml ein, und wählen Sie dann Microsoft.UI.Xamlaus. Stellen Sie sicher, dass es sich bei der Version um die neueste Vorabversion handelt, und wählen Sie dann "Installieren" aus.

    Der NuGet-Paket-Manager

    Das Dialogfeld "Vorschauänderungen" wird angezeigt. Klicken Sie auf die Schaltfläche "OK". Beachten Sie, dass die WebView2 SDK-Abhängigkeit sowie WinUI 2 installiert werden.

  1. Das Dialogfeld "Lizenzakzeptanz" wird angezeigt. Wählen Sie die Schaltfläche "Ich stimme zu". Die readme.txt wird angezeigt.

Schritt 5: Instanziieren des WebView2-Steuerelements im XAML-Code

Hinzufügen des Projektverweises für das WebView2-Steuerelement

  1. Fügen MainPage.xaml Sie in der Datei im <Page> Element das folgende Attribut unterhalb der anderen xmlns: Attribute hinzu.

    xmlns:control="using:Microsoft.UI.Xaml.Controls"
    

Hinzufügen des WebView2-Steuerelements zum Raster

  1. Fügen Sie in der MainPage.xaml Datei im Element das folgende Element <Grid> hinzu:

    <control:WebView2 x:Name="wv2" Source="https://bing.com"/>
    
  2. Speichern Sie die Datei. Oberhalb der MainPage.xaml Datei im Code-Editor wird eine Vorschau des WebView2-Inhalts angezeigt.

    Vorschau des WebView2-Inhalts

Erstellen und Testen des WebView2-Projekts

  1. Wählen Sie im Menü "Debuggen" die Option "Debuggen starten" aus. Das App-Fenster wird geöffnet und zeigt kurz das WebView2-WebUI-Raster an.

    Das Raster wird während des Debuggens kurzzeitig angezeigt.

  2. Nach einem kurzen Moment wird im App-Fenster die Website Bing.com im WebView2-Steuerelement für WebUI 2 angezeigt.

    Ein App-Fenster, in dem die Website Bing.com im WebView2-Steuerelement angezeigt wird

  3. Wählen Sie in Visual Studio im Menü "Debuggen" die Option "Debuggen beenden" aus. Das App-Fenster wird geschlossen.

Jetzt können Sie den Inhalt des WebView2-Steuerelements so ändern, dass Ihre eigenen Inhalte hinzugefügt werden.

Weitere Informationen