databind the Source property of the WebBrowser in WPF

wpf webbrowser
wpf webbrowser script error
wpf webbrowser mvvm
wpf webbrowser javascript not working
what is web browser control
wpf embedded browser
wpf html viewer
c# wpf:webview example

Does anyone know how to databind the .Source property of the WebBrowser in WPF ( 3.5SP1 )? I have a listview that I want to have a small WebBrowser on the left, and content on the right, and to databind the source of each WebBrowser with the URI in each object bound to the list item.

This is what I have as a proof of concept so far, but the "<WebBrowser Source="{Binding Path=WebAddress}"" does not compile.

<DataTemplate x:Key="dealerLocatorLayout" DataType="DealerLocatorAddress">                
    <StackPanel Orientation="Horizontal">
         <!--Web Control Here-->
        <WebBrowser Source="{Binding Path=WebAddress}"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
            ScrollViewer.VerticalScrollBarVisibility="Disabled" 
            Width="300"
            Height="200"
            />
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <Label Content="{Binding Path=CompanyName}" FontWeight="Bold" Foreground="Blue" />
                <TextBox Text="{Binding Path=DisplayName}" FontWeight="Bold" />
            </StackPanel>
            <TextBox Text="{Binding Path=Street[0]}" />
            <TextBox Text="{Binding Path=Street[1]}" />
            <TextBox Text="{Binding Path=PhoneNumber}"/>
            <TextBox Text="{Binding Path=FaxNumber}"/>
            <TextBox Text="{Binding Path=Email}"/>
            <TextBox Text="{Binding Path=WebAddress}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

The problem is that WebBrowser.Source is not a DependencyProperty. One workaround would be to use some AttachedProperty magic to enable this ability.

public static class WebBrowserUtility
{
    public static readonly DependencyProperty BindableSourceProperty =
        DependencyProperty.RegisterAttached("BindableSource", typeof(string), typeof(WebBrowserUtility), new UIPropertyMetadata(null, BindableSourcePropertyChanged));

    public static string GetBindableSource(DependencyObject obj)
    {
        return (string) obj.GetValue(BindableSourceProperty);
    }

    public static void SetBindableSource(DependencyObject obj, string value)
    {
        obj.SetValue(BindableSourceProperty, value);
    }

    public static void BindableSourcePropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        WebBrowser browser = o as WebBrowser;
        if (browser != null)
        {
            string uri = e.NewValue as string;
            browser.Source = !String.IsNullOrEmpty(uri) ? new Uri(uri) : null;
        }
    }

}

Then in your xaml do:

<WebBrowser ns:WebBrowserUtility.BindableSource="{Binding WebAddress}"/>

WPF: Document binding with WebBrowser control , However, in this current version of the control (up until WPF 4) it is not possible to use databinding because there is no dependency property  Does anyone know how to databind the .Source property of the WebBrowser in WPF ( 3.5SP1 )? I have a listview that I want to have a small WebBrowser on the left, and content on the right, and to dat

I've amended Todd's excellent answer a little to produce a version that copes with either strings or Uris from the Binding source:

public static class WebBrowserBehaviors
{
    public static readonly DependencyProperty BindableSourceProperty =
        DependencyProperty.RegisterAttached("BindableSource", typeof(object), typeof(WebBrowserBehaviors), new UIPropertyMetadata(null, BindableSourcePropertyChanged));

    public static object GetBindableSource(DependencyObject obj)
    {
        return (string)obj.GetValue(BindableSourceProperty);
    }

    public static void SetBindableSource(DependencyObject obj, object value)
    {
        obj.SetValue(BindableSourceProperty, value);
    }

    public static void BindableSourcePropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        WebBrowser browser = o as WebBrowser;
        if (browser == null) return;

        Uri uri = null;

        if (e.NewValue is string )
        {
            var uriString = e.NewValue as string;
            uri = string.IsNullOrWhiteSpace(uriString) ? null : new Uri(uriString);
        }
        else if (e.NewValue is Uri)
        {
            uri = e.NewValue as Uri;
        }

        browser.Source = uri;
    }

Binding WebBrowser content in WPF · Thomas Freudenberg, When you're using a WebBrowser control in your WPF application, you may have noticed that you can't bind the control's content. WebBrowser has no property to set its content but a method named NavigateToString . 4: ''' Allows for the Source Property of the WebBrowser to be Bindable to the DataContext 5: ''' </summary> 6: ''' <remarks></remarks> 7: Public Class WebBrowserUtility 8: Private Sub New 9: End Sub

I wrote a wrapper usercontrol, which makes use of the DependencyProperties:

XAML:

<UserControl x:Class="HtmlBox">
    <WebBrowser x:Name="browser" />
</UserControl>

C#:

public static readonly DependencyProperty HtmlTextProperty = DependencyProperty.Register("HtmlText", typeof(string), typeof(HtmlBox));

public string HtmlText {
    get { return (string)GetValue(HtmlTextProperty); }
    set { SetValue(HtmlTextProperty, value); }
}

protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e) {
    base.OnPropertyChanged(e);
    if (e.Property == HtmlTextProperty) {
        DoBrowse();
    }
}
 private void DoBrowse() {
    if (!string.IsNullOrEmpty(HtmlText)) {
        browser.NavigateToString(HtmlText);
    }
}

and use it like so:

<Controls:HtmlBox HtmlText="{Binding MyHtml}"  />

The only trouble with this one is that the WebBrowser control is not "pure" wpf... it is actually just a wrapper for a win32 component. This means that the control won't respect the z-index, and will always overlay other element (eg: in a scrollviewer this might cause some trouble) more info about these win32-wpf issues on MSDN

https://social.msdn.microsoft.com/Forums/vstudio/e, Step 2: Write a helper class to handle the attached properties. WebBrowser.​Source is not a DependencyProperty. A known workaround is to  One of the solutions to solve this problem is to create a new custom control that derives from the WebBrowser control and adds a new dependency property to which you can databind your document. When the property changes you can simply invoke NavigateToString(string). Another solution is using WPF’s

Cool idea Todd.

I have done similar with the RichTextBox.Selection.Text in Silverlight 4 now. Thanks for your post. Works fine.

public class RichTextBoxHelper
{
    public static readonly DependencyProperty BindableSelectionTextProperty =
       DependencyProperty.RegisterAttached("BindableSelectionText", typeof(string), 
       typeof(RichTextBoxHelper), new PropertyMetadata(null, BindableSelectionTextPropertyChanged));

    public static string GetBindableSelectionText(DependencyObject obj)
    {
        return (string)obj.GetValue(BindableSelectionTextProperty);
    }

    public static void SetBindableSelectionText(DependencyObject obj, string value)
    {
        obj.SetValue(BindableSelectionTextProperty, value);
    }

    public static void BindableSelectionTextPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        RichTextBox rtb = o as RichTextBox;
        if (rtb != null)
        {
            string text = e.NewValue as string;
            if (text != null)
                rtb.Selection.Text = text;
        }
    }
}    

Here is the Xaml-Code.

<RichTextBox IsReadOnly='False' TextWrapping='Wrap' utilities:RichTextBoxHelper.BindableSelectionText="{Binding Content}"/>

Embed a web browser in WPF / XAML, Unfortunately the Source property of the WebBrowser control is not a dependency property. Therefore it cannot be bound. But there exists a  Unfortunately the Source property of the WebBrowser control is not a dependency property. Therefore it cannot be bound. But there exists a workaround in order to bind a URI to a WebBrowser Control. The workaround that exists is to create an attached property that can be bound and which changes reflect directly to the webbrowser’s source property..

You may also use a special separate proxy control. It's applicable not only to the WebBrowser case, but to any such control.

Bind to WebBrowser's Source Property, In this article, we use the WPF WebBrowser control to create a mini web <​Image Source="/WpfTutorialSamples;component/Images/arrow_left.png" Width="​16"  Does anyone know how to databind the .Source property of the WebBrowser in WPF ( 3.5SP1 )? I have a listview that I want to have a small WebBrowser on the left, and content on the right, and to databind the source of each WebBrowser with the URI in each object bound to the list item.

The WebBrowser control, 5/12/2018 · Does anyone know how to databind the .Source property of the WebBrowser in WPF ( 3.5SP1 )? I have a listview that I want to have a small  When you’re using a WebBrowser control in your WPF application, you may have noticed that you can’t bind the control’s content. WebBrowser has no property to set its content but a method named NavigateToString. So when you’re following a strict MVVM approach you’re lost because you don’t want any code-behind for your views.

Webbrowser control wpf binding, [C#] WPF Data Binding WebBrowser - C# - Pastebin.com Source property of the WebBrowser in WPF ( 3.5SP1 )? I have a listview that I want to have a small  Webbrowser control Use of web browser control as WPF control using MVVM pattern Content of WebBrowserControl.xaml Content of WebBrowserControl.xaml.cs

Wpf Webbrowser Navigatetostring Ejemplo, In an MVVM application I am currently creating, I had the need to embed the WPF WebBrowser control and quickly discovered that the Source  If you are binding several properties to a common source, you want to use the DataContext property, which provides a convenient way to establish a scope within which all data-bound properties inherit a common source. In the following example, the data context is established on the root element of the application.

Comments
  • nudge to fix your post.
  • Getting an Exception on that "new Uri(uri)" as the string is "". Perhaps it should be.... browser.Source = string.IsNullOrEmpty(uri) ? null : new Uri(uri);
  • Note that this is only a one way binding and the BindableSource property will not change when the web browser page changes.
  • as a newbie this was a little hard for me to follow - writing something about having a private-public getter setter for "WebAddress" in the bound ViewModel with an update event for Property changed would have helped. this project has a similar example. github.com/thoemmi/WebBrowserHelper
  • thanks. I took this and modified it to implement a "Html" property, which calls NavigateToString under the hood.
  • This is exactly what I needed as I want to display my own html. Neat, simple, and I almost understand what its doing (-: