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: