WebBrowser上的MediaElement

Question

I have WPF Application with this Grid :

    <Grid Name="MiddleGrid" Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

        <WebBrowser Name="Browser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" />
        <MediaElement Name="Media" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" LoadedBehavior="Manual" UnloadedBehavior="Stop"/>
    </Grid>

And i want to make the MediaElement control to be over the Browser. Any help how i should do it?

Answer 1

This is a problem with how the web browser control is implemented, and you'll see the same thing if you try to embed Windows Forms controls in a WPF control as well. Things which are not native WPF ( WebBrowser is provided by the IE rendering engine, with a WPF wrapper) don't participate in WPF compositing - they're child windows, not WPF controls which participate in the WPF rendering stack. The way child windows are rendered is that WPF figures out what area they should occupy, tells them about it and off they go. What WPF doesn't attempt to do is draw any WPF controls on top of it, because they can't participate in compositing with the contents of the child window underneath.

There's some information around about WPF 4.5 solving this problem (it's called "airspace") but it looks like Microsoft took that out of the final release for some reason (guessing it wasn't ready, since it's a horrendously complicated thing to do if you consider all the stuff WPF can do with render transforms, layout transforms, visual brushes and the like).