Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Newbie  »  A Simple Photo Browser  »  The User Interface
 »  Home  »  Windows Development  »  A Simple Photo Browser  »  The User Interface
 »  Home  »  Windows Development  »  Win Forms  »  A Simple Photo Browser  »  The User Interface
A Simple Photo Browser
by Chris Mills | Published  04/14/2006 | .NET Newbie Windows Development Win Forms | Rating:
The User Interface

We'll begin with laying out the basic user interface for our image browser application. Add a Panel to your applications form and name it "pnlThumbnails", we'll use this panel to contain our thumbnails.  Set the Panels BorderStyle property to "Fixed3D", its AutoScroll property to "True" and its Dock property to "Left" - this will ensure that this panel always fills left side of the Form.  Stretch this panel so it occupies around half of the form.  Now add a Splitter control to your Form; to do this select a Splitter control from the Toolbox then click on the area to the right of the panel we just created.  You will see a selected area to the right of the Panel we just created stretching the full height of the Form - this is the Splitter.  Next add another Panel to your from, to the right of the Splitter and name it "pnlPhoto".  Set this Panels BorderStyle to "Fixed3D", its AutoScroll property to "True" and its Dock property to "Fill" - the panel should expand to fill the remaining area of your Form.  Finally add a PictureBox to the Panel you just created.  Name it "picPhoto" and set its Location property to "0,0" and its SizeMode to "AutoSize".  We will use this PictureBox to display the selected photo.

To complete our User Interface add a MainMenu to your Form.  Add a File menu with two options "Browse…" and "Exit" and name them "mnuFileBrowse" and "mnuFileExit".  To assign a key to activate a menu add a "&" character to the menu in front of the character you wish to use.  For example if you created a menu with the Text "E&xit" would appear "Exit" on your form - the underline on the "x" indicates that you can use the "x" key to select this menu option if the menu is active.

By using a Splitter and the Dock Properties on the two Panels we have created a user interface that will allow the area of the two panels to be resized at run-time.  The AutoScroll feature of the Panels will mean that if more thumbnails are added than will fit on the Panel that it will automatically add scrollbars to allow the user to view all the thumbnails.  Using the AutoSize SizeMode of the PictureBox will mean that it will resize to fit any image added to it.  If an image is displayed on the PictureBox that is too large to fit on the Panel, Scrollbars will be automatically added to allow the user to scroll around the complete image.  Your application should now look like this:

It should be noted that by using appropriate properties of the standard .NET Framwork controls we have created a user interface that can be resized at run time without using any code - it is possible to achieve this for many .NET applications!

Sponsored Links