Rendering multiple WebView controls within a single WPF app in 64 bit mode

[dinoc]

If you setup a WPF app running against the 64 bit build of CefSharp, and you have 2 or more WebView controls in the main window, only 1 of the WebView controls will render output.

[perlun]

Hi,

Is this using CefSharp version 3? (the CefSharp3 branch)
If so, it should definitely be fixed.

[dinoc]

Yes it is using CefSharp3 branch

[perlun]

OK. Will take a look at it sometime.

[steel]

I think I'm running into this as well. The intended behavior is like a tabbed browser, however only the first webview gets rendered, other ones are not.

[dinoc]

I tested this on commit e973bdb on CefSharp3 branch.

Here are reproduction steps:

1. In configuration manager of the solution, set the Active solution platform to x64.

2. Replace MainWindow.xaml in CefSharp.WpfExample project with this

<Window x:Class="CefSharp.Wpf.Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        xmlns:example="clr-namespace:CefSharp.Example;assembly=CefSharp.Example"
        Title="CefSharp.Wpf.Example"
        WindowState="Maximized">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <ContentControl Grid.Row="0" x:Name="Content" />
        <ContentControl Grid.Row="1" x:Name="Content2" />
    </Grid>
</Window>

3. Replace MainWindow.xaml.cs in CefSharp.WpfExample project with this

using System.Windows;
using CefSharp.Wpf.Example.Views.Main;

namespace CefSharp.Wpf.Example
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var mainView = new MainView
            {
                DataContext = new MainViewModel()
            };

            Content.Content = mainView;

            var mainView2 = new MainView
            {
                DataContext = new MainViewModel()
            };

            Content2.Content = mainView2;
        }
    }
}

4. Set both browsers to different url's and click the Go button one right after the other. You'll notice that only one of the browsers works.

[damiga]

+1

Can really do great stuff if this is resolved!

[steel]

Any updates? Thanks!

[bradgessler]

If anybody is interested in contracting with Poll Everywhere (the company @steel and I are working for) to close this issue (and a few others) please email me brad at poll everywhere dot com.

[perlun]

@bradgessler You've got mail. 😄

(In general, I think it would be incredibly nice if we could get more people involved in the project also, doing actual coding.)

[JanEggers]

Hi,

if fixed that issue in a local working copy.

Im quite new to the open source process.

can i commit that changes or is there some kind of review process ?

the main issue was that webview cleans up code in unloaded Event but does not rebuild in loaded Event and does not set isOffscreenBrowserCreated to false when cleaning up and does not check it while accessing the browserwrapper ....

[jornh]

@JanEggers the way you can do it is:

1. You create your own Fork of the cefsharp/CefSharp repository (button at the top of the page). You then get your own like I have mine at https://github.com/jornh/CefSharp.
2. You commit the change to your own fork (clone it to your desktop, add your modification, commit).
3. On the webpage for your own fork there is a button to create a Pull Request

More details at https://help.github.com/articles/fork-a-repo

[JanEggers]

thx for the info jornh.

i tested a bit more and run into Problems again.

if i use a tabview each tab containing a browser it works fine.

if i place them in a grid only one works and for the others i see exceptions in Event log.

System.ServiceModel.AddressAlreadyInUseException
SubprocessCefApp.OnBrowserCreated

the javascriptproxy adress is not unique if i remove the creation of that host it works fine.

ill create a fork on monday and commit my changes.

have a nice weekend

[jornh]

@dinoc, @damiga, @steel & @bradgessler:
It would be great if you would help verify the fix in PR #258 that @JanEggers just made

[perlun]

@JanEggers, I've now (finally!) reviewed the #258 change you did to fix this issue. It's mostly good, but I don't think the Loading/Unloading event approach is 100% reliable.

Take a look at the code I just pushed (to the CefSharp3 branch). It changes the WPF example a bit, so that we instead of having multiple browsers in one tab have one browser per tab (i.e. like any normal web browser these days). There are a couple of problems now:

1. The tabs doesn't load until you click them. That's not a problem with your code, but more a problem with the TabControl in WPF...
2. Bigger problem though, is that whenever you switch tabs, the web page reloads. This is because we get a Loaded event. So, I don't think we can rely on Loading/Unloaded like you've done until now, since it makes it impossible to use the WebView in a reasonable way from a TabControl.

Do you have any ideas of how we can solve that?

[JanEggers]

yep that is no problemo we just need to use WebViews directly without any ContentControls i will do that in another pr

[pkapustin]

Great news and work guys!
What's the latest status of this? Is it possible to host several WebViews in the same WPF window already?

Is there any place to get the binaries from, or I have to build it from source?
For building, I can't use VS2013 for that, right?

[perlun]

@badbadboy, I'd say that it works quite well, from what I could tell (but there are some final tweaks I want to do before closing the issue completely). Please give it a try yourself. For now, no binaries are available (will hopefully be fixed quite soon) but you can build yourself using VS2010 or VS2012. VS2013 will be supported once #250 and #237 are done.

[jornh]

@badbadboy with #288 merged into the master branch you can build with VS2013 now.

Note: #288 gave us a dependency on that you must have NuGet on your machine and do a NuGet update to fetch the native cef.sdk and cef.redist replacing what used to live in the CEF/ folder.

[jornh]

Hey this got fixed 2 months ago: #212 (reference) but was never closed it seems. Let's do that!

[TheCloudlessSky]

I'm using the latest Nuget release (31.0.0-pre1) and this is still broken. I created a simple ItemsControl:

<ItemsControl>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Address}" />
                <cefSharp:WebView Address="{Binding Address}" Width="100" Height="100" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Are the Nuget binaries up to date with the source that fixed it?

[amaitland]

I'm using the latest Nuget release (31.0.0-pre1) and this is still broken. I created a simple

@TheCloudlessSky Can you elaborate past it's broken? The Wpf.Example demos using CefSharp3 in a tabbed environment. A lot of work has been done since 31.0.0-pre1 was packaged, is there any chance you can test again with a build of master and see if the problem persists?

[TheCloudlessSky]

@amaitland Broken means that it's the exact behavior described by @dinoc. Like I said, the source that fixed this issue is in master. I asked if the Nuget binaries are up to date with the latest source. And if not, why not? Does the project not have CI setup for releases? The preferred approach (according to the README) is to use the pre-release package on Nuget. If a lot of work has gone on since the last Nuget release, how come a new release hasn't been made (especially when there is a pretty serious bug such as this one)?

I can definitely confirm that it's working if I build from master.

[amaitland]

@TheCloudlessSky I can see your frustrated, I do think it's important to remember this is an open source project, with a relatively small number of active contributors. Perhaps you'd like to take a second go at your previous comment?

[WolfieWerewolf]

I know this is an old thread, but I've stumbled across it two or three times whilst researching similar issues so I thought I would contribute. First I just have to say well done to the developers of this project. You've massively improved my quality of life at my desk on my current project. Thank you!

The previous comment about the issue with the tabs needing to be "clicked" in order to load is correct; this is not an issue with CefSharp at all, it's entirely to do with the way the TabView is designed. This is apparently not a bug but by design (as someone else has already said). I found an excellent approach to pre-loading tabs here: http://xcalibursystems.com/2012/07/make-your-tabcontrol-preload-in-wpf-silverlight/

It looks like it's for an older framework so a little adjustment is required. In particular, items.Last() doesn't seem to exist anymore so...

// Update if not the last tab
if (tabItem != tabControl.Items.Last())
{

can be changed to
var count = tabControl.Items.Count-1;
if (tabItem.TabIndex < count)

and it works.

The other issue that I encountered which was mentioned here is the inability to load more than one browser control in the same view. I played with this for a bit and managed to achieve it by placing one of the controls in a GroupBox like so. I've sliced and diced this out of a very large View so please forgive me if the tags don't all align but this is the general idea. A DockPanel as the main content and a grid inside the dockpanel docked somewhere (bottom in my case) with a nested groupbox that contains the second instance of the webbrowser. I wanted to embed the VMWare Scripted JavaScript editor in each tab of the browser so that's how I did it. I tried to add the Xaml to this message but the editor isn't having it.. if anyone wants sample code just email me. [email protected].

I'm using the most recent sources from GitHub as of two days ago. This thing works incredibly well and incredibly fast.

[amaitland]

I tried to add the Xaml to this message but the editor isn't having it.

@WolfieWerewolf How about posting as a Gist? (Which is preferable than posting a large code block in an issue)

https://gist.github.com/

[WolfieWerewolf]

Sure.. I'll extract the relevant bits from my VM and put one together in the morning.

[WolfieWerewolf]

That was easier than I thought. I just modified the existing sample to make it easy for everyone.

https://gist.github.com/WolfieWerewolf/2f3453d25942a0ceb8ef

Enjoy!

[amaitland]

Cool, thanks 👍

[WolfieWerewolf]

No problem... something else that's cool is this thing I found on codeproject. http://www.codeproject.com/Articles/34377/DockPanel-Splitter-Control-for-WPF

Since I had to put these in a DockPanel I couldn't use the grid splitter. This thing works very well. Just stick in in between the Closing Grid tag under the status bar and above the main ChromiumWebBrowser.

/W