C# WebView2 Projekt

In diesem Tutorial zeige ich wie man ein C# WebView2 Projekt erstellt und dieses anhand eines konkreten Beispiels als Windows App umsetzt. Als Basis dient mein Racing Manager, der seit einigen Jahren online Spieler begeistert und seit kurzem auch Open Source ist.

C# WebView2 Projekt

Das WebView Projekt funktioniert unter C# analog zur WebView unter Android und Java. Mit dem WebView kann der Browser in das UI einer Anwendung hinzugefügt werden. So lassen sich in einem Windows Fenster Webseites oder teile einer Webseite anzeigen. Unter Android ist das der Chrome Browser (Google Ökosystem) und unter Windows .NET Core und C# natürlich der neue Edge Browser. Folglich benötigt man neben dem Steuerelement auch die aktuellste Version des (vielfach verhassten) Browsers.

Step by Step

Ein WebView Projekt ist sehr einfach und schnell erledigt. Die einzige Hürde liegt in den Voraussetzungen. Man benötigt aktuell:

• Visual Studio 2017 oder neuer
• aktuellen Edge Browser (Canary Channel)
• WebView2 NuGet Package

Ich verwende für mein Beispielprojekt Visual Studio 2019. WebView2 ist aktuell noch in der Entwicklung und daher als Beta Version zu sehen. Damit man damit vernünftig entwickeln kann benötigt man neben der aktuellen Version von NuGet Paket auch eine aktuelle Version von Microsoft Edge. Diese Canary Channel Version mit täglichen Updates erhält man durch dessen Installation auf der verlinkten Seite. Für dieses Tutorial erstelle ich ein neues Projekt:

Als Startpunkt dient ein .NET Core WPF App Template. Um das WebView2 Steuerelement verwenden zu können muss man das NuGet Paket hinzufügen. Das funktioniert über den NuGet Paketmanager. Eine Suche nach WebView2 liefert erfolgreich das gesuchte Paket. Achtung: man sollte die Checkbox „Vorabversion einbeziehen“ da es sich aktuell (Stand August 2020) um eine Beta Version handelt.

Ich habe explizit die prerelease Version installiert, da meine App mit dem anderen Paket nicht funktioniert hat. Ich nehme an wenn du den Artikel liest funktioniert das Steuerelement mit egal welcher Version, aktuell gibt es Probleme mit der Version vom Paket und der installierten Version vom Edge Browser. Solltest du trotzdem dieses Problem haben rate ich ältere Versionen von WebView2 zu probieren bzw. den Browser upzudaten.

WebView2 hinzufügen

In der *.xaml Datei vom Fenster habe ich alles innerhalb vom Windows Tag durch folgenden Code ersetzt:

<DockPanel>
  <wv2:WebView2 Name="webView" Source="https://racing-manager.com/live"/>
</DockPanel>

Neben einem Namen für das Steuerelement setzt man auch die Quelle, in meinem Fall die URL meines Online Rennsport Managers. Von nun an zeigt das Steuerelement als Ausgabe die gerenderte Webseite mit der angegebenen URL so wie man sie vom Edge Browser kennt. Von der Funktionalität steht nun ebenfalls alles zur Verfügung was man im Ansichtsfenster eines Browsers kann, also zum Beispiel auf Links oder Buttons klicken. Achtung: da die Navigationsleiste vom Browser fehlt gibt es keinen Zurück Button, weshalb man Schwachstellen in der Navigation meines Manager Spiels sofort erkennt. Den Source Code findest du wie immer auf GitHub! Das fertige Ergebnis in Aktion:

Fazit

Mit dem WebView Steuerelement fügt man schnell und einfach in eine Windows Applikation Funktionen einer Web-Applikation hinzu. Ich habe dir gezeigt wie einfach der Einbau von der WebView in eine WPF Applikation ist und wie man ein Browser Spiel in ein paar Klicks in eine native Windows Anwendung umbaut. Mit dem Webview ist es nun möglich eine vollständig hybride Applikation zu bauen in der Webservices eine native Windows Anwendung erweitern. Im Zeitalter der Microservices und Clouds ist das ein weiterer Schritt weg von lokal installierten Apps hin zu Datencentern und Cloud Systemen.