Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/michaldivis/dark-html-viewer

A simple HTML viewer control for WPF (using WebView2)
https://github.com/michaldivis/dark-html-viewer

html-viewer webview2 wpf

Last synced: about 1 month ago
JSON representation

A simple HTML viewer control for WPF (using WebView2)

Awesome Lists containing this project

README

        

# Dark HTML Viewer

A WPF user control for displaying in memory HTML. The control stores the loaded HTML in temporary files and uses the [WebView2](https://docs.microsoft.com/en-us/microsoft-edge/webview2/) control to display them.

## Nuget
[![Nuget](https://img.shields.io/nuget/v/divis.darkhtmlviewer?label=Divis.DarkHtmlViewer)](https://www.nuget.org/packages/Divis.DarkHtmlViewer/)

## Usage

### Basics
Add the namespace to your XAML
```XML
xmlns:dhv="clr-namespace:DarkHtmlViewer;assembly=DarkHtmlViewer"
```

And use the `HtmlViewer` control
```XML

```

### Commands & methods
`LoadCommand` => `void Load(string html)`\
`ScrollCommand` => `Task ScrollAsync(string elementId)`\
`ScrollOnNextLoadCommand` => `void ScrollOnNextLoad(string elementId)`\
`SearchCommand` => `Task SearchAsync(string text)`\
`SearchOnNextLoadCommand` => `void SearchOnNextLoad(string text)`\
`SaveScrollPositionForNextLoadCommand` => `SaveScrollPositionForNextLoadAsync()`\
`PrintCommand` => `Task PrintAsync()`\
`ZoomCommand` => `void Zoom(double zoom)`

### Loading HTML content
To load content into the viewer, bind an HTML string to it's `HtmlContent` property
```XML

```
or use the `LoadCommand` and pass the HTML string as the `CommandParameter`
```XML

```

### Link clicks
Whenever a link is clicked in the loaded HTML file, the control fires the `LinkClickedCommand`. Bind you own command to that in order to handle link clicks, example:

View.cs
```XML

```

ViewModel.cs
```Csharp
public ICommand MyLinkClickedCommand => new RelayCommand(HandleLinkClick);

private void HandleLinkClick(string? link)
{
Debug.WriteLine($"Link clicked: {link}");
}
```

### Scroll to
To scroll to a specific element id, you have several options.

`ScrollCommand`: tries to scroll to a specific element in the currently loaded HTML file
```XML

```

`ScrollOnNextLoadCommand`: will try to scroll to a specific element in the next loaded HTML file
```XML

```

### Save scroll position
Saves the current scroll position and tries to restore it next time HTML content is loaded. If `ScrollOnNextLoad` is used as well, this will be ignored

`SaveScrollPositionForNextLoadCommand`: will try to scroll to a specific element in the next loaded HTML file
```XML

```

### Search

`SearchCommand`: finds a search term on the current page
```XML

```

`SearchOnNextLoadCommand`: finds a search term in the next loaded HTML file
```XML

```

### Printing

The `PrintCommand` can be used to bring up the default print dialog window.
```XML

```

### Logging
Enable logging for the control by configuring an `ILoggerFactory` provider like so:
```csharp
var loggerFactory = LoggerFactory.Create(c =>
{
c.SetMinimumLevel(LogLevel.Debug);
c.AddDebug();
});

HtmlViewer.ConfigureLogger(() => loggerFactory);
```

### Virtual host name to folder path mapping
See [this page](https://docs.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2.setvirtualhostnametofoldermapping?view=webview2-dotnet-1.0.1108.44) to learn more.

Enable virtual host name to folder path mapping like so:
```csharp
HtmlViewer.ConfigureVirtualHostNameToFolderMappingSettings(new VirtualHostNameToFolderMappingSettings
{
Hostname = "myfiles.local",
FolderPath = @"C:\Resources\MyFiles",
AccessKind = Microsoft.Web.WebView2.Core.CoreWebView2HostResourceAccessKind.Allow
});
```

You can then access your assets like this in HTML:
```html

```

### Default browser background color

Configure the default background color of the control like so:

```csharp
using System.Drawing;

var backgroundColor = Color.FromArgb(255, 24, 24, 24);
HtmlViewer.ConfigureDefaultBackgroundColor(backgroundColor);
```