Flattening WebBrowser with ScatterViewItem

Question

I have a WebBrowser in a ScatterViewItem. There are also other ScatterViewItems in the ScatterView.

However, I noticed that the WebBrowser doesn't really seem to reside in the ScatterViewItem seemlessly. When I move another ScatterViewItem (containing an Image) over it, the image will appear behind the WebBrowser but in front of the ScatterViewItem holding the WebBrowser. This is the Z-Order:

1. WebBrowser
2. Image
3. Image's SVI
4. WebBrowser's SVI

Which would look very strange. How do I fix this so that when I move another ScatterViewItem over it, the ScatterViewItem I'm moving will be on top of the WebBrowser?

EDIT: I have screenshot the problem:

https://db.tt/AbnxlnF0

Answer 1

Don't use the WPF browser control. Using something based on Chromium such as the "Chromium Embedded Framework" or "Awesomium" which will render directly into the WPF visual rather than faking it poorly like the WebBrowser control does.

Btw... in Windows 8.1, modern "metro" apps have access to a new WebView control which does not suffer from the same suckage that WebBrowser has plagued the world with.

Answer 2

Fix the Height and width of the ScatterViewItem in which WebBrowser is placed.

The reason why it happens so is that, Wpf WebBrowser is a Wrapper of winforms webBrowser. Rendering engine always readers the WinForms controls over Wpf controls hence it happens.

If you don't know the exact height and width then use the Grid as below

<Window x:Class="WebBrwoser.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="Auto" Width="Auto">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="75*"/>
        <RowDefinition Height="25*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="75*"/>
        <ColumnDefinition Width="25*"/>
    </Grid.ColumnDefinitions>
    <WebBrowser Grid.Row="0" Grid.Column="0" Source="https://www.google.co.in"/>
    <StackPanel Grid.Column="1" Grid.Row="0">
        <Label Content="Web Browser will not hide me" Height="26" FontSize="15"/>
        <Label Content="Becaus i'm with in Grid. And it allocates the space for me" Height="26" FontSize="15"/>
    </StackPanel>
    <StackPanel Grid.Row="1">
        <Button Height="30" Width="200" Margin="10"/>
        <Button Height="30" Width="200" Margin="10"/>
        <Button Height="30" Width="200" Margin="10"/>
        <Button Height="30" Width="200" Margin="10"/>
    </StackPanel>
</Grid>
</Window>