CefSharpのChromiumWebBrowserでZoomを実装したい（Winforms)

Question

タイトル通り、Chromiumブラウザに対して画面の拡大、縮小を実装したいのですが、できずに苦戦しております。

ソースコードは以下のサイトから拾ってきたものを試しました。

参考サイト
https://ja.ojit.com/so/wpf/1456010

しかしながら、画像の通りkeyなどでエラーが多発し、電球マークに提案される内容でいろいろ変更を試しましたが、エラーが消えることはなく、Zoomできずにいます。

うまくいかないソースコートはこちらです。

private void OnPreviewKeyUp(object sender, KeyEventArgs e)
{
    if (e.Key == Key.RightCtrl || e.Key == Key.LeftCtrl)
    {
        isControlKeyPressed = false;
    }
}

private void OnKPreviewKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.RightCtrl || e.Key == Key.LeftCtrl)
    {
        isControlKeyPressed = true;
    }
}

private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    if (isControlKeyPressed)
    {
        if (e.Delta > 0 && browser.ZoomLevel <= maxZoomLevel)
        {
            browser.ZoomInCommand.Execute(null);
        }
        else if (e.Delta < 0 && browser.ZoomLevel >= minZoomLevel)
        {
            browser.ZoomOutCommand.Execute(null);
        }
    }
}

目的は通常のChromeのようにCTRL+マウスホイールで画面の拡大・縮小ができるようになることなのです。

ソース内のbrowser.ZoomLevel等のbrowserの部分は自分の指定したブラウザ名になりそうですが、それ以外の大部分でエラーが解決できないため、ご存じの方がおりましたらご教示いただけますと幸いです。

よろしくお願いします。

Answer 1

ちょっと試してみたのですが、フォームでやるのはかなり大変そうです。

CefSharp.Wpfでは簡単に実現できましたが、CefSharp.WinFormsのほうは同様にやろうとしてもそもそものイベントが来ない状態でした。

おそらくこれが答えだと思いますが、私もちょっとわかりません^^;
chromium embedded - Allow user to zoom with mousewheel using the cefsharp browser - Stack Overflow

それ以外の方法としては

• WPFに移行
  なかなかハードルが高いか？^^;
• ElementHostでCefSharp.Wpf.ChromiumWebBrowserをホスト
  バカバカしいが簡単にテストした限り動いた
• WebView2を使う
  何もしないでもズームに対応していた

このどれかでよければミニマムサンプルは提示可能です。

---

参考
WPFコントロールをWindowsフォームに配置する - .NET Tips (VB.NET,C#...)

WebView2 for WinForms アプリの概要 - Microsoft Edge Development | Microsoft Docs

---

追記 ElementHostミニマムサンプル

参考ページの通りに参照の追加をします。
NuGetでCefSharp.Wpfのほうを入れます。

using System;
using System.Diagnostics;
using System.Windows.Forms;
using System.Windows.Forms.Integration;

namespace Questions316976
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            Load += Form1_Load;
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            var browser = new CefSharp.Wpf.ChromiumWebBrowser("www.google.com");
            browser.PreviewMouseWheel += Browser_PreviewMouseWheel;

            var elementHost = new ElementHost
            {
                Child = browser,
                Dock = DockStyle.Fill,
            };
            Controls.Add(elementHost);
        }

        private void Browser_PreviewMouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
        {
            if (sender is CefSharp.Wpf.ChromiumWebBrowser browser)
            {
                if ((System.Windows.Input.Keyboard.Modifiers & System.Windows.Input.ModifierKeys.Control) == System.Windows.Input.ModifierKeys.Control)
                {
                    if (0 < e.Delta) browser.ZoomInCommand.Execute(null);
                    else browser.ZoomOutCommand.Execute(null);

                    Debug.WriteLine(browser.ZoomLevel);
                }
            }
        }
    }
}

Comments

[neji-thon]

ありがとうございます。
＞ElementHostでCefSharp.Wpf.ChromiumWebBrowserをホスト
Winforms側でのソースコードも増えてきてるので、部分的にWPFを呼び出す？ようなこちらがいいのかもしれません。

お手数ですが、ご教示いただいてよろしいでしょうか。
参考サイトなど見ながらちょっと勉強しにいってきます。

[TN8001]

追記しました^^

[neji-thon]

ありがとうございます！

早速いただいたコードと参照の追加をして、実行したときに画面上部にWinformsの時にはなかったバー？のようなものが出てきてるのでWPFはできてると思うのですが、ブラウザはCTRLがうまく噛んでないというか、マウスのホイールをくるくるしても、上下にスクロールするだけでズームできない状態です。

シンプルに一からプロジェクト作成した場合どうなるかとかやろうと思いますので少々お時間いただきそうです。。

ちなみに、そもそも自分の勉強不足で恐縮ですが、WinformsにはブラウザがIE6のものしかないと思って、CefSharp導入したのですが、WebView2の方がMicrosoft製のものとして最近出ていて、Visual studioとの親和性も高くなってきそうだから、WebView2のブラウザで構築しなおした方が今後、よさそうな感じなんでしょうか？

今のうちに乗り換えようかしら？とも思い始めています。

[neji-thon]

今のうちとか今後とかは自分判断ですね。失礼しました。
調べた限り、WebView2にしたいと思い始めております。
今夜にでもWebView2採用するか確認してみます。

[TN8001]

>マウスのホイールをくるくるしても、上下にスクロールするだけでズームできない状態です。

Browser_PreviewMouseWheel自体呼ばれていないということでしょうかね？
CefSharpのセットアップ法等にもよるのかもしれません？？（手元では面倒だったのでx86ビルドで試しました）

>シンプルに一からプロジェクト作成した場合どうなるかとかやろうと思いますので少々お時間いただきそうです。。

**私は**全然急いでいませんので大丈夫です^^;

>WebView2の方がMicrosoft製のものとして最近出ていて、Visual studioとの親和性も高くなってきそうだから、WebView2のブラウザで構築しなおした方が今後、よさそうな感じなんでしょうか？

サポートされているプラットフォーム等に問題がなければ、新規開発でWebView2を採用しない理由はないと思います。
もう読んでおられるでしょうが、↓周辺を一通り確認してください。

[Microsoft Edge WebView2 control - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/#next-steps

置き換えるかはCefSharpとコンパチというわけでもないので、既存コード量にもよるでしょう。

とはいえまだ新しいため、情報が全くないのが辛いところです^^;

[TN8001]

WebView2公式サンプル
[WebView2Samples/SampleApps/WebView2WindowsFormsBrowser at master · MicrosoftEdge/WebView2Samples](https://github.com/MicrosoftEdge/WebView2Samples/tree/master/SampleApps/WebView2WindowsFormsBrowser

[neji-thon]

WebView2 めっちゃ簡単ですね！
インストールしてランタイムがあれば動きました。
ZoomどころかCTRL+Fとかデベロッパーツールまで。。容量も少ないしChromiumからの乗り換えを決めました。

ありがとうございます。

Answer 2

参考サイトはWpfのようですが、WindowsFormsとは細かい所で互換性が無いので、WpfのソースをそのままWindowsFormsに持ってきても使えないと思います。クラスリファレンスを見ながら、対応する定数やプロパティを探して地道に置き換えるしかないのではないでしょうか。

Comments

[neji-thon]

radianさん早速ご提案ありがとうございます。
まだWPFとWinformsの違いが分かってないのですが、ソースコードを見る限り、Winformsのものかと思って試してみていた次第です。

やはり地道にやるしかないですかね。引き続きいろいろ試してみますが、どなたか知ってたら教えていただきたいほど、着地が遠そうだな。。と感じています。。