Condividi tramite


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.

Run this sample

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>