XAML-Kolumne: WPF und Windows-Apps

XAML-Tipp: Chromium-Webbrowser-Steuerelement mit CefSharp.WPF
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: Chromium-Webbrowser-Steuerelement mit CefSharp.WPF“.

WPF: Chromium-Webbrowser-Steuerelement mit CefSharp.WPF

Das Standard-Webbrowser-Steuerelement von WPF basiert auf einer älteren Internet Explorer Engine. Das bringt allerdings einige unschöne Seiteneffekte. Selbst Microsoft möchte mit dem neuen Edge-Browser einen Neuanfang wagen und verabschiedet sich vom Internet Explorer. Richtig unangenehm wird das für WPF-Entwickler, die einfach nur bestimmten Content aus dem Web anzeigen lassen möchten und sich nicht auf eine saubere Anzeige verlassen können. Am Ende macht das beim Kunden auch keinen guten Eindruck. Die Rettung hierfür bietet das Open-Source-Webbrowser-Steuerelement CefSharp.WPF. Dieses basiert auf der Chrome-Engine und bietet einen leichtgewichtigen .NET Wrapper vom Chromium Embedded Framework (CEF).

Um das Webbrowser-Steuerelement nutzen zu können, muss das aktuelle Projekt für einen bestimmten CPU-Typ festgelegt werden. Diesen legt man beim „Configuration Manager…“ fest, der direkt in Visual-Studio-Menü unter Any CPU zu finden ist. Für die NuGet-Installation sind Administratorrechte für Visual Studio notwendig. Das NuGet-Packet findet man unter CefSharp.WPF. Anschließend steht dem Projekt das neue ChromiumWebBrowser-Steuerelement zur Verfügung. Diesem kann man direkt eine Webadresse mitteilen oder auch direkten HTML-, CSS- und JavaScript-Code. Das Steuerelement ist für die Oberfläche nicht unbedingt notwendig, falls man nur JavaScript-Code ausführen möchte. Das Codebeispiel aus Listing 1 zeigt die Verwendung des ChromiumWebBrowser-Steuerelements mit einem ViewModel (Listing 2). Dabei wird ein Kontextmenü bereitgestellt, das auf fertige Commands zugreift. Abbildung 1 zeigt das fertige Ergebnis.

<Window x:Class="ChromeWebbrowser.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:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
  xmlns:viewModels="clr-namespace:ChromeWebbrowser.ViewModels"
  mc:Ignorable="d"
  Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <viewModels:MainWindowViewModel x:Key="MainWindowViewModel" />
  </Window.Resources>
  <Grid DataContext="{StaticResource MainWindowViewModel}">
    <cefSharp:ChromiumWebBrowser
      Address="{Binding Address, Mode=TwoWay}"
      Title="{Binding Title, Mode=OneWayToSource}"
      AllowDrop="True"
      WebBrowser="{Binding WebBrowser, Mode=OneWayToSource}">
      <FrameworkElement.ContextMenu>
        <ContextMenu>
          <MenuItem Header="Back" Command="{Binding WebBrowser.BackCommand}" />
          <MenuItem Header="Forward" Command="{Binding WebBrowser.ForwardCommand}" />
          <Separator />
          <MenuItem Header="Print ..." Command="{Binding WebBrowser.PrintCommand}" />
          <Separator />
          <MenuItem Header="Zoom In" Command="{Binding WebBrowser.ZoomInCommand}" />
          <MenuItem Header="Zoom Out" Command="{Binding WebBrowser.ZoomOutCommand}" />
          <MenuItem Header="Zoom Reset" Command="{Binding WebBrowser.ZoomResetCommand}" />
          <Separator />
          <MenuItem Header="Show DevTools" Command="{Binding ShowDevToolsCommand}" />
          <MenuItem Header="Close DevTools" Command="{Binding CloseDevToolsCommand}" />
          <Separator />
          <MenuItem Header="View Source" Command="{Binding WebBrowser.ViewSourceCommand}" />
          <MenuItem Header="Cut" Command="{Binding WebBrowser.CutCommand}"/>
          <MenuItem Header="Copy" Command="{Binding WebBrowser.CopyCommand}"/>
          <MenuItem Header="Paste" Command="{Binding WebBrowser.PasteCommand}"/>
        </ContextMenu>
      </FrameworkElement.ContextMenu>
    </cefSharp:ChromiumWebBrowser>
  </Grid>
</Window>
[ImplementPropertyChanged]
public class MainWindowViewModel
{
  public string Title { get; set; }
  public string Address { get; set; }

  public IWpfWebBrowser WebBrowser { get; set; }

  public MainWindowViewModel()
  {
    Address = "http://www.entwickler.de";
  }
}
Abb. 3: Das „ChromiumWebBrowser“-Steuerelement im Einsatz

Abb. 1: Das „ChromiumWebBrowser“-Steuerelement im Einsatz

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -