Issues with Windows mutli-DPI scaling and Office COM add-in panes and forms
In this blog, I describe issues (and research possible ways out) relating to multiple displays having different DPI settings on an example of an Office COM add-in with an Add-in Express pane, Office custom task pane, and Windows.Forms controls. The sample project is for Excel, but you’ll find the same issues in Word, Outlook and PowerPoint.
Quite often these days you see this configuration: a notebook and an external display or two connected to the notebook. All these displays may have different DPIs. This is a typical environment where the DPI-related issues reveal themselves.
Microsoft describes the issues as follows:
- Elements such as icons, toolbars, text, and dialog boxes appear to be fuzzy.
- Elements are too large or too small compared to the rest of the desktop.
You may also get these issues on a single monitor although they’re more common when you use multiple monitors.
There may be several scenarios in which the issues commonly occur. Here I only review this scenario:
You have two monitors of different display resolution. You start Excel and its window is shown on display A; the add-in shows a custom task pane and Add-in Express pane. You move the Excel window to another display B. Then you move the window back.
In my tests, display A is a 96-DPI monitor and display B is a 192-DPI monitor. You may have other DPI values. Whether your display is Full HD or 4K does not matter. DPI is what matters.
When testing this scenario on your add-in project, you should be aware that the issues also depend on which display is set as primary; see {the Start menu} | Windows Settings | System | Display.
My test project is a .NET Framework 4.0 add-in supporting Excel. I’ve developed it on a monitor having 96 DPI (96 is often referred to as 100%). So, all panes and forms in the project have this line in their InitializeComponent methods:
this.AutoScaleDimensions = new System.Drawing.SizeF(96F, 96F);
Also, all forms, panes and UserControls in my project have their AutoScaleMode set as follows:
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Dpi;
The description of the AutoScaleMode property on docs.microsoft.com says:
Scaling by Dpi is useful when you want to size a control or form relative to the screen. For example, you may want to use dots per inch (DPI) scaling on a control displaying a chart or other graphic so that it always occupies a certain percentage of the screen.
You may also want to check Automatic scaling in Windows Forms on docs.microsoft.com.
Now, getting to the add-in at last. Here, it is loaded in Excel Version 2104 (Build 13929.20372) Current Channel and its panes are on my display A which is a 100% (96 DPI) FullHD display set as main (the image is clickable):
This ugly design shows several control types and some typical situations in positioning, docking and anchoring the controls.
Now I move the Excel window to display B, which is a 4K display at 192 DPI (=200%).
The issues are (click the image to see them):
- The panes report DPI being 96 while the monitor is 192 DPI.
- The CTP scales correctly but it is blurry.
- The Add-in Express pane is crisp, but all its controls and their fonts are too small.
- The header areas of the forms are crisp, they scale well.
- The code of the CTP can’t determine the DPI awareness of the window; this is a result of the design choice: the CTP is actually a UserControl; an instance of it is created by the Custom Task Pane technology (=Microsoft) and UserControl.Parent is null (Nothing in VB.NET) in this case.
Switching to using .NET 4.7 or above doesn’t help.
Before we go too deep into these issues, there’s a simple way out of these inconveniences: you can set an Office application’s Display Settings to Optimize for compatibility.
Here’s the result; the pane is shown on my display B; click the image to see details:
If your customers can’t use this way or if the “compatibility” appearance doesn’t suit you, switch Display Settings back to Optimize for best appearance and wait for my next blog.
Updated on 31-May-2021
And now, let’s look into scaling of Windows.Forms.Form forms. If I put the same controls on a System.Windows.Forms.Form shown modally (or non-modally), I get what I could call an almost perfect result on display B:
Examining the screenshot (you can click on it) with a magnifier shows that Windows accurately scales the form, e. g. by doubling the line width. The caption area *is* crystal crisp again. Switching to using .NET 4.7 or above doesn’t help.
We’ll look into our options next week. Stay tuned!
Available downloads:
The sample COM Add-in was developed using Add-in Express for Office and .net: