Export (0) Print
Expand All

How to: Use the WebBrowser and WebBrowserBrush for Rich HTML Content

Silverlight

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.

This code example contains a WebBrowser control named WB1 and a WebBrowserBrush control named htmlBrush. The source property for the WebBrowser is set to http://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


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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://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="http://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>


Community Additions

ADD
Show:
© 2014 Microsoft