WPF: InkCanvas + Frame

Question

I need to draw over the html page. Page displayed in a Frame element. The problem is that InkCanvas does not work with Frame. I tried to insert TextBlock instead of Frame - painting works.

Does not work:

<Frame Grid.Row="1" Source="http://google.com/"&gt;&lt;/Frame&gt;
<InkCanvas Grid.Row="1" x:Name="inkCanvas" Background="Transparent"></InkCanvas>

Work:

<TextBlock Grid.Row="1" Margin="10" Text="Some text"></TextBlock>
<InkCanvas Grid.Row="1" x:Name="inkCanvas" Background="Transparent"></InkCanvas>

Answer 1

When the Frame control navigates to HTML content, the Frame control internally instantiates the native WebBrowser ActiveX control. This involves HWND interop. As a result of that the "airspace proplem" comes into play. It basically means that no WPF content can overlap that AcitveX HWND. You can partly work around this propblem by wrapping the overlay into another HWND (e.g. using Winfows Forms and ElementHost). But this solution will not allow you to have transparency in the overlay.

Another trick you could try is to use the WindowsFormsHost to host the Windows Forms Browser Control instead of using a Frame.

Last but not least you could use the Chromium WPF Webbrowser Control instead of the Frame control if you can afford it. It is based on the Awesomium library. Which unfortunately is only free for non commercial use. This is the only solution that allows you to use all the advanced WPF goodies like transformation (rotation, skew etc.), bitmapeffects or transparency etc. Width the other two solutions you are bound to a fixed opaque rectangle.