Share via

  • Article

WebBrowser and WebBrowserBrush Controls

Microsoft Silverlight will reach end of support after October 2021. Learn more.

The WebBrowser and WebBrowserBrush controls are designed to work together to display rich HTML content in a Silverlight application running outside the browser.

This topic contains the following sections.

  • WebBrowser
  • WebBrowserBrush
  • Using WebBrowser and WebBrowserBrush Together
  • Related Topics

WebBrowser

The WebBrowser control enables you to display HTML content in two hosting environments:

  • Silverlight 4 or later out-of-browser application

  • Silverlight 5 in-browser trusted application

You can add the WebBrowser control in XAML or in code. By default, the WebBrowser control does not have a size. Therefore, you must specify a Height and a Width for the control to display in the application. When the WebBrowser displays in an application running in-browser in partial trust, a rectangle with the specified height and width will display in place of the control.

You set the HTML content to display in the WebBrowser control in several ways.

  • Call the NavigateToString method and pass a string that contains the HTML content that you want to display.

  • Set the Source property to a fully qualified or relative URI.

  • Call the Navigate method and pass a fully-qualified or relative URI for the HTML content that you want to display.

Security noteSecurity Note:

For security reasons, make sure that the HTML you display with NavigateToString is from a trusted source.

The following example shows how to set the HTML content for a WebBrowser using the Source property.

<TextBlock Text="WebBrowser Control" />
<WebBrowser Source="https://localhost/HTMLPage1.html" Height="160" Width="160" x:Name="WB1"/>
<Button Width="200" x:Name="Button1" Content="Click for HTML content" Click="Button1_Click"   />

In addition, you can call scripts in the HTML content by calling the InvokeScript method and passing the name of the script you want to execute. The script must be present in the currently loaded HTML, or an exception will occur.

You can use the Notify method of the Window.external object to communicate from JavaScript in the HTML to managed code. The ScriptNotify event occurs when this happens.

The following example shows how to use the InvokeScript method and handle the ScriptNotify event. In this example, InvokeScript is called, which in turn calls the LoadSearch function in the following HTML. The HTML file must be hosted in the same domain as the Silverlight application.

<html>
  <head>
    <title></title>
    <script type="text/javascript" >
    function LoadSearch(searchString) {
        window.location = "https://www.bing.com/search?q=" +    searchString
        window.external.notify("Search completed")
     }
     </script>
 </head>
  <body>
    Silverlight WebBrowser control.
  </body>
</html>

Partial Public Class MainPage
    Inherits UserControl
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub WB1_ScriptNotify(ByVal sender As Object, ByVal e As NotifyEventArgs)
        Button1.Content = e.Value

        Button1.IsEnabled = False
    End Sub

    Private Sub Button1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Dim results As Object = WB1.InvokeScript("LoadSearch", New String() {"Silverlight"})
    End Sub
End Class

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    void WB1_ScriptNotify(object sender, NotifyEventArgs e)
    {
        Button1.Content = e.Value;
        Button1.IsEnabled = false;

    }

    private void Button1_Click(object sender, RoutedEventArgs e)
    {
        object results = WB1.InvokeScript("LoadSearch", new string[] { "Silverlight" });
    }
}

<StackPanel x:Name="LayoutRoot" Height="358" Width="489" Background="LightBlue">
    <WebBrowser  x:Name="WB1" Source="https://localhost/HTMLPage1.htm" Height="272" Width="379" 
                 ScriptNotify="WB1_ScriptNotify" Margin="5" />
    <Button Width="200" x:Name="Button1" Content="Click to search!" Click="Button1_Click" />
</StackPanel>

You can not rotate, apply effects, or create a partially opaque WebBrowser control. In addition, you cannot use the WebBrowser control to overlay Silverlight content on HTML. For these scenarios you should use the WebBrowserBrush.

NoteNote:

If you want to use the WebBrowser control in the Silverlight Designer, you will need to add it to the Toolbox by right-clicking the Toolbox and selecting Choose Items. For more information, see How to: Add a Control to the Toolbox.

WebBrowserBrush

WebBrowserBrush is a type of Brush object similar to a VideoBrush. However, instead of painting an area with video content, it paints an area with HTML content. This HTML content is provided by a WebBrowser control. Just like the other brush types, you can use a WebBrowserBrush to paint the following:

Unlike other types of brushes, you must update the content in the WebBrowserBrush manually by calling the Redraw method.

To use a WebBrowserBrush, you create a WebBrowser control and set its Source property. You apply the WebBrowserBrush to the object that you want to paint, and set the WebBrowserBrush object's SourceName property to the name of the WebBrowser that you created.

If the content in the WebBrowser changes, you must call the Redraw method to update the WebBrowserBrush. In addition, the user cannot interact with content displayed with a WebBrowserBrush. The following example shows how to display content with a WebBrowserBrush. In this example, the content for the WebBrowserBrush is updated when the user moves the mouse.

Private Sub LayoutRoot_MouseMove(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    WBB1.Redraw()
End Sub

private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
    WBB1.Redraw();
}

<StackPanel x:Name="LayoutRoot" Background="Blue" MouseMove="LayoutRoot_MouseMove">
    <WebBrowser Name="WB1" Source="Hello.html" Height="150" Width="150" />
    <Rectangle Height="150" Width="150" >
        <Rectangle.Fill>
            <WebBrowserBrush SourceName="WB1" Opacity=".5" x:Name="WBB1"/>
        </Rectangle.Fill>
    </Rectangle>
</StackPanel>

Using WebBrowser and WebBrowserBrush Together

Typically, you use the WebBrowser and WebBrowserBrush controls together when you need to display rotate, apply effects to, or interact with HTML content. For more information about how to use WebBrowser and WebBrowserBrush together, see How to: Use the WebBrowser and WebBrowserBrush for Rich HTML Content.