Pure UX Logo Pure UX Title Cleansing Application Interfaces

WinForms Controls and the Visual Studio Designer

WinForms UX

Tonight I gave a presentation at my local .NET user group about Windows Forms controls and Visual Studio's designer.  Attached is the VS2008 solution for my demo and I've tried to summarize the content of the presentation below.  Please comment with any thoughts or questions!

Visual Studio Designer Tips

Positioning

Use the snaplines to align controls and decide basic spacing.  The purple snapline is for the font baseline and is the one I use the most.  You can also hold Ctrl and use the directional arrow keys to position a control or group of controls along the next closest snapline.  The Format menu item provides sub menus for arranging a collection of controls and resizing them.

Event Handlers

Instead of going to a form's code view, selecting a control from the dropdown list, then selecting an event for it in another dropdown list, you can click the Events button in the Properties window after selecting a control in the designer (possibly using the Document Outline window) to then pick from a list of the events and automatically stub out an event handler.

Control Hierarchy

Use the Document Outline window to view all the controls on a particular form or user control.  You can use it to select controls, quickly rename or remove them, and particularly useful is the ability to change its docking order, parent control, and overall hierarchy.  It supports drag and drop.  Document Outline is also useful for finding superfluous controls or controls that were accidentally dragged off of the screen.  On a related note, Robert mentioned you can use the Escape key to traverse your selection up the hierarchy tree, and Adam pointed out that the context menu has options for selecting parent controls.

Binding

Use the Data Sources window to add an object as a binding source and then drag and drop its properties to controls on your form.  Then you just have to set the value of the binding source to an instance of your object and it will handle binding the controls.  You can even bind to complex objects.

Debugging

If you're having problems with code executing improperly when you try to open the design view of a control, 1) open a new instance of Visual Studio, attach to the first instance, and debug the errors, 2) add If Not Me.DesignMode Then around any code that shouldn't execute in the designer when loading the form, and/or 3) Use the equivalent of a _formLoaded boolean that you set to True at the end of your Form Load event handler and make sure it is true before you execute various code.

Standard Items

Click the smart tag on a menu strip or tool strip and choose Insert Standard Items to automatically add the basic items.  Visual Studio includes a collection of standard images that it uses for these as well as many other images.  By default they are installed at:  C:\Program Files\Microsoft Visual Studio 9.0\Common7\VS2008ImageLibrary\

UX Guide

Microsoft has a huge collection of documentation for devloping the user experience with applications that run on their operating system; I highly encourage you to check it out--Windows Vista User Experience Guide.  The concepts apply to all versions of the Windows OS.

Windows Forms Controls

Table Layout Panel

Similar to an HTML table, this control is used for displaying controls in an organized structure of rows and columns.  You can set each row/column to autosize to its child control, a percentage, or an absolute pixel value.  In my demo I used this to create the card view of each contact where I put labels for each value and then bound them using a binding source.

Flow Layout Panel

Similar to floating layers (DIVs) in HTML, this control is used for displaying controls in a stacked next to each other where their placement will move as the screen is resized.  In my demo I used this to contain instances of my contact card user control.  I set its AutoScroll property to True so the controls would be accessible if the form was sized too small.  I also set FlowDirection to TopDown so the cards would display in more of a columnar yet still freeform style.

Split Container

This control consists of two panels and a splitter between them where you can easily place controls into the panels without worrying about docking order with the splitter control.  In my demo I used it to split between the list of contacts and the selected contact.  You can set a minimium size for the different panels and can choose to have a specific panel be fixed.  You can change the Orientation property to make it a Horizontal splitter.

Property Grid

This control displays an object's properties and can allow users to edit them all in a compact manner.  In my demo I used it to allow the user to edit a particular contact.  It automatically detects the proper editor for the data types of each property.  It uses attributes from the System.ComponentModel namespace such as DisplayName, Category, Description, ReadOnly, and Browsable.  If you want to bind it to an object that isn't specifically defined as a class then it is possible but it gets pretty ugly pretty quick.  I suggest using Tony Allowatt's property bag solution on CodeProject (Bending the .NET PropertyGrid to Your Will) to help simplify the process.

Tool Strip Container

This control allows users to arrange multiple tool/menu strips to their specific preference rather than having them always docked to the same location.  In my demo I used this to display three different toolstrips and dragged them around to show how they could be manipulated.  You can limit them to only be able to drag them to certain edges.

Tool Strip Control Host

This control is used to host another control inside of a toolstrip that normally wouldn't be found there.  In my demo I used it to hold a Date Time Picker in the search toolstrip.  You can host user controls that contain multiple controls within them as well.  To my knowledge this is used only in code but is pretty basic:

 

Dim host As New ToolStripControlHost(myControl)
myToolStrip.Items.Add(host)

 

Tool Strip Drop Down Button Menu

This control displays a button on a toolstrip that has dropdown menu items from it.  I used it my example to act as a multi-level auto complete for my search tool strip.  I set the DisplayStyle property to None so it only displayed the black arrow and positioned it next to my textbox.  Then in code I set the DropDownDirection to BelowLeft so it would appear to be related to the textbox--to my knowledge this property can only be set in code.

Tool Strip State Buttons

This control is the standard tool strip button but the CheckOnClick property is set to True so it acts as a checkbox/radiobutton.  In my demo I used these for toggling between the list view and the card view for the collection of contacts.  The Day, Week and Month buttons in Microsoft Outlooks' calendar is a good example.

Menu Strip Checked Menu Items

This control is the standard menu item control in a menu strip but the CheckOnClick property is set to True so it acts like a checkbox (or a radio button if you handle the events in that way).  It displays a checkmark to the left of the text when its Checked property is set to True.  In my demo I used these for toggling the visibility of my three tool strips.

Notify Icon

This control displays an icon in the operating system's system tray.  In my example I added a context menu strip and associated it with the notify icon so you could right click on the icon and exit the application or show the main form.  It will not display if the notify icon doesn't have a file set for its Icon property.

Demo Solution

The demo was of a simple application for organizing contacts.  I didn't go into much code detail since it was mostly about using the controls.  So don't expect it to fully work!  But it should give you the basic principles of the controls and an example of how they could be used.

NOTE:  If you are developing in Visual Studio 2005 you need to open the project instead of the solution.  The solution was built with Visual Studio 2008 and can't be opened by Visual Studio 2005, but individual projects within a solution can be (and this only has one project).  Read more at Park Place, an MSDN blog.

DNUGMay09.zip (577.77 kb)

Comments

Is that a Boba Fett icon for your sample application? AWESOME!

I think you're presentation holds the record for quickest to inform. I think I starting learning new (tech) stuff inside the first 90 seconds of your talk. It was a good first talk. Very informative. Thanks for all the work preparing. I hope to hear and sea more as WPF becomes more popular.

  • Dippy Dawg
  • May 12, 2009
  • Reply

Sorry I had to miss the presentation.  I definitely could have used it - thanks for posting it.

  • David W.
  • May 21, 2009
  • Reply

Couldn't help but notice the Boba fett icon too! LOL.  Had to comment just based on that.  Overall good post though.

Thanksa for the Tool Strip Drop Down Button Menu. Needed that one.

Nice tips - I know a few designers who could benefit from better practice like this.

Getting the demo now, good presentation btw!

Great post.

  • waggi
  • Oct 19, 2009
  • Reply

Add comment




biuquote
Loading