CefSharpで黒い余白が発生し、内部の位置がズレてしまう問題の解決方法
以下の記事を作っている時に、想定していない不具合があった。
仕事では発生していなかったため、たぶんディスプレイの問題か、選択したプロジェクトが影響しているかと推測した。
ただ、chromeでページを開いてみると正常に表示されているので、選択したプロジェクトが影響という推測は正しくないと判断した。
っで、残るはディスプレイの設定かなと判断して調べていくことにした。
事象
ページの左部と上部に黒い余白が発生した。
しかも、マウスをボタンやリンクにもっていっても、クリックできない状態でした。要は、位置がずれている状態でした。
解決方法
Cef.EnableHighDPISupport()
をCef.Initialize()
の前に記述すると解消されるとググった結果わかった。
コードでいうと、解消前のコードがこれ
using CefSharp;
using CefSharp.WinForms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace CefSharpCallFromJavaScript
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
InitializeChromium();
}
private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
Cef.Shutdown();
}
private ChromiumWebBrowser _browser;
public void InitializeChromium()
{
CefSharpSettings.LegacyJavascriptBindingEnabled = true;
CefSettings settings = new CefSettings();
// Initialize cef with the provided settings
Cef.Initialize(settings);
// Create a browser component
_browser = new ChromiumWebBrowser("https://localhost:44315/");
// Add it to the form and fill it to the form window.
Controls.Add(_browser);
_browser.Dock = DockStyle.Fill;
}
}
}
上記ソースコードのInitializeChromium
メソッドの中で、ChromiumWebBrowser
の設定をしている。
修正は、 Cef.EnableHighDPISupport()
を入れるだけなので非常に簡単です。一部抜粋したコードが以下
public void InitializeChromium()
{
CefSharpSettings.LegacyJavascriptBindingEnabled = true;
CefSettings settings = new CefSettings();
// これを入れないと黒い余白が発生していまう。
Cef.EnableHighDPISupport();
// Initialize cef with the provided settings
Cef.Initialize(settings);
Cef.EnableHiighDPISupport()とは
名前からしてDPIのサポートをしてくれるんだろうなというのは分かる。
でも一応公式のメソッドの説明を読んでみた。
プロセスの起動中に呼び出して、Windows 7以降でHigh-DPIサポートを有効にします。Windowsの古いバージョンは、DirectWriteをサポートしておらず、GDIフォントが非常にひどくカーニングされているため、DPIを認識しないままにしておく必要があります。
http://cefsharp.github.io/api/67.0.0/html/M_CefSharp_Cef_EnableHighDPISupport.htm
そもそも高DPIとは何?という場合は、こちらを参考にするかググってください。
上記引用を見ると、 Windows 7 以前のOSバージョンの場合は、Cef.EnableHiighDPISupport()を入れることで逆に問題になるかも?
Windows 7 すらサポートが切れるのに、それ以前のOSなんてどこも使ってないだろうと思うだろうけど、業務系で現地端末がVistaとか余裕でまだある。
なので、仮に上記問題が発生したら、OSバージョン取得して、 Cef.EnableHiighDPISupport() を適応するか分岐しないといけないかもしれない。
或いは、.NETのバージョンによっては、WinFormsの高DPIが効いていないこともあるので、その場合は.NETのバージョン次第で処理を入れたりということになるのかもしれない。
ディスカッション
コメント一覧
まだ、コメントがありません