{"id":6791,"date":"2015-04-29T14:00:00","date_gmt":"2015-04-29T14:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vcblog\/2015\/04\/29\/mfc-dynamic-dialog-layout\/"},"modified":"2021-10-07T13:55:41","modified_gmt":"2021-10-07T13:55:41","slug":"mfc-dynamic-dialog-layout","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/cppblog\/mfc-dynamic-dialog-layout\/","title":{"rendered":"MFC Dynamic Dialog Layout"},"content":{"rendered":"

One of the frequently requested MFC features<\/a> (and by the way, thanks for the feedback and keep it coming!) is the ability to intelligently resize dialogs and their content at runtime.<\/p>\n

One approach is to intercept WM_SIZE<\/span> message of the parent dialog and recalculate the size and position of the child controls accordingly. It works, but is extremely error prone ­– just imagine doing this for each control in every dialog in your application. It also introduces non-trivial logic in the presentation layer of you application, creating maintenance headaches down the road.<\/p>\n

In Visual Studio 2015 RC, we’re introducing a consistent approach to managing the layout of the dialog at runtime – we call it Dynamic Dialog Layout.<\/p>\n

Let’s start with an example that shows what this feature is for. Imagine a dialog with a single button (don’t worry, I’ll get to more realistic examples soon):<\/p>\n

\"Image<\/a><\/p>\n

If we make this dialog resizable, the user will be able to stretch the window, resulting in something like this:<\/p>\n

\"Image<\/a><\/p>\n

This is not useful at all. For resize to be meaningful, we need to find a better location for that button, and maybe resize it as well. A simple and sensible approach would be to let the button “stick” to the bottom right corner of the dialog. Put another way, as the parent window is resized<\/span><\/em> by X<\/em> dialog units horizontally and Y<\/em> units vertically, we want the button to move<\/span><\/em> right and down by the same amount.<\/p>\n

Let’s go ahead and implement this. Open the Properties window in the resource editor and click on the OK button in the dialog. You will see a new property set called “Dynamic Layout”:<\/p>\n

\"Image<\/a><\/p>\n

Now change the “Moving Type” to “Both” and set “Moving X” and “Moving Y” to 100 (remember, we want the button to move both right and down as the host dialog resizes):<\/p>\n

\"Image<\/a><\/p>\n

We’re not going to change the ‘Sizing Type” just yet – I’ll get to that in a minute.<\/p>\n

Now save and recompile. Run the application and stretch the dialog. Voila:<\/p>\n

\"Image<\/a><\/p>\n

That’s a lot more useful, isn’t it?<\/p>\n

Let’s make it more realistic and add another button, “Cancel”:<\/p>\n

\"Image<\/a><\/p>\n

We now need to decide how we want the buttons to behave when the host dialog is resized. The simplest way is to let the “OK” button stick to the bottom left corner, and have the “Cancel” button stick to the bottom right corner. We will set the Dynamic Layout for “OK” to “Moving Type = Vertical”, “Moving Y = 100”. The “Cancel” button will have “Vertical, 100, 100” (just like the “OK” button in the last example).<\/p>\n

Save, compile, run and resize:<\/p>\n

\"Image<\/a><\/p>\n

Not bad, huh?<\/p>\n

Now, let’s experiment with the “Sizing Type” property. In my next example, I want my buttons to scale proportionately to the size of the dialog. We’ll be doing some math here, so to make it simpler I created a new dialog sized 200×100 dialog units. Each of the buttons will have width set to 80 units (the height is immaterial for this example).<\/p>\n

I want the buttons to grow and shrink with the dialog, always maintaining the original proportion – which is 80\/200 or 40% of the width of the dialog. Also, I want to maintain constant space between each button and the edge of the dialog, let’s call that Δ:<\/p>\n

\"Image<\/a><\/p>\n

How do I express that using the Dynamic Layout settings?<\/p>\n

Let’s start with the “OK” button. As far as its movement goes, it will continue to move vertically 100% so it remains anchored to the bottom edge. I also want it to resize dynamically as the host dialog is resized. The button occupies 40% of the width of the dialog, which means that each time the parent dialog’s width grows by 100 units, I want the “OK” button to grow by 40 units. This is how to express it using the Dynamic Layout properties:<\/p>\n

\"Image<\/a><\/p>\n

The “Cancel” button requires a little bit more work. As the parent dialog grows, this button is going to move both horizontally and vertically. The vertical movement is easy – I want the button to stick to the bottom edge, so that’s 100%. Next, I’m going to copy the “Sizing X” property from the “OK” button – it just makes sense that the two buttons should maintain the same growth ratio, this way they will always have the same size, regardless of the size of the host dialog.<\/p>\n

Now, let’s calculate the “Moving X” property. I said we’ll be doing some math here, so here goes. When the dialog’s width grows by 100 units from 200 to 300, the width of each grows accordingly, 80*300\/200 = 120. The original X position of the “Cancel” button was 200- Δ-80 = 120- Δ. After the dialog’s width has grown by 100 units, the new X position of the “Cancel” button will be 300- Δ-120 = 180- Δ.<\/p>\n

With me so far? Good. As we just determined, the position of the “Cancel” button moves from 120- Δ to 180- Δ, i.e. by 60 units. And that’s our answer – the X position grows by 60% of the growth of the dialog’s width.<\/p>\n

There are other ways to calculate this, and sometimes you will need a napkin or a back of an envelope (especially for complex layouts where multiple controls act as a group). A useful mental model I developed is by asking “if the width (height) of the dialog grows by 100 units, by how much should I grow or move the control?”<\/p>\n

Here is the full set of Dynamic Layout properties for the “Cancel” button:<\/p>\n

\"Image<\/a><\/p>\n

And here is our resized dialog in all its beauty:<\/p>\n

\"Image<\/a><\/p>\n

Admittedly, resizing buttons is not very interesting – it does make them easier to hit with the mouse but that’s about it. Resize becomes really useful for controls with non-trivial content, such as the list box, tree control etc.<\/p>\n

To make this even more useful, I’m going to add a list box to our dialog:<\/p>\n

\"Image<\/a><\/p>\n

I’m leaving the button properties unchanged. The list box will grow horizontally and vertically with the host dialog, and remain attached to the upper left corner (i.e. not move):<\/p>\n

\"Image<\/a><\/p>\n

And here is the resized dialog:<\/p>\n

\"Image<\/a><\/p>\n

All the functionality I described here is of course available programmatically – Dynamic Dialog Layout APIs have been added to MFC. Additionally, and especially if you’re not a mouse-and-click kind of developer, you can edit the Dynamic Dialog Layout properties directly in the RC file. We will document this on MSDN, of course, and I’m not going to describe this here, in order to keep this post short.<\/p>\n

As always, we’re interested in your comments. This feature is still a little rough around the edges, so your timely feedback will allow us to address any omissions in the RTM release.<\/p>\n

The sample app used in this post is attached below.<\/p>\n

MFC_Dynamic_Dialog_Layout_Demo.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

One of the frequently requested MFC features (and by the way, thanks for the feedback and keep it coming!) is the ability to intelligently resize dialogs and their content at runtime. One approach is to intercept WM_SIZE message of the parent dialog and recalculate the size and position of the child controls accordingly. It works, […]<\/p>\n","protected":false},"author":290,"featured_media":35994,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[140,10],"class_list":["post-6791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cplusplus","tag-c","tag-mfc"],"acf":[],"blog_post_summary":"

One of the frequently requested MFC features (and by the way, thanks for the feedback and keep it coming!) is the ability to intelligently resize dialogs and their content at runtime. One approach is to intercept WM_SIZE message of the parent dialog and recalculate the size and position of the child controls accordingly. It works, […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts\/6791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/comments?post=6791"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts\/6791\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/media\/35994"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/media?parent=6791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/categories?post=6791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/tags?post=6791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}