1

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

Darren Ng
  • 373
  • 1
  • 5
  • 20

2 Answers2

1

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>
Vizel Leonid
  • 456
  • 7
  • 15
Kumareshan
  • 1,311
  • 8
  • 8
  • Sorry, what do you mean fix the height and width? So that it cannot be changed? Then won't it defeat the purpose of using a scatterviewitem, where the size is dynamic? – Darren Ng Nov 05 '13 at 02:07
  • In that case use the Grid and allocate space in percentage, so that it'll change according to the resizing of window. You have to do this with the web-Browser because of it's behavior, even i faced lot of problem like this with web-browser and did some thing similar. – Kumareshan Nov 05 '13 at 02:11
  • Actually, it's already in a grid. In my grid, there's 3 rows (*, 50, 50). The first row is the WebBrowser control, the 2nd row are SurfaceButtons. 3rd row is empty. Entire grid is in a ScatterViewItem. But the WebBrowser will still be always on top of every other ScatterViewItem (unless it's another SVI containing another WebBrowser, where the behavior will start to get weird). – Darren Ng Nov 05 '13 at 02:17
  • I think I understand what you are trying to say and I think you have misinterpreted the question. I don't have trouble organising controls within the ScatterViewItem itself, I have trouble when another completely different ScatterViewItem moves over this one (which contains the WebBrowser) in the ScatterView. Thanks for the effort though :D – Darren Ng Nov 05 '13 at 02:21
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.

Robert Levy
  • 28,747
  • 6
  • 62
  • 94