By Don Burnett

The new service pack (.Net version 3.5 SP1) offers a great number of new controls including a new web browser control. For a long time it's been possible to add browser HTML content to WPF through either the frame control or instantiating a Winforms web browser control. The only problem is that HTML content wasn't really understood or even very easy to manipulate beyond throwing up the content in the frame. With this new release everything changes..

The new WebBrowser control is very exciting for a number of reasons:

It now lets you:

• Interact with HTML content interactively
• HTML content can be hosted from a URL or  from an in-memory stream or string.
• You can navigate programmatically through the history, and you can now interact with any JavaScript on the page.
• It is a great way for WPF to host Silverlight content - just point it at the Silverlight .XAP file.
• It now supports partial-trust mode for use within XBAPs, allowing an XBAP to include an inline frame of HTML content that can be interacted with.

Let's look at a simple example of using the control... I call this the don browser.. I basically am going to open a Window, setup a grid add the control, include a TextBox control to use as an address bar. I will then add a button control, to pass the URI to browser that we are using to capture input of a new web address and pass it to the controller.
 

Let's get started..

DonBrowser.XAML

First step create the window, and make the window resizeable.

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Don's Blog Browser" Height="768" Width="1024" x:Name="DonBrowser" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" ResizeMode="CanResize">

Add a Grid control to place the UI ELEMENTS where they need to be..

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.683*"/>
            <ColumnDefinition Width="0.152*"/>
            <ColumnDefinition Width="0.165*"/>
        </Grid.ColumnDefinitions>       

Now add the WPF WebBrowser Control..

<WebBrowser Margin="0,49,0,21" x:Name="webBrowser1" Grid.ColumnSpan="3" Source="http://blog.donburnett.com" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" MaxLines="1"/>

Now add a TextBox control so we can place it in the status bar..

<TextBox Height="23.48" x:Name="textBox1" Margin="102,15,0,0" VerticalAlignment="Top" AcceptsReturn="True" FontSize="12" Grid.ColumnSpan="2" Text="http://blog.donburnett.com" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" MaxLines="1"/>

Now add a button so we can pass the new URI into the source property of the new web browser control and sent the content property to "GO", and set the Click event to "button1_Click" so we can pass this new uri through code for the event handler..
 

        <Button Height="31" HorizontalAlignment="Right" Margin="0,7.48,30,0" x:Name="button1" VerticalAlignment="Top" Width="52" Click="button1_Click" Grid.Column="2" Content="Go"/>

Add in the TextBlock to label the address bar..

        <TextBlock Height="23.48" HorizontalAlignment="Left" Margin="16,18,0,0" x:Name="textBlock1" VerticalAlignment="Top" Width="86" Text="    Address Bar:" IsEnabled="False" IsHitTestVisible="False" />

Add the StatusBar to the bottom of the window..

        <StatusBar VerticalAlignment="Bottom" Height="21" Grid.ColumnSpan="3">

Add a StatusBarItem control to the StatusBar control and databind the content to the textBox1 element we defined earlier and close the StatusBar control.. 

            <StatusBarItem Width="969" Height="22" Content="{Binding Path=Text, ElementName=textBox1, Mode=Default}" ContentStringFormat="{Binding Path=Source.Host, ElementName=webBrowser1, Mode=Default}" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalContentAlignment="Bottom" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
        </StatusBar>

Add a resizing grip..

        <ResizeGrip HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="30" Height="30" Grid.Column="2" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>

Close the Grid and Window and we are done..

   </Grid>

 </Window>

DonBrowser Code-Behind File..

Do the usual references that are required..

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {

Do the usual InitializeComponent that is required..
        public Window1()
        {
            InitializeComponent();
        }

Add the button1_Click event code that creates a new URI and pulls the content from textBox1..

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Uri myUri = new Uri(textBox1.Text);

Do the usual references that are required. Pass the Uri (MyURI) to the WebBrowser1 source property.

            this.webBrowser1.Source =  myUri;
        }

    }
}

Note since the StatusBar item is set to the value of textBox1.text via a dependency property we don't have to do anything to it. It changes when the content of the textBox1.text property changes ( you might want that only to happen on the actual button click in real life after the web browser control had notified you that something was loaded.