Visual Studio 2010 has an excellent facility in the dialog editor to design the dialog with a mockup image. The resource editor represents the dialog and controls in DLUs(dialog units) and probably it’s hard to design with “pin-pixel” perfection. In the professional software development, the UIs are not really designed by programmers. It’s the task of UX person. Probably they will come up with a mock-up image designed some UI design tools (like Visio, Adobe Flash, Photoshop etc…) and it’s programmer’s responsibility to implement them in the actual software. I’ve used “SetWindowPos” and “MoveWindow” APIs in my dialog implementation code to layout the controls to match with in the exact specification.
Take an example. If you’re developing an application which showing the news feed from facebook and your application wants to have the same login controls and layout for making it more compatible with facebook. How we can do that? Here I am taking login screen of facebook. ( the home page design is © to facebook.com and I using this only for the demo purpose). Also I’ve not seen any application helps to sign up with facebook. I am just trying to make my mockup image a bit big.
Consider the following image as the mockup image.
Now lets load this in the resource editor. You can see the mockup controls at the bottom of the resource editor by default.
- Enable the mockup image by clicking the checkbox
- Load mockup image by clicking browse button
- Change the transparency suitable for you. Also you can change the X,Y offset of the image to be appeared behind dialog.
- You can also show/hide the image using the check box left to “Mockup Image”.
Preview the image (Ctrl+T) and see how it appears!
More Info:
