基于CefSharp开发浏览器（十一）增添F11、F12功能

一、前言

最近，一位朋友提出希望完善F11和12功能，因此在这篇文章中，我将分享F11全屏和F12开发者工具的思路以及代码，做个记录的同时也希望对cefsharp开发感兴趣的朋友提供一些思路。

二、WPF使用CefSharp.Winform带来的问题

上文提到，为了更好的使用输入法，我将项目中的CefSharp.WPF转为了CefSharp.WinForms，通过WindowsFormsHost来承载CefSharp.WinForms

现在CefSharp的版本为：

<PackageReference Include="CefSharp.WinForms.NETCore" Version="120.1.110" />

同时带来一些问题

1、AllowsTransparency属性不能用

AllowsTransparency只能设置为fasle否则WindowsFormsHost将不可见

可能的原因是Windows Forms本身并不直接支持透明度的特性，而WPF窗体的透明度是通过更先进的图形系统实现的。

因此，当启用WPF窗体的透明度时，可能会导致与Windows Forms控件的嵌入和交互方面的问题，从而使WindowsFormsHost不可用或出现异常。

2、键盘事件和鼠标事件不起作用

当Windows Forms控件在WindowsFormsHost中获得焦点时，WPF的键盘事件可能不会直接传递给嵌入的Windows Forms控件。

为了解决这些问题，需要编写一些额外的代码来将键盘和鼠标事件

三、使用Win32 API拦截和处理特定窗口消息

以下为处理窗口信息的代码，部分代码来源于官方示例

        [return: MarshalAs(UnmanagedType.Bool)]
        [DllImport("user32.dll", SetLastError = true)]
        private static extern bool PostMessage(IntPtr hWnd, uint Msg, IntPtr wParam, IntPtr lParam);
        private void SetupMessageInterceptor()
        {
            if (messageInterceptor != null)
            {
                messageInterceptor.ReleaseHandle();
                messageInterceptor = null;
            }
            Task.Run(async () =>
            {
                try
                {
                    while (true)
                    {
                        IntPtr chromeWidgetHostHandle;
                        if (ChromiumRenderWidgetHandleFinder.TryFindHandle(this, out chromeWidgetHostHandle))
                        {
                            messageInterceptor = new ChromiumWidgetNativeWindow(this, chromeWidgetHostHandle);
                            messageInterceptor.OnWndProc(message =>
                            {
                                const int WM_MOUSEACTIVATE = 0x0021;
                                const int WM_NCLBUTTONDOWN = 0x00A1;
                                const int WM_DESTROY = 0x0002;
                                const int WM_MOUSEWHEEL = 0x020A;

                                // Render process switch happened, need to find the new handle
                                if (message.Msg == WM_DESTROY)
                                {
                                    SetupMessageInterceptor();
                                    return false;
                                }

                                if (message.Msg == WM_MOUSEACTIVATE)
                                {
                                    var topLevelWindowHandle = message.WParam;
                                    PostMessage(topLevelWindowHandle, WM_NCLBUTTONDOWN, IntPtr.Zero, IntPtr.Zero);
                                }

                                if(message.Msg == WM_MOUSEWHEEL)
                                {
                                    int rawDelta = (int)message.WParam.ToInt64();
                                    int delta = rawDelta >> 16;
                                    MouseWheelEvent?.Invoke(delta);
                                }
                                return false;
                            });

                            break;
                        }
                        else
                        {
                            await Task.Delay(10);
                        }
                    }
                }
                catch
                {
                }
            });
        }

View Code

WM_MOUSEACTIVATE 消息，它模拟在非客户区按下鼠标左键的操作。
WM_DESTROY 消息，说明窗口即将被销毁，它调用 SetupMessageInterceptor 方法重新设置消息拦截器。
WM_MOUSEWHEEL 消息，它触发一个事件 (MouseWheelEvent)，传递鼠标滚轮的滚动量。

WM_MOUSEWHEEL 为处理浏览器网页缩放的消息，这里增加了MouseWheelEvent当有WM_MOUSEWHEEL 时

触发MouseWheelEvent来处理浏览器缩放，浏览器缩放可以参考基于CefSharp开发浏览器（六）浏览器网页缩放

四、使用KeyboardHandler处理键盘事件

    public class CustomKeyboardHandler: KeyboardHandler
    {
        public Action<int> KeyboardCallBack;
        protected override bool OnKeyEvent(IWebBrowser chromiumWebBrowser, IBrowser browser, KeyType type, int windowsKeyCode, int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey)
        {
            if (chromiumWebBrowser.IsBrowserInitialized)
            {
                KeyboardCallBack?.Invoke(windowsKeyCode);
            }
            return base.OnKeyEvent(chromiumWebBrowser, browser, type, windowsKeyCode, nativeKeyCode, modifiers, isSystemKey);
        }
    }

    public class CustomWebBrowser : ChromiumWebBrowser
    {
        public CustomWebBrowser()
        {
            this.KeyboardHandler = new CustomKeyboardHandler();
        }
    }

使用KeyboardHandler的OnKeyEvent方法处理键盘事件如F5，F11，F12等

五、F11全屏

由于程序的主体为一个自定义的TabControl进行的网页多开，直接处理TabControl令其全屏比较麻烦，

这里采用当按下F11时弹出一个WPF窗体来承载现有的CefSharp控件，当按下F11时，获取当前tab页的cefsharp控件，并将其填充到F11窗体中，

再次按下F11时将cefsharp控件从新填充到tab页中，这样可以保证全屏和非全屏状态下使用的是同一个cefsharp实例。

窗体定义如下：

<Window x:Class="MWebBrowser.View.F11Window"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="F11Window" Height="450" Width="800"
        WindowState="Maximized"
        WindowStyle="None">
    <Grid x:Name="Parent">
       
    </Grid>
</Window>

    public partial class F11Window : Window
    {
        public WindowsFormsHost WebFormsHost { get; }
        public F11Window()
        {
            InitializeComponent();
            WebFormsHost = new WindowsFormsHost();
            InitData();
        }

        private void InitData()
        {
            Parent.Children.Add(WebFormsHost);
        }
    }

F11 处理代码如下：

        public static void F11(BrowserUserControl browserUserControl, WindowsFormsHost orgWebFormsHost)
        {
            DispatcherHelper.UIDispatcher.Invoke(() =>
            {
                if (f11Window != null)
                {
                    ExitFullscreen(browserUserControl, orgWebFormsHost);
                }
                else
                {
                    EnterFullscreen(browserUserControl, orgWebFormsHost);
                }
            });
        }

        private static void EnterFullscreen(BrowserUserControl browserUserControl, WindowsFormsHost orgWebFormsHost)
        {
            originalBounds = new Rect(
                browserUserControl.CefWebBrowser.Margin.Left,
                browserUserControl.CefWebBrowser.Margin.Top,
                browserUserControl.CefWebBrowser.Width,
                browserUserControl.CefWebBrowser.Height
                );
            f11Window = new F11Window();
            orgWebFormsHost.Child.Controls.Remove(browserUserControl);
            f11Window.WebFormsHost.Child = browserUserControl;
            f11Window.Show();
            Application.Current.MainWindow.Hide();
        }

        private static void ExitFullscreen(BrowserUserControl browserUserControl, WindowsFormsHost orgWebFormsHost)
        {
            f11Window.WebFormsHost.Child.Controls.Remove(browserUserControl);
            orgWebFormsHost.Child = browserUserControl;
            f11Window.Close();
            f11Window = null;
            Application.Current.MainWindow.Show();
        }

六、F12开发者工具

CefSharp提供了两种开发者工具展示方式

1、ShowDevTools

这种直接弹出一个新窗口

2、ShowDevToolsDocked

这种方式将DevTools控件嵌入到Winform的SplitContainer中，代码如下：

public void ShowDevToolsDocked()
{
    this.Invoke(() =>
    {
        if (browserSplitContainer.Panel2Collapsed)
        {
            browserSplitContainer.Panel2Collapsed = false;
        }
        Control devToolsControl = GetDevToolsControl();
        if (devToolsControl == null || devToolsControl.IsDisposed)
        {
            CefWebBrowser.ShowDevToolsDocked(browserSplitContainer.Panel2, nameof(devToolsControl), DockStyle.Fill);
        }
    });
}