How to: Use the WebBrowser and WebBrowserBrush for Rich HTML Content
Microsoft Silverlight will reach end of support after October 2021. Learn more.
There are times when you want to display HTML content in a Silverlight application that runs outside the browser. You may want to rotate or apply effects to the HTML content, but still enable the user to interact with the content. You can do this by adding WebBrowser and WebBrowserBrush controls to your application, and swapping between the two, depending on whether the user is interacting with the content. The following code example shows how to use the WebBrowser and WebBrowserBrush controls.
Example
This code example contains a WebBrowser control named WB1 and a WebBrowserBrush control named htmlBrush. The source property for the WebBrowser is set to https://www.bing.com. The source for the WebBrowserBrush is in turn, set to the WebBrowser control.
Initially, the WebBrowserBrush control is hidden and the WebBrowser is shown. When the user moves the mouse, the WebBrowser is hidden, and the WebBrowserBrush is shown, with a transform is applied to the brush. When the user clicks the HTML content, indicating that they may want to interact with the HTML, the WebBrowser is made visible again and the WebBrowserBrush is hidden.
The content of the WebBrowserBrush is updated at regular intervals so that it remains in sync with the WebBrowser control. The following example uses a DispatcherTimer to call Redraw on the WebBrowserBrush every 100 milliseconds.
To test this example, you will need to enable host the application in one of two environments:
Silverlight 4 or later out-of-browser application
Silverlight 5 in-browser trusted application
For more information, see How to: Configure an Application for Out-of-Browser Support or How to: Enable Trusted Applications to Run Inside the Browser.
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Threading
Partial Public Class MainPage
Inherits UserControl
Private WithEvents dt As New DispatcherTimer()
Public Sub New()
InitializeComponent()
dt.Interval = New TimeSpan(100)
End Sub
Private Sub dt_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles dt.Tick
htmlBrush.Redraw()
End Sub
Private animating As Boolean = False
Private Sub LayoutRoot_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
dt.Start()
If Not animating Then
WB1.Visibility = Visibility.Collapsed
Brush.Visibility = Visibility.Visible
Spin.Begin()
animating = True
End If
End Sub
Private Sub brush_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
Spin.[Stop]()
WB1.Visibility = Visibility.Visible
Brush.Visibility = Visibility.Collapsed
animating = False
End Sub
End Class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;
namespace WebBrowserBrushEx
{
public partial class MainPage : UserControl
{
DispatcherTimer dt = new DispatcherTimer();
public MainPage()
{
InitializeComponent();
dt.Interval = new TimeSpan(100);
dt.Tick += new EventHandler(dt_Tick);
}
void dt_Tick(object sender, EventArgs e)
{
htmlBrush.Redraw();
}
bool animating = false;
private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
dt.Start();
if (!animating)
{
WB1.Visibility = Visibility.Collapsed;
brush.Visibility = Visibility.Visible;
Spin.Begin();
animating = true;
}
}
private void brush_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Spin.Stop();
WB1.Visibility = Visibility.Visible;
brush.Visibility = Visibility.Collapsed;
animating = false;
}
}
}
<UserControl x:Class="WebBrowserBrushEx.MainPage"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="412">
<Grid x:Name="LayoutRoot" Background="LightBlue" MouseMove="LayoutRoot_MouseMove" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Resources>
<Storyboard x:Name="Spin" >
<DoubleAnimation
Storyboard.TargetName="myTransform"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:5"
RepeatBehavior="Forever" />
</Storyboard>
</Grid.Resources>
<TextBlock Margin="5" Text="Right-click to install the out-of-browser application" />
<WebBrowser Grid.Row="1" Visibility="Visible" Name="WB1" Height="350" Width="350" Source="https://www.bing.com" />
<!-- Add Rectangle the same size as the WebBrowser control -->
<Rectangle Grid.Row="1" x:Name="brush" Width="350" Height="350" Visibility="Collapsed"
MouseLeftButtonDown="brush_MouseLeftButtonDown" >
<Rectangle.Fill>
<!-- Fill (set background) as an HTML Brush -->
<WebBrowserBrush x:Name="htmlBrush" SourceName="WB1"/>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform x:Name="myTransform" Angle="45" CenterX="175" CenterY="175" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</UserControl>
See Also