Make WPF control over the web browser

Question

I have a WPF application in which I have an embedded web browser control. I want to show an animation over the web browser at a certain time, but the problem is that the WPF controls, when kept over the web browser are not visible.

Is there any way to show my user control over the web browser?

Answer 1

Please answer me this first,

Is this Web Browser control the WPF Web Browser Control or Winform webbrowser control hosted in WinFormHost?

For any WPF control to show animation over it, did you explore ...

1. Placing your control in Grid or Canvas and then placing an stretched Border (which has running animation in it) as the last child of the grid/canvas?
2. Adorner with constantly changing drawing context to simulate animations?
3. Transparent Popup with animation, whose static placement is done (bound to control's absolute left, top positions and actual height & width properties) over the control?

Try the transparent popup approach for web browser control ...

    <Grid>
        <WebBrowser x:Name="WebBrowser1"/> 
        <Popup IsOpen="{Binding StartAninmation}"
              AllowsTransparency="True"
              Grid.RowSpan="99"
              Grid.ColumnSpan="99"
              Placement="Center"
              Width="{Binding ActualWidth,
                              ElementName=WebBrowser1,
                              Mode=OneWay}"
              Height="{Binding ActualHeight, 
                               ElementName=WebBrowser1,
                               Mode=OneWay}"
              PlacementTarget="{Binding ElementName=WebBrowser1}"
              Opacity="0.5"
              Margin="3">
           <TextBlock Text="Loading ..."/>
       </Popup>
 </Grid>

One of these will surely work in your case.

Answer 2

Unfortunately thats not possible with the WPF Webbrowser Control (which is basically a wrapped WinForms WebBrowser control), due to the order the OS renders WinForms and WPF content.

See also: Is there a way to render WPF controls on top of the wpf WebBrowser control?

There's a third party app Awsomium that should make it possible.

Edit: Another possibility would be to render a frameless window above the WebBrowser Control. But it's a bit tricky to keep it in the correct position/z-order.

Answer 3

CefSharp provides a pure WPF browser contorl based on Chromium/V8 that isn't subject to the airspace issues of the Microsoft WebBrowser control (disclaimer: I am the maintainer of CefSharp).