WPF WebBrowser (3.5 SP1) Always on top - other suggestion to display HTML in WPF

Question

Hello,

I've been desperately looking for an easy way to display HTML in a WPF-application. There are some options:
1) use the WPF WebBrowser Control
2) use the Frame Control
3) use a third-party control

but, i've ran into the following problems: 1) the WPF WebBrowser Control is not real WPF (it is a Winforms control wrapped in WPF). I have found a way to create a wrapper for this and use DependencyProperties to navigate to HTML text with bindings and propertychanged. The problem with this is, if you put a Winforms control in WPF scrollviewer, it doesnt respect z-index, meaning the winform is always on top of other WPF control. This is very annoying, and I have tried to work around it by creating a WindowsFormsHost that hosts an ElemenHost etc.. but this completely breaks my binding obviously.

2) Frame Control has the same problems with displaying if it shows HTML content. Not an option.

3) I haven't found a native HTML-display for WPF. All options are winforms, and with the above mentioned problems.

the only way out I have at the moment is using Microsoft's buggy HtmlToXamlConverter, which crashes hard sometimes. (MSDN)

Does anybody have any other suggestions on how to display HTLM in WPF, without these issues?

sorry for the long question, hope anyone knows what i'm talking about...

Answer 1

If you can't use WebBrowser, your best bet is to probably rewrite your HTML content into a FlowDocument (if you're using static HTML content).

Otherwise, as you mention, you kind of have to special-case WebBrowser, you're right that it doesn't act like a "real" WPF control. You should probably create a ViewModel object that you can bind to that represents the WebBrowser control where you can hide all of the ugly non-binding code in one place, then never open it again :)

Answer 2

Another approach to working round the z-index limitation is to use a popup to overlay your WPF components over the HTML See http://karlshifflett.wordpress.com/2009/06/13/wpf-float-buttons-over-web-browser-control/ Note code below is taken straight from the link

<Grid>
  <WebBrowser x:Name="wbBrowser" />

  <Popup x:Name="puOverlay" AllowsTransparency="True" Placement="Bottom"
         PlacementTarget="{Binding ElementName=wbBrowser}">
    <Border x:Name="bdrOverLay" CornerRadius="30" BorderBrush="Blue"
            Background="#1F000000" Padding="7" BorderThickness="2">

      <StackPanel Orientation="Horizontal">
        <StackPanel.Resources>
          <Style TargetType="{x:Type Button}">
            <Setter Property="Width" Value="75" />
            <Setter Property="Margin" Value="3.5" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
          </Style>
        </StackPanel.Resources>
        <Button Command="NavigationCommands.BrowseBack" Content="Back" />
        <Button Command="NavigationCommands.BrowseForward" Content="Forward" />
        <Button Command="NavigationCommands.BrowseHome" Content="Home" />
        <Button Command="ApplicationCommands.Close" Content="Exit" />
      </StackPanel>

    </Border>
  </Popup>
</Grid>

Alternativly there is a 3rd party control that takes Win32 controls and renders them (as bit maps) into WPF http://www.codeplex.com/WPFWin32Renderer

Answer 3

have you tried the Awesomium? please refer to : http://chriscavanagh.wordpress.com/2009/08/25/a-real-wpf-webbrowser/

Answer 4

This does not work. Microsoft sucks!