1

I am designing a two-column popup menu. It is designed using Form(as the popup menu container), TableLayoutPanel(to properly arrange the buttons), Button(as the popup menu items), and ImageList(as icon of the popup menu items).

The designs, especially the layout is just as expected, when user is on Windows' Scale of 100%:
goodResult

However, when user is using Windows' Scale of 150%, the popup menu item's placements are just scattered/ overlapping/ out of bounds:
First example:
badResult

Second example:
badResult2

Just for your information, for the menu items in the left column of the popup menu, the properties I've set are:

FlatStyle = Flat,
ImageAlign = MiddleRight,
RightToLeft = Yes,
TextAlign = MiddleLeft,
TextImageRelation = Overlay.

As for the right column of the popup menu, the properties I've set are:

FlatStyle = Flat,
ImageAlign = MiddleRight,
RightToLeft = No,
TextAlign = MiddleLeft,
TextImageRelation = Overlay.

Then, for the menu item's texts, they were set from the Text properties of Microsoft Visual Studio. For the spacing/ padding between each menu item's text, shortcut key's text and images, I simply used white spaces to align and to arrange them in a column.

What I've tried to do was to mess around with the TextImageRelation and AutoSize=True(hoping this could automatically arrange the layouts properly for me, but no). Then, I have also tried changing from using white spaces to String.PadRight() for the popup menu item's labelling, because my initial suspect for my problem is the use of white spaces to add padding between the popup menu item's texts and images. However, they all didn't work.

Then, I found this link and also this, which are about detecting change of resolution and scale respectively, but I didn't really understand how this can help to fix my problem. Besides, if it's about Writing High-DPI Win32 Applications, I believe it has been done/ enabled.

For additional information:

//set for all the Forms
this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;

//.NET version used for this project
.NET version: .NET Framework 4.5.2

//dpiAwareness mode
dpiAwareness: PerMonitorV2

I also searched for some related issues, but they didn't help me that much:

So, I would like to ask for some help on what I am missing here, please?

ewu11
  • 65
  • 9
  • 1
    *I believe it has been done/ enabled for this project*: instead of *believing*, post the .Net version in use and the DpiAwareness mode you have set. The `AutoScaleMode` seems to be set to `Font`, you may want to set it to `Dpi` instead. Dpi change notifications will make more sense after. -- As a note, Dpi Awareness is still (as of .Net 6) a (slow) work in progress in this platform. The TLP has some *issues* here. – Jimi Mar 06 '22 at 19:10
  • Thanks for pointing out, @Jimi. I have updated the question with needed information. -- As for the ```AutoScaleMode```, I just set from ```Font``` -> ```Dpi``` then everything about the application became so huge so, I decided to use both ```Font``` & ```Dpi```, but the issue is still there. Are there anything else needed to be added/ done besides editing the ```AutoScaleMode```? – ewu11 Mar 06 '22 at 19:49
  • You cannot use .Net Framework 4.5.2. You need at least .Net Framework 4.8. Also, you cannot have AutoScaleMode set to Font and Dpi at the same time. Remember that you must design at 100% scale. Visual Studio issues a warning when you don't. It appears that your Screen is not scaled. But this doesn't explain the increase in size when you set `AutoScaleMode = Dpi`: this usually happens when you scale to Font and change the Font size. Setting it to Dpi doesn't change the UI is the Screen is not scaled. – Jimi Mar 06 '22 at 19:55
  • The thing is, the latest version of .NET Framework selection available for the project is only upto 4.7.x. I might need to do more research on how I can possibly get this done. – ewu11 Mar 06 '22 at 20:01
  • 1
    4.7.2 may do, but you can install .Net FX 4.8 through Visual Studio installer (IIRC, latest 2017+) or [download it from Microsoft directly](https://dotnet.microsoft.com/en-us/download/dotnet-framework/net48). Note that 4.8 is the last .Net Framework available, so it won't be updated anymore (except security stuff). .Net 5+ will have the latest updates in this department. v 4.8 is good enough for this though. – Jimi Mar 06 '22 at 20:22
  • @Jimi -- Thanks! I have changed the settings accordingly and it worked, although the ```Form``` and ```Control``` involved would be resized(in which I believe is because of the scaling). +1 for your ideas and helps. – ewu11 Mar 07 '22 at 03:38

1 Answers1

0

After changing all the required stuff, guided by @Jimi, I have finally managed to solve this issue.

  1. I downloaded .NET Framework 4.8 here.
  2. I changed my project's .NET framework from 4.5.2 -> 4.8. This was done via: Solution Explorer -> Right click on Project's Name -> Properties -> Application panel -> Target framework: .NET Framework 4.8.
  3. For all containers(Form) involved, I set the AutoScaleMode from Font to Dpi.
  4. Under all the Container.Designer.cs/ Form.Designer.cs, I set whatever the original argument for SizeF(x) to SizeF(96F, 96F). For example, from this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); -> this.AutoScaleDimensions = new System.Drawing.SizeF(96F, 96F);

After everything was edited, these were what I got, depending on different Windows' Scale settings:

For Scale: 100%:
(i) firstEg (ii) secondEg

For Scale: 150%:
(i) firstEg (ii) secondEg

Based on the pictures above, it may seem there's not much difference. Therefore, to be able to compare, I took some screenshots and put them side by side:
compare

Thanks!

ewu11
  • 65
  • 9