{"id":4113,"date":"2010-01-19T11:41:00","date_gmt":"2010-01-19T11:41:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vcblog\/2010\/01\/19\/dialog-editor-improvements-in-visual-studio-2010\/"},"modified":"2019-02-18T18:45:41","modified_gmt":"2019-02-18T18:45:41","slug":"dialog-editor-improvements-in-visual-studio-2010","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/cppblog\/dialog-editor-improvements-in-visual-studio-2010\/","title":{"rendered":"Dialog Editor Improvements in Visual Studio 2010"},"content":{"rendered":"

<\/p>\n

Hello, my name is Daofa Li, and I am on the Visual C++ QA team. In this post I will be sharing with you the improvements in Dialog Editor for Visual Studio 2010.<\/p>\n

In Visual Studio 2010, we have improved Dialog Editor in the following features:<\/p>\n

\u00b7         <\/span><\/span><\/span>Add mockup image support to help layout controls in dialogs<\/p>\n

\u00b7         <\/span><\/span><\/span>Add support to use the new MFC controls in design time<\/p>\n

\u00b7         <\/span><\/span><\/span>Enhance the ActiveX control security in Dialog Editor<\/p>\n

Using mockup image in Dialog Editor<\/font><\/font><\/font><\/span><\/h2>\n

A mockup image is an image that specifies the exact layout of a dialog \u2013 including the information of the exact size and position of controls in the dialog. A mockup image usually comes from the artist\/designer. The developer has to make the dialog look identical with the image.  This could be a tedious process that might take many hours of fine tuning and checking until the results are satisfactory.<\/p>\n

The good news is now the developer can use this mockup image to guide designing the dialog. In Visual Studio 2010, Dialog Editor has a semitransparent layer that shows the image in the background and that provides the exact guide on how to layout the controls. To make the dialog look identical with the mockup image, the only thing the developer has to do is to drag and drop controls to the position indicated in the image. <\/p>\n

In the following scenario, I got the mockup image from my designer, and I will use this mockup image to guide me in designing the dialog.<\/p>\n

I create the new dialog resource in Dialog Editor. At the bottom of the Dialog Editor window, there is a mockup bar that controls how the mockup image shows up. The Mockup bar can be toggled on or off in the \u201cGuide Settings\u201d dialog by checking or clearing the \u201cMockup bar\u201d checkbox. <\/p>\n

<\/p>\n

To use the mockup image, I first check the \u201cMockup Image\u201d checkbox in the Mockup bar. This action will enable the rest of the controls in the Mockup bar. Then I click the browsing button (\u2026) at the right end of the bar to open the \u201cFile Open\u201c dialog and select the mockup image file I am going to use for designing the dialog. The image file name is displayed in the Mockup bar and the mockup image immediately shows up as a semitransparent image overlaying the client area of the dialog form. I can drag the \u201cTransparency\u201d slider to adjust the transparency level of the mockup image so that it has a comfortable visual effect. By default the mockup image anchors to the upper-left corner of the client area of the dialog form. I can adjust its anchor position by changing the X and\/or Y coordination offset values in the Mockup bar.<\/p>\n

Once I complete my design, I can clear the \u201cMockup Image\u201d checkbox not to show the image. Note that clearing this checkbox doesn\u2019t remove the mockup image. Once you check it again, the mockup image shows up with its previous settings \u2013 transparency level and position.<\/span><\/p>\n

<\/span><\/p>\n

<\/p>\n

The mockup image information is persisted in the .rc file. In the GUIDELINES section, each dialog resource that has associated mockup image will have a MOCKUP entry that specifies the mockup image information:<\/p>\n

    IDD_DIALOG1, DIALOG<\/span><\/p>\n

    BEGIN<\/span><\/p>\n

        MOCKUP, 1, 81, 0, 0, “.\\res\\mockup.jpg”<\/span><\/b><\/span><\/p>\n

        LEFTMARGIN, 7<\/span><\/p>\n

        RIGHTMARGIN, 267<\/span><\/p>\n

        TOPMARGIN, 7<\/span><\/p>\n

        BOTTOMMARGIN, 170<\/span><\/p>\n

    END<\/span><\/p>\n

 <\/span><\/p>\n

The information starts with \u201cMOCKUP\u201d indicating a mockup image guide is using in this dialog, followed by the status of the \u201cMockup Image\u201d checkbox, the transparency level, the offsets of the image position and the mockup image file.<\/p>\n

The mockup image effects only at design time, it will not be saved as part of the dialog resource thus has no effect at runtime.<\/p>\n

Using new MFC Controls in dialogs<\/font><\/font><\/font><\/span><\/h2>\n

Starting Visual Studio 2008 SP1, new MFC controls were introduced, however these new controls could only be used in source code and visual effect could not be seen at design time. In Visual Studio 2010, the most commonly used \u201cnew\u201d MFC controls were integrated into the Toolbox and can be drag and drop to Dialog Editor at design time. Below is a screenshot that shows the \u201cnew\u201d MFC controls in the Toolbox. The \u201cnew\u201d MFC controls start with \u201cMFC\u201d in their names.<\/p>\n

I know this may sound obvious to many but I would like to mention that these MFC controls require MFC support. They may not show up correctly in the dialog at runtime if they are used in non-MFC applications.<\/p>\n

<\/p>\n

Handling ActiveX controls in dialogs<\/strong><\/font><\/font><\/font><\/span><\/p>\n

In Visual Studio 2010, you may have slightly different experience in using ActiveX controls in Dialog Editor than previous versions. When you open a dialog resource that contains ActiveX control(s), you\u2019ll get the following message box before the dialog resource is opened in Dialog Editor:<\/p>\n

 <\/p>\n

If you are not sure of the resource of the ActiveX controls you are using, you could choose \u201cNo\u201d and the dialog resource will not be opened in Dialog Editor. If you trust the ActiveX controls, you can choose \u201cYes\u201d and the dialog resource will be opened for you. This is a one-time \u201cYes\u201d answer per session. Next time, before you unload the resource file, when you open a dialog resource containing ActiveX controls you will not get this message box if you already answered \u201cyes\u201d.<\/p>\n

Another different experience you may have is you may get the following message box before the dialog runs in test mode, when you test a dialog containing ActiveX controls by pressing CTRL-T or clicking the \u201cTest Dialog\u201d toolbar button:<\/p>\n

<\/p>\n

If you don\u2019t trust the ActiveX controls or you want to save your work before running the dialog in test mode, choose \u201cNo\u201d to stop entering the test mode. If you want to proceed testing the dialog, click \u201cYes\u201d and Dialog Editor will try to run the dialog in test mode \u2013 if everything runs well, you will not get this message box next time when you run the dialog in test mode again.<\/p>\n

I recommend you to save your work before running a dialog containing ActiveX controls in test mode because you might lose your work if any of the ActiveX controls does something wrong and crashes the Visual Studio.<\/p>\n

There are several reasons why we need these security enhancements in handling ActiveX controls in Dialog Editor:<\/p>\n

\u00b7         <\/span><\/span><\/span>ActiveX controls usually come from third party. Dialog Editor doesn\u2019t have the knowledge about whether they are safe or not, and cannot make the decision for the developer whether it is safe to use these controls.<\/p>\n

\u00b7         <\/span><\/span><\/span>When Dialog Editor opens a dialog resource containing ActiveX controls, these controls are initialized using the data persisted in the .rc file. The data could be unsafe and the ActiveX controls could be harmful to the system.<\/p>\n

\u00b7         <\/span><\/span><\/span>When the dialog runs in test mode, the contained ActiveX controls are running in the system as well. If any of the controls is unsafe, it could be harmful to the system.  If anything unexpected happens within the ActiveX controls, it might crash the Visual Studio and you could lose your data because Dialog Editor cannot control the ActiveX control\u2019s running behavior.<\/p>\n

 <\/p>\n

<\/span><\/font><\/p>\n","protected":false},"excerpt":{"rendered":"

Hello, my name is Daofa Li, and I am on the Visual C++ QA team. In this post I will be sharing with you the improvements in Dialog Editor for Visual Studio 2010. In Visual Studio 2010, we have improved Dialog Editor in the following features: \u00b7         Add mockup image support to help layout controls […]<\/p>\n","protected":false},"author":289,"featured_media":35994,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[52,10],"class_list":["post-4113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cplusplus","tag-dialog-editor","tag-mfc"],"acf":[],"blog_post_summary":"

Hello, my name is Daofa Li, and I am on the Visual C++ QA team. In this post I will be sharing with you the improvements in Dialog Editor for Visual Studio 2010. In Visual Studio 2010, we have improved Dialog Editor in the following features: \u00b7         Add mockup image support to help layout controls […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts\/4113","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\/289"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/comments?post=4113"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/posts\/4113\/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=4113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/categories?post=4113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cppblog\/wp-json\/wp\/v2\/tags?post=4113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}