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:

C#

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>");
    }
}

VB.NET

Namespace WPF.TransparentPageSample
    Public Partial Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
            WebBrowser1.Browser.LoadHTML(
                "<html>" & vbLf &
                "     <body>" &
                "         <div style='background: yellow; opacity: 0.7;'>" & vbLf &
                "             This text is in the yellow half-transparent div." &
                "        </div>" & vbLf &
                "         <div style='background: red;'>" & vbLf &
                "             This text is in the red opaque div and should appear as is." &
                "        </div>" & vbLf &
                "         <div>" & vbLf &
                "             This text is in the non-styled div and should appear as a text" &
                "             on the completely transparent background." &
                "        </div>" & vbLf &
                "    </body>" & vbLf &
                " </html>")
        End Sub
    End Class
End Namespace


The screenshot below demonstrates the result of the application launch: