Die Chromium-Engine anbinden

Eigenständige Webbrowser gibt es viele und alle haben ihre Vor- und Nachteile. Wollen Sie in eigenen .NET-Anwendungen Webinhalte (zum Beispiel HTML/CSS) oder Dokumente (zum Beispiel PDF) anzeigen, dann greifen Sie üblicherweise auf das WebBrowser-Steuerelement zurück, das in jeweils eigenen Varianten für Windows Forms sowie die Windows Presentation Foundation (WPF) verfügbar ist. Diese Steuerelemente sind lediglich gekapselte Versionen einer ActiveX-Komponente des Internet Explorers, die weiterhin fester Bestandteil von Windows ist. Die Komponente wird aus Kompatibilitätsgründen und zur weiteren Unterstützung für Apps, die das WebBrowser-Steuerelement verwenden, auch weiterhin bereitgestellt und unterstützt. Die Weiterentwicklung und der weitere Support für den Internet Explorer wurden hingegen am 15. Juni 2022 eingestellt. Öffnen Sie Microsoft-Webseiten im Internet Explorer, werden Sie direkt auf Microsoft Edge umgeleitet, und zwar auch dann, wenn Sie bereits einen anderen Webbrowser als Standard eingerichtet haben (Bild 1).

Unschön ist dabei, dass Sie bei jedem automatisierten Edge-Wechsel zusätzlich dazu aufgefordert werden, ein Upgrade auf Microsoft Edge durchzuführen. Lehnen Sie dies mit Nein ab, dann erscheint eine zusätzliche Warnung (Bild 2). Um den Wechsel zu unterbinden, beispielsweise weil Sie bevorzugt mit Google Chrome arbeiten, dann bestätigen Sie dies mit Nein und durch Anwahl der Schaltfläche Bestätigen. Bei einer erneuten Seitenanwahl erscheinen die nervigen Meldungen und Hinweise erneut. Bleibt darauf hinzuweisen, dass die meisten aktuellen Browser intern auf die Chromium-Engine für die Verwaltung und Anzeige von Webinhalten zurückgreifen, um auch aktuelle Webinhalte (HTML5/CSS3) korrekt anzuzeigen. Dies trifft auch auf Google Chrome und Microsoft Edge zu.

Wie erwähnt, verbirgt sich hinter dem WebBrowser-Steuerelement der Internet Explorer (IE). Weisen Sie dem Steuerelement dieselbe Seitenadresse zu, die zu der zuvor beschriebenen Meldung und dem Browserwechsel führt, erhalten Sie zwar ebenfalls einen Hinweis auf den nicht mehr vorhandenen Support und die Möglichkeit zum Herunterladen des Edge-Browsers, der Seiteninhalt wird jedoch dennoch ausgegeben. Penetrante Meldungen wie in Microsoft Edge gibt es aber nicht. Dies zeigt auch das benutzerdefinierte und erweiterte Webbrowser-Steuerelement BrowserCtl, das in dieser Serie aufgebaut und nun weiterentwickelt wird.Das WebBrowser-Steuerelement legt lediglich einen einfachen Anzeigebereich offen, den Sie in Formularen platzieren. Alle internen Funktionen des Steuerelements (zum Beispiel Seitenanwahl, Seitenwechsel, Druckerausgabe, Inhalte laden und speichern) müssen Sie bei Bedarf selbst für die vereinfachte Bedienung offenlegen. Dazu nutzen Sie die zugehörigen Eigenschaften, Ereignisse und Methoden. Das benutzerdefinierte Steuerelement BrowserCtl wurde mit Menü, Symbol- und Statusleiste ausgestattet, um einen vereinfachten Zugriff auf alle Funktionen zu erhalten. Hinweise zur detaillierten Umsetzung finden Sie in [1] bis [5]. Wenn gewünscht, können Sie die benutzerdefinierte Steuerelementvariante mit weiteren Sonderfunktionen ausstatten und beispielsweise Webseitenprüffunktionen oder eine Favoritenverwaltung anbinden.

Vorarbeiten zum Chromium-Ausbau

Ziel der ersten Entwicklungsstufe war zunächst die reine Optimierung des WebBrowser-Steuerelements. Das Menü lässt sich über die Eigenschaft ShowMenue, die Statuszeile über die Eigenschaft ShowTaskBar und die Symbolleiste über die Eigenschaft ShowToolbar wahlweise ein- oder ausblenden. Die Symbolleiste beinhaltet bereits ein Kombinationslistenfeld, über das Sie Webadressen eingeben können. Zuvor eingegebene Adressen werden für die erneute Anwahl in das Kombinationslistenfeld aufgenommen. Alternativ blenden Sie mit ShowAddressBar eine weitere, eigenständige Adressleiste ein, beispielsweise dann, wenn Sie die Symbolleiste mit der integrierten Adressleiste ausblenden wollen. Im Anschluss daran wurden diverse Zusatzfunktionen implementiert, etwa die einfache Favoritenverwaltung oder das Anbinden von Prüffunktionen für Webseiten. Für den Chromium-Ausbau wurden dann zunächst neue Steuerelemente zur Verwaltung von Favoriten (FavoritesCtl) entsprechend dem Internet Explorer mitsamt einer zugehörigen Symbolleiste zum Bereitstellen der Favoritenfunktionen (FavoritesToolbarCtl) entwickelt – in Teil 5 [6] bis Teil 13 [7] dieser Serie. Die genannten­ Steuerelemente unterstützen auch den Import und die Anzeige der Lesezeichen aus Google Chrome. Im Rahmen der Anbindung der Chromium-Engine sollen diese Steuerelemente erweitert und angepasst werden. Gleiches gilt für das Benutzersteuerelement BrowserCt.

Konzept für die zweite Ausbaustufe

Bevor es um das Umsetzen und Erläutern der zweiten Ausbaustufe geht, soll zunächst deren Konzept beschrieben werden (Bild 3). Die erste Ausbaustufe setzt auf der Internet-Explorer-Engine und dem WebBrowser-Steuerelement auf, das fester Bestandteil von Visual Studio ist. Es wird in ein neues Benutzersteuerelement (UserControl) platziert, mit dem Objektnamen BrowserCtl versehen und um vordefinierte Menü-, Symbol- und Taskleisten erweitert. Damit ist das Steuerelement mit allen verborgenen Funktionen des WebBrowser-Steuerelements vollständig und komfortabel nutzbar, ohne dafür weiteren Quelltext formulieren zu müssen.

Die Umstellung auf Chromium wird mit dem Steuer­element WebView2 realisiert, das Microsoft als eigenständige Steuerelementkomponente für Windows Forms und WPF bereitstellt. WebView2 ist allerdings nicht syntaxkompatibel zum WebBrowser-Steuerelement. Auch im Verhalten gibt es erhebliche Unterschiede. Außerdem bieten beide Varianten unterschiedliche Funktionalitäten, und anders als das Web­Browser-Steuerelement wird WebView2 nicht mit Visual Studio ausgeliefert und eingerichtet. Um bei einem Wechsel auf die Chromium-Engine dennoch für einen funktional gleichwertigen Ausbau zu sorgen, werden beide Engines – Internet Explorer und Chromium – parallel angebunden. Ziel ist es, die Anzeige wahlweise mit dem WebBrowser- oder dem WebView2-Steuerelement vorzunehmen, wobei die Chromium-Variante als Standardeinstellung zum Einsatz kommen soll. Funktionen, die in einem der Steuerelemente fehlen, sollen dann jeweils über das andere Steuerelement realisiert werden, das die entsprechenden Funktionen bietet.Um die Umschaltung jederzeit komfortabel vornehmen zu können, wird im Benutzersteuerelement die neue Eigenschaft BrowserEngine2Use eingeführt. Diese legt über die Enumeration eBrowserEngine die zu verwendende Anzeige-Engine fest, also entweder EdgeChromium oder InternetExplorer. Die neuen Funktionen erfordern eine Erweiterung und Anpassung der Symbolleiste sowie der Menüleiste. Der Anzeigebereich im erweiterten BrowserCtl-Steuerelement nutzt neben dem WebBrowser- ein zusätzliches WebView2-Steuerelement, die wahlweise sichtbar geschaltet werden und beide in das zweite, rechte Panel eines SplitContainer-Steuerelements platziert werden. Das erste, linke Panel wird jeweils wahlweise angezeigt und soll neben dem Favoritensteuerelement die zugehörige Favoritensymbolleiste enthalten. Sie sollen aber nicht nur den Favoritenbereich innerhalb des Steuerelements anzeigen, sondern optional auch einen eigenständigen Dialog zur Favoritenanwahl und -verarbeitung öffnen können. In diesem Zusammenhang sind zur Laufzeit interne Verbindungen zwischen einzelnen Objekten und Steuerelementen dynamisch herzustellen und gegebenenfalls auch wieder zu lösen, doch dazu später mehr. Im Rahmen der Umsetzung und der Bereitstellung von Sonderfunktionen werden zudem weitere Dialoge (zum Beispiel zur Festlegung von PDF-Exporteinstellungen, zur Wahl der Browser-Engine) definiert und angebunden. Auch die Favoritenleiste ist an die unterschiedlichen Browser-Engines anzupassen.

Chromium-Bibliotheken und WebView2

Wie erwähnt, sind die Chromium-Bibliotheken und das WebView2-Steuerelement nicht Bestandteil von Visual Studio. Die Komponenten sind folglich separat zu installieren und für Visual Studio verfügbar zu machen. Bei bestehender Online-Verbindung richten Sie die genannten Inhalte über ein NuGet-Paket über den NuGet-Paket-Manager ein. Da sich das Steuerelement BrowserCtl in der Steuerelementbibliothek ExtendedControlsLib befindet, ist dieses Projekt das Ziel für die Anbindung. Rufen Sie dazu in Visual Studio den Menü­befehl Extras|NuGet-Paket-Manager|NuGet-Pakete für die Projektmappe verwalten ab. Geben Sie dann im oberen Textfeld des Registers Durchsuchen den Text WebView2 ein. ­Daraufhin werden die in Bild 4 gezeigten Pakete aufgelistet, die in Tabelle 1 gesondert beschrieben sind. Markieren Sie das Element Microsoft.Web.WebView2 sowie das Projekt ExtendedControlsLib und bestätigen Sie dann die Einrichtung mit Installieren. Daraufhin erscheint ein Installationsdialog, den Sie ebenfalls bestätigen.

Tabelle 1: NuGet-Pakete für WebView2

NuGet-Paketname Plattform/Anforderungen Beschreibung Diga.WebView2.Interop Diga.WebView2.Wrapper Diga.WebView2.WinForms Diga.WebView2.Wpf Diga.WebView2.Scripting .NET Standard 2.0/2.1, .NET 5.0 und 6.0, WebView2 in der Version 1.0.1108.44 Interoperatibilitätswrapper WPF und Windows Forms (siehe https://github.com/ITAgnesmeyer/Diga.WebView2) Microsoft.AspNetCore Components.WebView .NET 7.0 Vorabversion der Kernkomponenten für ASP .NET Microsoft.Web.WebView2 Win 32 C/C++, WPF, Windows Forms, .­NET Framework 4.5 und höher, .NET Core 3.1 und höher, .NET 5, .NET 6, Win­UI 2.0 (Preview) und 3.0, Windows 7 und höher, Windows Server 2008 R2 und höher Basiskomponente für die Edge-Anbindung der Chromium Engine (HTML, CSS und JavaScript), siehe https://developer.microsoft.com/de-de/microsoft-edge/webview2. Im Web finden Sie eine grundlegende Einführung (https://docs.microsoft.com/en-us/microsoft-edge/webview2), eine Übersicht (https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/overview-features-apis?tabs=dotnetcsharp) und eine Referenz (https://docs.microsoft.com/en-us/microsoft-edge/webview2/webview2-api-reference). Microsoft.Web.WebView2 DevToolsProtocolExtension C# (4.7.0 und höher, Microsoft.Web.WebView2 (Version 1.0.664.37 und höher). System.Text.Json (Version 4.7.2 und höher) APIs zum leichten Zugriff auf Chrome-Entwicklerprotokolle (Instrumentieren, Untersuchen, Debuggen und Profilieren in Chromium-basierten Browsern) MtrDev.WebView2.Interop MtrDev.WebView2.WinForms MtrDev.WebView2.Wpf MtrDev.WebView2.Scripting .NET Framework 4.5, Microsoft.Web.WebView2 (Version 0.9.430 und höher) Alternative Interoperatibilitätswrapper WPF und Windows Forms (https://github.com/michael-russin/webview2-interop) WebView2. Runtime.Installer .NET 6.0, .NET Core 3.1, .NET Framework 4.6.2 und 4.7.1 Installationspaket für die WebView2-Laufzeitbibliothek WebView2.DOM .NET Core 3.1, .NET Framework 4.6.1 und höher, .NET 6 DOM-Anbindungen für C# zur Nutzung im WebView2-Verbund (https://github.com/R2D221/WebView2.DOM). Die Lösung befindet sich derzeit noch in der Betaphase. WebView2.NativeAssets Win32 .NET Standard 2.0 und höher, .NET Framework 4.5 und höher, .NET Core 3 Dieses Paket wird für Konsolen- und Avalonia-Anwendungen benötigt. WebView2.Runtime.X64 WebView2.Runtime.X86 WebView2.Runtime.ARM64 WebView2.Runtime.Any Microsoft.Web.WebView2 (Version 1.0.1150.38 und höher) Distributionspaket für die fehlerbereinigten Versionen (64 Bit, 32 Bit, ARM 64 Bit sowie alle, siehe https://github.com/ProKn1fe/WebView2.Runtime)

Das NuGet-Paket bietet keine Dokumentation und auch keine Beispiele zur Verwendung der WebView2-Steuerelemente. Im Internet wird jedoch eine Vielzahl von Problemen im Umgang mit den Steuerelementen geschildert, die es verhindern, Seiteninhalte fehlerfrei auszugeben. Die richtige Umsetzung zeigt die Steuerelementanbindung im Webbrowser-Steuerelement BrowserCtl.Zugriff auf die Dokumentation des WebView2-Steuerelements erhalten Sie über [8]. Neben den Steuerelementen erhalten Sie eine gesonderte Bibliothek mit Kernfunktionen, die in [9] beschrieben sind. Die Steuerelemente und Informationen für die WPF sind in [10] beschrieben, diejenigen für Windows Forms in [11].Sind die NuGet-Pakete angebunden, finden Sie neue Verweise im Projektmappen-Explorer. Darüber werden die Kernfunktionen (Core), sowie die Inhalte für Windows Forms und WPF bereitgestellt (Bild 5).

In der Regel wird die WebView2-Steuerelementgruppe automatisch zur Toolbox hinzugefügt, die in Windows-Forms-Anwendungen WebView2 Windows Forms Control heißt und lediglich das Steuerelement WebView2 bereitstellt (Bild 6).

Die Bibliotheken zu WebView2 finden Sie anschließend im Unterverzeichnis Packages des gewählten Startprojektordners - hier also im Verzeichnis der Beispielanwendung und nicht im Ordner der Steuerelementbibliothek. Die Komponenten werden versionsspezifisch im Ordner Microsoft.Web.WebView2.1.0.1264.42 abgelegt. Spätere Versionen erhalten dementsprechend einen anderen Namen. In diesem Ordner gibt es weitere Unterverzeichnisse mit plattformspezifischen Varianten und Bibliotheken (zum Beispiel WinRT, ARM64) oder auch mit C++-Header­dateien (Ordner native). Die eigentlichen Bibliotheken für das .NET Framework 4.5 und höher sowie .NET Core 3.0 liegen im Unter­verzeichnis lib und die Bibliotheken für den Ausbau des benutzerdefinierten­ Steuerelements BrowserCtl im Ordner lib/net45. Darüber können Sie später Verweise auch direkt herstellen sowie die Anbindung an die Werkzeugsammlung vornehmen (Microsoft.Web.WebView2.WinForms.dll für Windows Forms und Microsoft.Web.WebView2.Wpf.dll für WPF).Bleibt abschließend festzustellen, dass es nicht wie beim WebBrowser-Steuerelement reicht, nur das Steuerelement selbst anzubinden. Für WebView2 benötigen Sie zusätzlich die gesonderte Bibliothek Microsoft.Web.WebView2.Core.dll mit den Kernfunktionen.Übersetzen Sie später ein Projekt mit angebundenem WebView2-Steuerelement, dann werden die Dateien zum Steuerelement je nach gewählter Plattform (Windows Forms oder WPF) sowie die ­Bibliothek mit den Kernfunktionen in das Programmverzeichnis übernommen.Damit die Anbindung korrekt erfolgt, sollten Sie sicher­stellen, dass auf dem verwendeten Windows-System die derzeit aktuelle Microsoft-Edge-Programmversion eingerichtet ist. Erinnern Sie sich in diesem Zusammenhang daran, dass die ersten Edge-Versionen nicht auf der Chromium-Engine aufsetzten und aus diesem Grund nicht kompatibel zu WebView2 sind.

Projektänderungen in der Übersicht

Bevor wir im kommenden Teil dieser Serie schrittweise die erforderlichen Änderungen am BrowserCtl-Steuerelement vornehmen, wird gezeigt, wo es Neuerungen und wo es Bearbeitungen innerhalb der Steuerelementbibliothek ExtendedControlsLib gibt (Bild 7). Anzupassen sind das WebBrowser-Steuerelement BrowserCtl, das Favoritensteuerelement FavoritesCtl sowie die Favoritensymbolleiste Favorites­ToolbarCtl mitsamt den untergeordneten Steuerelementen und deren Quelltext. Darüber hinaus sind drei neue Formulare zu definieren und mit Quelltext zu versehen, über die Sie die Browser-Engine jederzeit wechseln können (frmSelectBrowserEngine) und über die Sie PDF-Exporteinstellungen für angezeigte Webseiten variieren (frmPdfSettings) oder die ­Favoritenleiste in einem eigenen Dialog anzeigen lassen können (frmSystemFavoritesDialog), beispielsweise dann, wenn Sie die Favoritenanzeige im Steuerelement selbst ausgeblendet haben.

Alle Erweiterungen finden Sie bereits in den Quellen zum Beispielprojekt ExtendedControls. Hier können Sie alle Projektelemente direkt in Visual Studio anwählen und sich dann das zugehörige und geänderte Design sowie die zugehörigen Quelltexte direkt anschauen.So viel für diesmal. In der kommenden Folge dieser Serie geht es daran, das Steuerelement-Design anzupassen und die Chromium-Engine einzubinden.

Fussnoten

1. Andreas Maslo, Fenster aufs Web, dotnetpro 10/2021, Seite 54 f., http://www.dotnetpro.de/A2110HighFive
2. Andreas Maslo, Erweitertes Browser-Control, Ein eigenes Steuerelement für Web­inhalte, Teil 1, dotnetpro 10/2021, Seite 136 ff., www.dotnetpro.de/A2110BasicInstinct, http://www.dotnetpro.de/A2110BasicInstinct
3. Andreas Maslo, Code für den Browser, Ein eigenes ­Steuerelement für Web­inhalte, Teil 2, dotnetpro 11/2021, Seite 136 ff., http://www.dotnetpro.de/A2111BasicInstinct
4. Andreas Maslo, Den Browser ausbauen, Ein eigenes Steuerelement für Web­inhalte, Teil 3, dotnetpro 12/2021, Seite 136 ff., http://www.dotnetpro.de/A2112BasicInstinct
5. Andreas Maslo, Webseiten prüfen, Ein eigenes Steuerelement für Web­inhalte, Teil 4, dotnetpro 1/2022, Seite 134 ff., http://www.dotnetpro.de/A2201BasicInstinct
6. Andreas Maslo, Favoriten verwalten, Ein eigenes Steuer­element für Web­inhalte, Teil 5, dotnetpro 2/2022, Seite 134 ff., http://www.dotnetpro.de/A2202BasicInstinct
7. Andreas Maslo, Chrome-Favoriten sichern, Ein eigenes Steuerelement für Web­inhalte, Teil 13, dotnetpro 10/2022, Seite 134 ff., http://www.dotnetpro.de/A2210BasicInstinct
8. WebView2-Online-Dokumentation, http://www.dotnetpro.de/SL2211BasicInstinct1
9. API zu den WebView2-Kernfunktionen, http://www.dotnetpro.de/SL2211BasicInstinct2
10. WebView2-WPF-Referenz, http://www.dotnetpro.de/SL2211BasicInstinct3
11. WebView2-Windows-Forms-Referenz, http://www.dotnetpro.de/SL2211BasicInstinct4