Using WebView2 with tab control

[ajtruckle]

At the moment I have a tab control bar and one browser control independent of the tab control.

Based on selected tab I render different data in the browser control.

I would like to know if it is a bad idea to have one webview2 per tab page as a child. I have at most 5 tabs.

I would like advice please, because until now I only have one instance.

Win32

[mikeduglas]

I have a webbrowser-like app with multiple webviews sharing the same location on the window, a tab control selection hides all webviews except one. But should say that I use a quite specific environment: WinForms dll in Clarion exe (Clarion is a win32 language and IDE).

[ajtruckle]

@mikeduglas
Thanks for your feedback.

[sivMSFT]

Hi @ajtruckle,

Using one WebView2 instance per tab can be effective for better isolation and control, especially with up to 5 tabs. Create a WebView2 instance for each tab and handle the NewWindowRequested event to manage new window requests efficiently.

[ajtruckle]

@sivMSFT

Thanks for the input. I don't need to handle NewWindowRequested because for each browser I have a single document.

But the problem I am having is using these browser controls inside TabCtrl. See:

baradzenka/TabCtrl#16

The TabCtrl suites the needs of my application. But, the browser controls must be children of the tab control. Under normal circumstances you just pass the m_tabCtrl as the parent instead of this when creating the control. That, and each control having a unique id.

I think I can get the first control created but the second two fail.

[ajtruckle]

I made progress. But when I click the second tab all I see is a white rectangle and not the url I asked it to navigate to.

[ajtruckle]

I might have it working. I added:

void CWebBrowser::ShowBrowser(const bool bShow)
{
	if (m_pImpl)
	{
		m_pImpl->m_webController->put_IsVisible(bShow);
	}
}

And testing:

void CDatabaseReportViewerDlg::OnTabSelected(TabCtrl* ctrl, TabCtrl::HTAB tab)
{
	const int nActiveTab = ctrl->GetTabIndexByHandle(tab);
	switch (nActiveTab)
	{
	case 0:
		m_dlgBrowser1.m_pWebBrowser->ShowBrowser(true);
		m_dlgBrowser2.m_pWebBrowser->ShowBrowser(false);
		m_dlgBrowser3.m_pWebBrowser->ShowBrowser(false);
		break;
	case 1:
		m_dlgBrowser1.m_pWebBrowser->ShowBrowser(false);
		m_dlgBrowser2.m_pWebBrowser->ShowBrowser(true);
		m_dlgBrowser3.m_pWebBrowser->ShowBrowser(false);
		m_dlgBrowser2.m_pWebBrowser->Navigate(L"https://www.microsoft.com", nullptr);
		break;
	case 2:
		m_dlgBrowser1.m_pWebBrowser->ShowBrowser(false);
		m_dlgBrowser2.m_pWebBrowser->ShowBrowser(false);
		m_dlgBrowser3.m_pWebBrowser->ShowBrowser(true);
		m_dlgBrowser3.m_pWebBrowser->Navigate(L"https://www.codeproject.com", nullptr);
		break;
	}
}

Let me me continue.

[ajtruckle]

I have it working. I need to tidy up the code now.

The only other aspect with this dialog is that for the large icons, I re-use my main toolbar resource and only need to use 3 of the icons in that toolbar. Can we do that?