I should design a dialog with size 640*480 ,which can be used on 800*600 resolution.
At present my dialog size is 411*292 ,look wise this itself looks good enough ,but actually I was
asked to design dialog with the size I mentioned above.I tried that also but that dialog is too biger
than my earlier dialog of 411*292 size.
while using in 800*600 resolution or my dialog seems to be bigger and not able to see some of my controls
This is size of my dialog,
IDD_DIALOG_MYPAGE DIALOGEX 0, 0, 411, 292
can anyone please let me know how to design a dialog with 640*480 (which should not be bigger).
And how can I make my application to fit to any resolution so that all the controls on the dialog should be visible.
Dialogs are scaled in Dialog Units and Dialog Units scale upon the current UI settings and depend upon the System font. So if the user selects a larger UI representation your Dialog will grow too.
Best advise 1 I could give: Size all you controls by youself. Pick a font you like. Set it to the Control, calculate the positions ofthe new controls and use SetWindowPos/MoveWindow.
Only in this case you have full Control.
You may also use a fixed font size in the Dialog resource, but alos this font scales upon the DPI untis selected for the Screen...
So best advise 2 I could give: Scale upon the DPI/UI Settings and Show the dialog n a size that the user wants too, thats what a normal dialog will do...
You're in for a world of pain. If I understand correctly, you're being asked to make a dialog that will always be 640*480 pixels. It seems like whoever is asking hasn't kept up with UI development since 1995. 'Pixels' are meaningless in 2014. First, the units in resource files are in 'DLUs', 'Dialog Length Units'. See e.g. http://blogs.msdn.com/b/oldnewthing/archive/2004/02/17/74811.aspx and support.microsoft.com/kb/125681 for some starters on how to convert one to the other. However, with high DPI displays these methods are insufficient. Now it doesn't just depend on the size of the system font any more, but also on the settings the user has selected for how big to display 'things' on various monitors, whether to differentiate between monitors at all, etc. See for a start http://msdn.microsoft.com/en-us/library/windows/desktop/dn469266%28v=vs.85%29.aspx . But beware, because there are updates to these API's - e.g. Win7, Win8 and Win8.1 all have new features in this regards.
All of this of course doesn't help you. It's not terribly hard to make a dialog that will fit on 640x480 and up; just make it as small as possible. But this part: "And how can I make my application to fit to any resolution so that all the controls on the dialog should be visible." is really difficult. Does 'any' mean 'also smaller than 640x480'? And does 'fit' mean that it should look 'native' also on higher resolutions? Should the dialog be resizable? You can either go with the simple and robust approach suggested by xMRi above, or you will have to ask whoever is writing your spec to be more clear about what they want, keeping in mind all the things I outlined above.
Related
I made an MFC app for my friend using VS2015 in Win10. It looks like this, which is exactly the same as in resource editor.
.
But when he ran the app on his computer in Win7, the Bitmap image in Picture Control enlarges and covers up some text boxes below, which looks like this.
.
After I searched and realized it may be related with DPI awareness. I disabled DPI-Awareness in property page of Manifest Tool and rebuilt. The same thing happened even when it runs in Win10.
Could someone help me explain the cause of this and find a solution to fix the size of the image control? Thanks.
The main problem is that a dialog from a resource is always measured in DLUs.
And DLUs are calculated from the size of the font, that is used for the dialog.
See this article how dialog base units are calculated.
Now you have a static picture control that is sized in DLUs. The bitmap is just scaled in pixels and is never resized, when you assign it to a static dialog control. And because the real size of the static control depends on the used font, you get different layouts for your dialog and your bitmap.
And because just the font changes when you choose no DPI awareness and because the font changes from windows version to windows version your dialog always look different.
Advice: Paint you picture your own and stretch it accordingly.
Also this stackoverflow question is nice documents and shows the effect of DLUs.
And here some code for auto sizeing picture controls.
An auto-sizing bitmap picture control
A simple image preview class using GDI+
CxImage
Normally, I prefer to keep control in my hand by using SetWindowPos() to set the size of image I want in different situations. You can use below two lines to control/set position and size of your image.
Assume ID of the Picture Control is IDC_STATIC2 then you can use like:
CStatic * pStatic = (CStatic *) GetDlgItem(IDC_STATIC2);
pStatic->SetWindowPos(NULL,20,20,50,50,0);
I am making my app dpi-aware per monitor by setting <dpiAware>True/PM</dpiAware> in the manifest file. I can verify with process explorer that this is indeed working or by calling GetProcessDpiAwareness.
This is all working fine and I can scale anything in the client area fine in my code. However, my only problem is that if I drag my app from a system-dpi monitor to a non-system dpi monitor, the title bar and any system menu would either become too big or too small. This isn't the case for most built-in apps (e.g. calc, edge browser, etc..) so there must be away to scale it properly. Does anyone how the devs at MS did this?
The screenshot below should explain my problem better. Also notice, that the padding between the close, min, and max button is different when it's scaled (96dpi).
Sample app I'm attaching a very simple app that is per-monitor dpi aware.
The Windows 10 Anniversary Update (v1607) has added a new API you must call to enable DPI scaling of the non-client areas: EnableNonClientDpiScaling. This function should be called, when WM_NCCREATE is received. The message is sent to the window's procedure callback during window creation.
Example:
case WM_NCCREATE:
{
if (!EnableNonClientDpiScaling(hWnd))
{
// Error handling
return FALSE;
}
return DefWindowProcW(...);
}
If the application's DPI-awareness context is DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2, then calling EnableNonClientDpiScaling should be omitted, as it won't have any effect, although the function will still return successfully.
From the documentation:
Non-client scaling for top-level windows is not enabled by default. You must call this API to enable it for each individual top-level window for which you wish to have the non-client area scale automatically. Once you do, there is no way to disable it. Enabling non-client scaling means that all the areas drawn by the system for the window will automatically scale in response to DPI changes on the window. That includes areas like the caption bar, the scrollbars, and the menu bar. You want to call EnableNonClientDpiScaling when you want the operating system to be responsible for rendering these areas automatically at the correct size based on the API of the monitor.
See this blog post for additional information about DPI scaling changes in Windows 10 AU.
Does anyone how the devs at MS did this?
This has a pretty disappointing answer. Using Alin Constantin's WinCheat and inspecting the top-level window of Calculator, I see a window size of 320x576, and a client size that is also 320x576.
In other words, Microsoft entirely avoids the problem by suppressing the non-client area of the window, putting everything in the client area instead. Making this work well for you may involve custom drawing of the title bar.
Something worth noting is that Calculator and e.g. Windows Explorer don't use the same colour for the title bars. Calculator doing custom drawing of the title bar would explain that perfectly.
UPDATE:
It is enough to add new <dpiAwarness> declaration to manifest to solve all this mess. Example is here.
Remnants of former investigations (obsolete):
More investigations on the subject.
System setup: two monitors, one is 96 dpi another one is 267 dpi (Microsoft Surface 4).
Testing window is moved to secondary 96 dpi monitor:
Here is rendering (wrong, IMO) with <dpiAware>true/pm</dpiAware> in manifest:
Note huge size of caption bar and wrong sizes of window icons.
And here is correct rendering using <dpiAware>true</dpiAware>
And I suspect that MSDN documentation is plainly misleading about values of PROCESS_DPI_AWARENESS. I do not see any differences in messages and styles between <dpiAware>true</dpiAware> and <dpiAware>true/pm</dpiAware>. The later one just makes caption larger. In both case application receives WM_DPICHANGED message while moving between monitors with different DPI.
Sigh.
The documentation says:
Note that the non-client area of a per monitor–DPI aware application is not scaled by Windows, and will appear proportionately smaller on a high DPI display.
The Microsoft apps that you link to deal with this by removing the non-client area and making the client area cover the entire window.
I'm working on a Qt project and I've noticed a persistent problem with some GUI forms. The form looks fine on KDE (bottom picture) and Windows , but when the app runs on anything GNOME3-based (like Unity or GNOME3 itself) some parts of the form are hidden from view. (Top picture, everything below the Sort Ascending radio button is cut off)
The problem seems to be with how Qt layouts handle large font sizes. If the user is using normal-sized system font (<= 10pt) everything works fine. If they are using larger fonts, the form is not large enough to accommodate everything. Other forms affected by this bug are merely crowded, but that isn't as serious as having vital controls out of bounds. The layout doesn't want to resize itself to take advantage of new space if I enlarge the dialog. Is there an easy way to make it do this or do I need to hard-code it? Originally the code prevented dialog resizing during runtime, but restoring that functionality didn't fix the bug. Even if the dialog can expand, the problem is the layout won't expand with it.
Up until now, I've made all affected forms oversized to compensate for this bug, but it looks strange to have the dialogs much bigger than they need to be on Windows and KDE systems where the font is the proper size. Is there a way to cause an affected dialog/layout to resize itself so everything fits properly at runtime? If so, how would the program detect it when parts of the GUI are out of bounds? I would prefer not to force a certain font size (some people may prefer large fonts due to vision problems).
Thanks in advance for help.
The fix for this is using a different approach when displaying forms. A more dynamic way as I'll describe. I've successfully used this approach on Windows with 96 and very high DPI modes (over 120).
1.
Query the OS and get the user's chosen font for a particular system item; say the font used for the window caption or system dialog boxes. Also you could allow the user to choose their font later if they desired. Use True Type fonts when doing this if possible.
2.
Using that font, construct a string object that you'll use for a label or edit control (I don't know what this is for QT, for Windows it is GetTextExtentPoint32) and pass it to a system function to determine the width and height of the string for your environment.
3.
Given the above value, place the control and dynamically resize the form with the padding all around the control as you like. For buttons you might always add a certain percentage of pixels above and below the button to taste.
4.
For graphical elements like Bitmaps and jpegs, again query the OS for the current DPI settings of the monitor and use larger, pre-made resources. Naturally, all text around theses elements will be dynamically placed on the fly.
Note that on Windows you'll need to mark your exe as high dpi aware using a manifest.
I have an MFC application. When running it on Windows 7 I realized that when changing the display percentage to meduium - 125%, I have a TextControl which is cut off (end of sentence doesn't appear.)
How can I fix this?
I could enlarge the size of the control on the dialog, but I'd rather do that via the code.
My application is localized and I woudn't want to change all the dialogs on every language.
In general, the issue is that absolute coordinates are being used for some sizing rather than relative. The framework will initially lay things out correctly in large DPI, it's then up to you to keep things straight through resizes.
You can use a layout framework like this one: Ultimate Toolbox Layout Manager, or you can roll your own.
Here's a common pattern I use:
Define a struct that captures ID, size, location, and layout behavior (anchor top|left|right|bottom) of a control
In the document constructor initialize an array of structs with your desired layout behavior
In OnInitDialog, capture the initial control positions, e.g. for controls set to anchor top left you need to grab the initial distance from the top and left of the parent.
In OnSize, reposition and resize each control according to its layout behavior.
I'm not exactly sure if it helps in your case but the ResizableLib works pretty well for me. You can also skip creating a library and just use the files in your project.
There is a separate article for CResizableDialog which explains in a few easy steps how to implement this for existing dialogs.
I have a MFC application with some bitmaps, dialog boxes and menus. Currently it supports only one monitor resolution (1280x1024). I am planning to add different monitor resolution support to it. To do that I guess I have to load different resolution bitmaps, change the font size etc. My question is, how these are handled in a typical windows application? Do they use a single bitmap and stretch/shrink it according to monitor resolution or actually have different set of bitmaps in the resource and load them dynamically depending on the resolution? Is there any standard solution to this?
In the past I have used one large image and scaled accordingly.
Making sure that the menus and dialogs resize is tricky but there are helper codes on CodeProject that could help.
I would say to use multiple resources with different resolutions. While you can scale the icons dynamically, they'll probably look better if you resize them in a proper image-editing program.
Menu and toolbar icons are normally displayed with the same number of pixels regardless of screen resolution. Thus menus and toolbars take up a smaller proportion of the screen as the resolution increases.
I don't think there's any standard way of handling different resolutions where bitmaps are concerned.
I would also make sure your application works with Windows DPI scaling. That might be a better alternative when running on higher resolution displays rather than having to redesign the application to meet a specific resolution.
Scaling bitmaps will look bad (making them bigger will always look bad, making them smaller kind of depends on the source). If possible, see if you can compose your big bitmap of several smaller bitmaps that can scale nicely. Lots of times it is fairly easy to make a bitmap that can scale in one direction nicely. For example, if you want to make a frame around something, instead of using one bitmap, cut it up like a tic-tac-toe board into 9 pieces. the four corner pieces stay their original size, the top and bottom pieces stretch horizontally, the left and right vertically, and the center goes both directions (if it is used at all).