Simple Changes To Spiff Up Your App UI

In Shareware Business Blunders, one of the most frequent advice was that the presentation, not just the function, of the software is very important for sales. Responding to complaints that WinForms applications looked unpolished, Microsoft may professional looking interfaces a priority for Whidbey WinForms. John Stegman has a Channel 9 video on "Developing rich user interfaces with Windows Forms v2.0." The video demonstrates a clone of MSN Messenger, an RSS News Aggregator and an Outlook 2003 look alike built under the new Windows Forms features in Whidbey. There was also another video at the PDC producing an IE clone and also an Outlook look alike.

There are a number of cheap, simple tricks that, that when turned on existing WinForms and the Whidbey version, dramatically improves the attractiveness of your application. Many of these are little known or not commonly turned on, so they feel fresh. Some of these are gimmicky and will become undesirable as soon as they become popular.

• BackgroundImage (& BackgroundImageLayout in Whidbey). Widely used in games and 3d graphics, textured backgrounds provide the most "bang" for the buck. This technique is most effective, when the background image is subtly different from a solid color, it otherwise covers. The user is not consciously aware of its existence, but subliminally feels that the application is more polished. (This explains why gradient backgrounds are very effective, because they are similar to images, but are not too different from standard solid color background).
• Opacity and TransparencyKey. Top-level forms in .NET supports Opacity and TransparencyKey properties available as part of Windows 2000 and XP Layered Windows feature. Windows automatically routes GDI calls to an offscreen buffer, and composes the image back into main desktop. For applications that must run on lower-level platform and only require irregularly shaped windows, regional windows is still available by setting the Control's Region property.
• GDI+ curves. While the world is full of curves, Windows applications tend to have a rectilinear mindset. Drawing curves (especially Bezier curves) would normally seem difficult to program. GDI+ simplifies the drawing of curves with DrawCurve, which uses cardinal splines, that turns a series of lines into a nice curve. One more thing: Unlike Windows, Macintoshes have built in support for round rectangles; you should write your own rounded rectangle routine, since it often comes in handy.
• GDI+ alphablending and gradients. Most developers know about gradients, but few realize that gradients can be applied with one or more colors partially opaque (an alpha less than 255). For example by creating a new LinearGradientBrush(rect, Color.FromArgb(128, Colors.White), Color.FromArgb(0, Colors.White), 45) and applying it over the drawing area of a control after painting, you can add pseudo-lighting effects on control. Alphablending and gradients are often used to create gel buttons, often seen in the Macintosh.
• Rendering. GDI+ normally has a number of rendering hints that are initially set to draw at high performance versus high-quality, but, in most cases, choosing high-quality can improve the appearance of an application with no noticeable impact. I usually have the following Graphics properties set: SmoothingMode to AntiAlias, TextRenderingHint to AntiAlias, CompositingQuality to HighQuality.
• Window Animation. Only accessible in Win32 and available through PInvoke, Windows provides a method to perform various animations on windows such as rolls, slide, fades, and so on. These are faster than versions that you write for yourself, because Windows automatically call WM_PRINTCLIENT on the window being animated and animates using the image for fast performance.

In Whidbey,

• DoubleBuffered. Double-buffering for flicker-free drawing has been available through a series of calls to Control.SetStyle since WinForms 1.0, but this new control property in WinForms 2.0 provides a version that optimizes on memory usage.
• WebBrowser. It's often a lot easier to develop a web user interface than a WinForms interface. With the WebBrowser control, you can be sure than you are using Internet Explorer and can take advantage of IE techniques such as animations and filters. Whidbey also provides access to the underlying HTML document interfaces.
• Balloons. Tooltips can be now converted into Balloons using the IsBalloons property.
• Other. The new layout engine allows controls to use web-metaphors by incorporating a table-layout or a flow layout. There is a whole new set of classes to support Visual Styles.

I know a lot more tricks. Some more short simple GDI+ tips can be found in the web. Bob Powell has a GDI+ FAQ at http://www.bobpowell.net/faqmain.htm. Syncfusion maintains a number of helpful hint for GDI tricks in its WinForms FAQ.  It's also worth noting that a VB PowerPack with additional controls was released at gotdotnet.com and provides a number of interesting controls for free.

If you happen to know of any more simple, easy ways to improve the presentation of an application, drop me a comment.

 

Comments

[Max Christian]

My experience is that using transparency gives great results, until rollout... and then even machines which should support it have serious problems (flickering screens, disappearing windows etc). Due to poor video drivers, no doubt, but try telling a customer that.

[Nils Jonsson]

Thanks for the tips. Good stuff.

I set TextRenderingHint to SystemDefault for the reason that AntiAlias doesnt look as good as ClearType on LCDs, and the users preference for ClearType over antialiasing (or vice versa) should be respected.

But if you really want to force antialiasing, AntiAliasGridFit is a better-looking choice anyway.

[Jeff Atwood]

I urge every developer reading this to buy a copy of Microsoft Money 2004 (or newer) if he/she hasn't already. I truly believe the Money UI represents the future of Windows: blending simple, well understood web metaphors with the power and performance of a client side solution.

Lesson: you can have your cake and eat it too.

Corollary: Joel Spolsky is on crack.

What I want to know is, WHERE IS MY MANAGED HTML RENDERING CONTROL? IE is great, and I know there's an IE wrapper "out of the box" in VS.NET 2005.. but com interop just sucks.

[Wesner Moise]

The reason why I use AntiAliasing for Text Rendering is that it's the only mode that is resolution independent and, secondly, it's also the only one suitable for drawing adjacent strings with DrawString and MeasureString, due to grid-fitting issues.

[Duray AKAR]

Thanks for the useful info.

There are a couple other tips n tricks @:

http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWindowsForms.aspx

such as enabling visual styles with just a single line of code...
Application.EnableVisualStyles() ;

I thought it might be useful for people interested in the topic.