title: Web Browser Control in WPF
body: <p>My goal is similar to <a href="https://stackoverflow.com/questions/1895008/c-wpf-interaction-with-web-browser-control">this question</a><br>
  But still I didn't get answer to my problem</p>
  
  <p>So, I need make an app with WYSIWYG HTML editing support for designing and  generating report template. And like question above, I used WebBrowser control in WPF. The biggest problem is WPF WebBrowser always set null to HTML body after designMode set to on. So I host WinForm WebBrowser into my app. And to set or to get HTML document to be processed from WebBrowser is incredibly hard.</p>
  
  <p><strong>Q:</strong>  </p>
  
  <ol>
  <li>Is there any way to make this (HTML Editor using WebBrowser Control) happen using WPF without change to WinForm ?  </li>
  <li>Or, if not. Is there any workaround, article, code or any whatever to make WYSIWYG HTML Editor with visual editor ?  </li>
  </ol>
  
  <p><strong>UPDATE:</strong><br>
  I have these 2 attached property for MVVM purposes. So I can get/set HTML with HTMLSource and set Design Mode when app launched.</p>
  
  <p><strong>IsDesignMode</strong></p>
  
  <pre><code>public static readonly DependencyProperty IsDesignModeProperty =
      DependencyProperty.RegisterAttached("IsDesignMode", typeof (Boolean), typeof (WebBrowserHelper),
                                          new UIPropertyMetadata(false, IsDesignModePropertyChanged));
  
  public static Boolean GetIsDesignMode(DependencyObject obj)
  {
      return (Boolean)obj.GetValue(IsDesignModeProperty);
  }
  
  public static void SetIsDesignMode(DependencyObject obj, Boolean value)
  {
      obj.SetValue(IsDesignModeProperty, value);
  }
  
  public static void IsDesignModePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
  {
      WebBrowser browser = obj as WebBrowser;
      if (browser != null)
      {
          Boolean designMode = (Boolean) args.NewValue;
          if(designMode)
          {
              browser.LoadCompleted += (s, e) =&gt;
              {
                  var htmlDoc = (s as WebBrowser).Document as IHTMLDocument2;
                  htmlDoc.body.setAttribute("contenteditable", "true");
                  htmlDoc.designMode = "On";
              };
          }
          else
          {
              browser.LoadCompleted += (s, e) =&gt;
              {
                  var htmlDoc = (s as WebBrowser).Document as IHTMLDocument2;
                  htmlDoc.body.setAttribute("contenteditable", "false");
                  htmlDoc.designMode = "Off";
              };
          }
      }
  }
  </code></pre>
  
  <p><strong>HTMLSource</strong></p>
  
  <pre><code>public static readonly DependencyProperty HTMLSourceProperty =
      DependencyProperty.RegisterAttached("HTMLSource", typeof (String), typeof (WebBrowserHelper),
                                          new UIPropertyMetadata(null, HTMLSourcePropertyChanged));
  
  public static String GetHTMLSource(DependencyObject obj)
  {
      return (String)obj.GetValue(HTMLSourceProperty);
  }
  
  public static void SetHTMLSource(DependencyObject obj, String value)
  {
      obj.SetValue(HTMLSourceProperty, value);
  }
  
  public static void HTMLSourcePropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
  {
      WebBrowser browser = o as WebBrowser;
      if (browser != null)
      {
          browser.NavigateToString(args.NewValue as String);
      }
  }
  </code></pre>
  
  <p><strong>VIEW</strong></p>
  
  <pre><code>&lt;UserControl x:Class="Delay.View.LayoutView"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:browser="clr-namespace:Delay.Helper"
               xmlns:cal="http://www.caliburnproject.org"
               xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"&gt;
      &lt;UserControl.Resources&gt;
          &lt;Style x:Key="ButtonStyle" TargetType="Button"&gt;
              &lt;Setter Property="Width" Value="100" /&gt;
              &lt;Setter Property="Height" Value="40" /&gt;
              &lt;Setter Property="Margin" Value="2.5,0" /&gt;
              &lt;Setter Property="ContentTemplate"&gt;
                  &lt;Setter.Value&gt;
                      &lt;DataTemplate&gt;
                          &lt;StackPanel&gt;
                              &lt;ContentPresenter Content="{TemplateBinding Content}"
                                                TextBlock.FontSize="15" /&gt;
                          &lt;/StackPanel&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
      &lt;/UserControl.Resources&gt;
      &lt;Grid Background="Lavender"&gt;
          &lt;DockPanel&gt;
              &lt;TextBlock HorizontalAlignment="Center" Text="Layout Designer"
                         DockPanel.Dock="Top" FontSize="20" /&gt;
              &lt;WebBrowser Name="webBrowser" HorizontalAlignment="Stretch" DockPanel.Dock="Top" Margin="8" Height="435"
                          browser:WebBrowserHelper.HTMLSource="{Binding HtmlPage}" browser:WebBrowserHelper.IsDesignMode="True" /&gt;
              &lt;StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" HorizontalAlignment="Center"&gt;
                  &lt;StackPanel Orientation="Vertical" Margin="5,0"&gt;
                      &lt;ComboBox ItemsSource="{Binding LayoutTags}" SelectedItem="{Binding SelectedTag}"
                                HorizontalAlignment="Stretch" Margin="0,5" MinWidth="100"&gt;
                          &lt;ComboBox.ItemTemplate&gt;
                              &lt;DataTemplate&gt;
                                  &lt;TextBlock FontSize="12" Text="{Binding TagName}" /&gt;
                              &lt;/DataTemplate&gt;
                          &lt;/ComboBox.ItemTemplate&gt;
                      &lt;/ComboBox&gt;
                      &lt;ListBox ItemsSource="{Binding LayoutValueTypes}" SelectedItem="{Binding SelectedType}"
                               Width="{Binding ElementName=cmbTag, Path=ActualWidth}" Height="70"&gt;
                          &lt;ListBox.ItemTemplate&gt;
                              &lt;DataTemplate&gt;
                                  &lt;TextBlock FontSize="12" Text="{Binding TypeName}" /&gt;
                              &lt;/DataTemplate&gt;
                          &lt;/ListBox.ItemTemplate&gt;
                      &lt;/ListBox&gt;
                  &lt;/StackPanel&gt;
                  &lt;StackPanel Orientation="Vertical"&gt;
                      &lt;StackPanel Orientation="Horizontal"&gt;
                          &lt;CheckBox Name="IsDesignMode" Content="Design Mode" TextBlock.FontSize="12"&gt;
                              &lt;i:Interaction.Triggers&gt;
                                  &lt;i:EventTrigger EventName="Checked"&gt;
                                      &lt;cal:ActionMessage MethodName="DesignModeOnOff"&gt;
                                          &lt;cal:Parameter Value="{Binding ElementName=webBrowser}" /&gt;
                                          &lt;cal:Parameter Value="{Binding IsDesignMode}" /&gt;
                                      &lt;/cal:ActionMessage&gt;
                                  &lt;/i:EventTrigger&gt;
                              &lt;/i:Interaction.Triggers&gt;
                          &lt;/CheckBox&gt;
                      &lt;/StackPanel&gt;
                      &lt;Button Name="PutComponent" Style="{StaticResource ButtonStyle}"
                           Content="Put" /&gt;
                      &lt;Button Name="SaveLayout" Style="{StaticResource ButtonStyle}"
                          Content="Save" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/StackPanel&gt;
          &lt;/DockPanel&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>