Welcome to MSDN Blogs Sign in | Join | Help

Name That Layout: In the beginning ...

Windows Forms 2.0 contains a set of new layout features that are a blast to use - but first-time users can be easily overwhelmed by the options, and even developers experienced with Windows Forms may need a helping hand to figure out how to get the most of the new features. So, as a way of demonstrating how, when, and why the features should be used, I thought it'd be fun - well, okay, at least interesting and even moderately compelling - to make a game out of it. So I bring you ...

Name That Layout!

Sure to shock and amuse, excite and confuse. Bring your family, bring your friends.

The Rules

Every so often I'll be posting a new "Name That Layout" scenario. Most will consist of a set of screenshots of different types of Windows Forms UI, along with notes on how the UI should behave.  The challenge for you, the contestant, will be to respond and say how you think you'd achieve a UI layout of that type - that looks and acts like the screenshots provided.

The catch: I'll always include a specific "challenge", in the form of "I can layout that UI with ..." and then some bold but almost always true assertion of how it could be achieved in Windows Forms. Anybody can write gobs of code and cobble together UI that looks and acts pretty much any old way, but we're here to learn the Right and Blessed Way of achieving various kinds of simple, advanced, and cool Windows Forms UI.

In place of further explanation, here's an example ...

 


CHALLENGE #1:  In the beginning ...


The Look:

Fig. A

Fig. B

The Behavior:

When the application starts, it looks like Fig. A. The form can be resized by the user to look like Fig. B. It cannot be made to be smaller than Fig. A or larger than Fig. B.

The Challenge:

I can name that layout ... without using any Whidbey/Windows Forms 2.0 features whatsoever.


Simple rules, simple game, and simple first problem ... any takers, or do I have to sit here and talk to myself?

Published Friday, October 22, 2004 6:35 PM by JTChris

Comments

Friday, October 22, 2004 6:43 PM by Patrick

# re: Name That Layout: In the beginning ...

Looks like you have yourself a form with the FormBorderStyle property set to "Sizable", with two command buttons anchored "Bottom, Right", and a values set for the MinimumSize/MaximumSize properties.
Friday, October 22, 2004 6:54 PM by Geoff Appleby

# re: Name That Layout: In the beginning ...

I can name that layout, but i'm trying to decide if it's more amusing to sit and watch you talk to yourself :)

However, to get things started...

Make a form the size of figure a. set that size to it's minimum size property. increase it to the size of figure b, set that to the maximum size property. now add two buttons, put them in the right place, and set their anchor to bottom and right.

Please, send me my prize. :)
Friday, October 22, 2004 7:10 PM by Simon Cooke [exMSFT]

# re: Name That Layout: In the beginning ...

Both buttons would need bottom-right anchor turned on, no anchor, no dock.

(All works fine with Winforms 1.0... and WFC in J++ 6.0 :-))
Friday, October 22, 2004 7:11 PM by Simon Cooke [exMSFT]

# re: Name That Layout: In the beginning ...

Test
Friday, October 22, 2004 8:24 PM by Paul Bartrum

# re: Name That Layout: In the beginning ...

The buttons are anchored to the bottom right. Additionally, MinimumSize and MaximumSize are set to constrain the size of the window.

Do I win a prize? ;-)
Friday, October 22, 2004 8:41 PM by Andreas Häber

# re: Name That Layout: In the beginning ...

Uses anchors to 'anchor' the buttons to the lower-right corner.
Saturday, October 23, 2004 1:48 AM by Saurabh Jain

# re: Name That Layout: In the beginning ...

I will take the bait.

Have a Form.
Set MinimumSize = A
MaximumSize = B

Place the buttons on the form, Anchor them to Bottom, Right.

Voila, you got your layout.

I think the term you are looking for is "AnchorLayout".

PS: - Waiting for Layout quiz that plays nice when AutoScroll is involved :-).
Saturday, October 23, 2004 4:26 AM by Luc Cluitmans

# re: Name That Layout: In the beginning ...

Well, that looks pretty simple.

Set the 'MinimumSize' and 'MaximumSize' properties of the form to restrict sizing.

Set the 'Anchor' property of the buttons to 'Bottom, Right' after dropping them into position on the designer (the default of that property is 'Top, Left').

Oh, and as always, test your application with different settings for screen resolution :)
Saturday, October 23, 2004 5:18 AM by denny

# re: Name That Layout: In the beginning ...

form min and max size props will handle the form size.

then chnage the button anchors to bottom and right.

done.
Saturday, October 23, 2004 5:21 AM by denny

# re: Name That Layout: In the beginning ...

form min and max size props will handle the form size.

then chnage the button anchors to bottom and right.

done.
Saturday, October 23, 2004 10:10 AM by Nick Parker

# re: Name That Layout: In the beginning ...

All you need to do is go into the designer, resize the form to however small you want it (Figure A) and copy the Size property into the MinimumSize property for the form. From that, you can resize the form to the largest size you prefer (Figure B) and copy the Size property again into the MaximumSize property for that form.
Saturday, October 23, 2004 12:13 PM by JTChris

# re: Name That Layout: In the beginning ...

Well, I think y'all have a good grasp of the rules now. ;-)

This one seems like it may be too easy for some of you, but usability studies and informal polls indicates that Anchoring as a concept isn't perfectly understood. I'll do a quick summary of some of its quirks when I post the next challenge.

Congrats to Patrick, Geoff, and Simon for being the first three responders - and congrats to all for their right-on answers.

I promise, the next one will be more of a "challenge" ...
Tuesday, October 26, 2004 6:40 AM by The Cerebrate's Contemplations

# Windows Forms: Name That Layout

New Comments to this post are disabled
 
Page view tracker