Home » c# » Creating a DPI-Aware Application

Creating a DPI-Aware Application

Posted by: admin November 30, 2017 Leave a comment

Questions:

I have a form application in C#. When I change the monitor’s DPI, all the controls move.
I used the code this.AutoScaleMode = AutoScaleMode.Dpi, but it didn’t avoid the problem.

Does anyone have an idea?

Answers:

Difficult, but not impossible. Your best option is to move to WPF of course, but that might not be feasible.

I’ve spent A LOT of time with this problem. Here are some rules/guidelines to make it work correctly without a FlowLayoutPanel or TableLayoutPanel:

  • Always edit/design your apps in default 96 DPI (100%). If you design in 120DPI (125% f.ex) it will get really bad when you go back to 96 DPI to work with it later.
  • I’ve used AutoScaleMode.Font with success, I haven’t tried AutoScaleMode.DPI much.
  • Make sure you use the default font size on all your containers (forms, panels, tabpage, usercontrols etc). 8,25 px. Preferrably it shouldn’t be set in the .Designer.cs file at all for all containers so that it uses the default font from the container class.
  • All containers must use the same AutoScaleMode
  • Make sure all containers have the below line set in the Designer.cs file:

this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); // for design in 96 DPI

  • If you need to set different font sizes on labels/textboxes etc. set them per control instead of setting the font on the container class because winforms uses the containers font setting to scale it’s contents and having f.ex a panel with a different font size than it’s containing form is guaranteed to make problems. It might work if the form and all containers on the form use the same font size, but I haven’t tried it.
  • Use another machine or a virtual windows install (VMware, Virtual PC, VirtualBox) with a higher DPI setting to test your design immediatly. Just run the compiled .exe file from the /bin/Debug folder on the DEV machine.

I guarantee that if you follow these guidelines you will be ok, even when you have placed controls with specific anchors and don’t use a flowpanel. We have an app built this way deployed on hundreds of machines with different DPI setups and we no longer have any complaints. All forms/containers/grids/buttons/textfield etc sizes are scaled correctly as is the font. Images work too, but they tend to get a little pixellated at high DPI.

EDIT: This link has a lot of good info, especially if you choose to use AutoScaleMode.DPI: link to related stackoverflow question

Questions:
Answers:

I finally found solution to problem of both Screen Orientation and DPI handling.
Microsoft has already provided a document explaining it but with a little flaw that will kill DPI handling completely.
Just follow solution provided in the document below under “Creating Separate Layout Code for Each Orientation”
http://msdn.microsoft.com/en-us/library/ms838174.aspx

Then IMPORTANT part!
Inside the code for Landscape() and Portrait() methods at the very end of each add these lines:

this.AutoScaleDimensions = new System.Drawing.SizeF(96F, 96F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Dpi;

So, the code for these 2 methods would be like:

protected void Portrait()
{
   this.SuspendLayout();
   this.crawlTime.Location = new System.Drawing.Point(88, 216);
   this.crawlTime.Size = new System.Drawing.Size(136, 16);
   this.crawlTimeLabel.Location = new System.Drawing.Point(10, 216);
   this.crawlTimeLabel.Size = new System.Drawing.Size(64, 16);
   this.crawlStartTime.Location = new System.Drawing.Point(88, 200);
   this.crawlStartTime.Size = new System.Drawing.Size(136, 16);
   this.crawlStartedLabel.Location = new System.Drawing.Point(10, 200);
   this.crawlStartedLabel.Size = new System.Drawing.Size(64, 16);
   this.light1.Location = new System.Drawing.Point(208, 66);
   this.light1.Size = new System.Drawing.Size(16, 16);
   this.light0.Location = new System.Drawing.Point(192, 66);
   this.light0.Size = new System.Drawing.Size(16, 16);
   this.linkCount.Location = new System.Drawing.Point(88, 182);
   this.linkCount.Size = new System.Drawing.Size(136, 16);
   this.linkCountLabel.Location = new System.Drawing.Point(10, 182);
   this.linkCountLabel.Size = new System.Drawing.Size(64, 16);
   this.currentPageBox.Location = new System.Drawing.Point(10, 84);
   this.currentPageBox.Size = new System.Drawing.Size(214, 90);
   this.currentPageLabel.Location = new System.Drawing.Point(10, 68);
   this.currentPageLabel.Size = new System.Drawing.Size(100, 16);
   this.addressLabel.Location = new System.Drawing.Point(10, 4);
   this.addressLabel.Size = new System.Drawing.Size(214, 16);
   this.noProxyCheck.Location = new System.Drawing.Point(10, 48);
   this.noProxyCheck.Size = new System.Drawing.Size(214, 20);
   this.startButton.Location = new System.Drawing.Point(8, 240);
   this.startButton.Size = new System.Drawing.Size(216, 20);
   this.addressBox.Location = new System.Drawing.Point(10, 24);
   this.addressBox.Size = new System.Drawing.Size(214, 22);

   //note! USING JUST AUTOSCALEMODE WILL NOT SOLVE ISSUE. MUST USE BOTH!
   this.AutoScaleDimensions = new System.Drawing.SizeF(96F, 96F); //IMPORTANT
   this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Dpi;   //IMPORTANT
   this.ResumeLayout(false);
}

protected void Landscape()
{
   this.SuspendLayout();
   this.crawlTime.Location = new System.Drawing.Point(216, 136);
   this.crawlTime.Size = new System.Drawing.Size(96, 16);
   this.crawlTimeLabel.Location = new System.Drawing.Point(160, 136);
   this.crawlTimeLabel.Size = new System.Drawing.Size(48, 16);
   this.crawlStartTime.Location = new System.Drawing.Point(64, 120);
   this.crawlStartTime.Size = new System.Drawing.Size(248, 16);
   this.crawlStartedLabel.Location = new System.Drawing.Point(8, 120);
   this.crawlStartedLabel.Size = new System.Drawing.Size(48, 16);
   this.light1.Location = new System.Drawing.Point(296, 48);
   this.light1.Size = new System.Drawing.Size(16, 16);
   this.light0.Location = new System.Drawing.Point(280, 48);
   this.light0.Size = new System.Drawing.Size(16, 16);
   this.linkCount.Location = new System.Drawing.Point(80, 136);
   this.linkCount.Size = new System.Drawing.Size(72, 16);
   this.linkCountLabel.Location = new System.Drawing.Point(8, 136);
   this.linkCountLabel.Size = new System.Drawing.Size(64, 16);
   this.currentPageBox.Location = new System.Drawing.Point(10, 64);
   this.currentPageBox.Size = new System.Drawing.Size(302, 48);
   this.currentPageLabel.Location = new System.Drawing.Point(10, 48);
   this.currentPageLabel.Size = new System.Drawing.Size(100, 16);
   this.addressLabel.Location = new System.Drawing.Point(10, 4);
   this.addressLabel.Size = new System.Drawing.Size(50, 16);
   this.noProxyCheck.Location = new System.Drawing.Point(168, 16);
   this.noProxyCheck.Size = new System.Drawing.Size(152, 24);
   this.startButton.Location = new System.Drawing.Point(8, 160);
   this.startButton.Size = new System.Drawing.Size(304, 20);
   this.addressBox.Location = new System.Drawing.Point(10, 20);
   this.addressBox.Size = new System.Drawing.Size(150, 22);

   //note! USING JUST AUTOSCALEMODE WILL NOT SOLVE ISSUE. MUST USE BOTH!
   this.AutoScaleDimensions = new System.Drawing.SizeF(96F, 96F); //IMPORTANT
   this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Dpi;   //IMPORTANT
   this.ResumeLayout(false);
}

Works like charm for me.

Questions:
Answers:

It looks like this is a problem with Windows. Taking out these two lines fixed everything.

this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;

This is where I got the solution:

Questions:
Answers:

It is really hard to design DPI aware applications in Windows Forms. You would have to use layout containers that resize properly when the DPI is changed (such as TableLayoutPanel or FlowLayoutPanel). All controls need resizing as well. The configuration of those containers can be a challenge.

For simple applications it can be done within a reasonable amount of time, but for big applications it is really alot of work.

Questions:
Answers:
  1. If you want your WinForms application to be DPI-Aware application, In addition to Trygve good answer, If you have big project you may want to scale your forms and their content automatically, You can do this by creating ScaleByDPI function:

ScaleByDPI function will receive a Control parameter that is usually a form, and than recursively iterate through all sub controls (if (control.HasChildren == true)), and scale location and sizes off your application controls & sizes and sizes of fonts to the OS configured DPI. You can try to implement it also for images, icons & graphics.

Special notes for ScaleByDPI function:

a. For all controls with default Font sizes, you will need to set their Font.Size to 8.25.

b. You can get devicePixelRatioX and devicePixelRatioY values by (control.CreateGraphics().DpiX / 96) and (control.CreateGraphics().DpiY / 96).

c. You will need scale Control.Size & Control.Location by algorithm that based on control.Dock & control.Anchor values. Be noticed that control.Dock may have 1 of 6 possible values and that control.Anchor may have 1 of 16 possible values.

d. this algorithm will need set values to next bool variables isDoSizeWidth, isDoSizeHeight, isDoLocationX, isDoLocationY, isDoRefactorSizeWidth, isDoRefactorSizeHeight, isDoRefactorLocationX, isDoRefactorLocationY, isDoClacLocationXBasedOnRight, isDoClacLocationYBasedOnBottom.

e. If your project uses a control library other then Microsoft controls, this controls may need a special treatment.

More info on above (d.) bool variables:

*Sometimes a group of controls (may be a buttons) need to be placed one after another on same vertical line, and their Anchor value include Right but not Left, or they need to be placed one after another on same horizontal line, and their Anchor value include Bottom but not Top, in this case you need to re-calculate controls Location values.

*In case of controls that Anchor contains Top & Bottom and\or Left & Right, you will need to re-factor controls Size & Location values.

Uses of ScaleByDPI function:

a. Add next command to the end off any Form constructor: ScaleByDPI(this);

b. Also when adding any control dynamically to a Form call to ScaleByDPI([ControlName]).

  1. When you set Size or Location of any control dynamically after constructor ended, create and use one of next functions in order to get the scaled values of Size or Location: ScaleByDPI_X \ ScaleByDPI_Y \ ScaleByDPI_Size \ ScaleByDPI_Point

  2. In order to mark your application as being DPI-aware, add the dpiAware element to your application’s assembly manifest.

  3. Set GraphicsUnit of all Control.Font to System.Drawing.GraphicsUnit.Point

  4. In *.Designer.cs files of all containers, set AutoScaleMode value to System.Windows.Forms.AutoScaleMode.None

  5. in controls like ComboBox & TextBox, changing Control.Size.Hieght have no affect. In this case changing Control.Font.Size will fix control’s height.

  6. If form StartPosition value is FormStartPosition.CenterScreen, you will need to recalculate the location of the window.

Questions:
Answers:

From experience:

  • don’t use DPI awareness with windows forms unless critical
  • to this end always set AutoScaleMode property to None on all forms and user controls in your app
  • The result: WYSIWYG type of interface when DPI settings change
Questions:
Answers:

Since a Winform application form may content controls AND images, allowing the system to resize YOUR window is NOT a solution, but if you could manage to have one form per DPI resolution, with properly scaled images… And that’s not a good idea, since as the screen size grow, the font size diminishes.

When using a different DPI resolution the system forces your form to redefine its control’s size, location and font, BUT NOT IMAGES, the solution is to change the form’s DPI at runtime, when loading, so that everything goes back to original size and location.

This is possible solution, which I’ve tested it with a card game application where I’ve gott some 80 image buttons, TabControls etc.

In each form form_Load event, add this code snippet:

  Dim dpi As Graphics = Me.CreateGraphics
    Select Case dpi.DpiX
        Case 120
            '-- Do nothing if your app has been desigbned with 120 dpi
        Case Else
    '-- I use 125 AND NOT 120 because 120 is 25% more than 96
            Me.Font = New Font(Me.Font.FontFamily, Me.Font.Size * 125 / dpi.DpiX)
    End Select

Besides, a quick trick for testing various resolutions on the same computer, without restarting:

From control panel, change the resolution.
Do not restart! Instead close your session and open a new one with same user.

There is another caveat: If you set a control’s size and position at runtime, then you should apply the same DPI factor (eg. 125 / Dpi.Dpix) to the new coordinates. So you’d better set up a DPIFactor global variable from application.startup event.

Last but not least:

DO NOT open your application in Visual Studio from another resolution than the original one, or ALL YOUR CONTROLS will move and resize as you open each form, and there is no way back…

Hope this helps, happy programming.