DotNetBrowser supports transparent background in HTML documents. This example demonstrates how to create an application window with embedded BrowserView that loads HTML document with transparent background.


The XAML markup of the main application window is provided below:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpf="clr-namespace:DotNetBrowser.WPF;assembly=DotNetBrowser"
        xmlns:DotNetBrowser="clr-namespace:DotNetBrowser;assembly=DotNetBrowser" 
        x:Class="WPF.TransparentPageSample.MainWindow"
        Title="MainWindow" Height="350" Width="525" 
        WindowStartupLocation="CenterScreen" AllowsTransparency="True" 
        WindowStyle="None" Background="Transparent">
    <Grid Background="Transparent">
        <wpf:WPFBrowserView x:Name="WebBrowser1" Background="Transparent" 
                            BrowserType="LIGHTWEIGHT" HorizontalAlignment="Stretch" 
                            VerticalAlignment="Stretch">
            <wpf:WPFBrowserView.Preferences>
                <DotNetBrowser:BrowserPreferences TransparentBackground="True"/>
            </wpf:WPFBrowserView.Preferences>
        </wpf:WPFBrowserView>
    </Grid>
</Window>

The source code of the MainWindow is provided below:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        WebBrowser1.Browser.LoadHTML(
          "<html>\n"
        +"     <body>"
        +"         <div style='background: yellow; opacity: 0.7;'>\n"
        +"             This text is in the yellow half-transparent div."
        +"        </div>\n"
        +"         <div style='background: red;'>\n"
        +"             This text is in the red opaque div and should appear as is."
        +"        </div>\n"
        +"         <div>\n"
        +"             This text is in the non-styled div and should appear as a text"
        +"             on the completely transparent background."
        +"        </div>\n"
        +"    </body>\n"
        +" </html>");
    }
}

The screenshot below demonstrates the result of the application launch: