8

Win32 look nasty, how to make it look better by custom skins?

I mean something like Adobe products, iTunes, Autodesk 3dsmax and Softimage XSI, Windows media player, Blender, Comodo firewall, Winamp, Babylon client, and few download managers etc.;

there are many similar applications out there but I can't find any proper tutorial or guideline, it looks like secret recipe!

only -two- tutorials available online:

old and useless: http://www.codeproject.com/Articles/20497/Draw-Skin-Window-Using-Pure-Win32-API

only cover opaque background (and this is what I avoid, I need more about GUI components): http://www.flipcode.com/archives/Win32_Window_Skinning.shtml

Is there any book or proper guideline to learn how to build skins for Win32api?

Edit: I accept David Rodríguez comment, down there ↓↓

Community
  • 1
  • 1
sysop
  • 800
  • 2
  • 9
  • 18
  • 9
    How to skin a Win32 application --assuming that you already hunted down the application, you will need a very sharp knife. Hold the application from... (sorry for the bad joke) – David Rodríguez - dribeas Feb 09 '12 at 19:33
  • 2
    If I knew how, I would help you, but I haven´t done any Win32 development, and almost no UI development either, so I cannot really help. Sorry. (BTW: I was here because I basically read all questions with the C++ tag --when I find the time at least) – David Rodríguez - dribeas Feb 09 '12 at 19:39
  • 1
    @macbirdie: Honestly I forget it, after reading some white-papers (with *David* joke in mind), I can imagine success at age 50, so I decided to focus on more useful studies -- I think modern theme is fine, but just performance is not there yet, looking forward to Windows 8, thank you for comment! ;) – sysop Feb 13 '12 at 17:15

2 Answers2

3

I have done this before using C++ Builder. The approach I took was to create a form, set it to be borderless and color the entire form the same color. Then I set the form transparency to this color. I then add images to the form which create the desired skin.

I'm sure this can all be done through standard win APIs, but I can't describe (or advise) doing it solely through API calls.

Jonathan
  • 616
  • 4
  • 7
  • 1
    Thank you Jonathan, I have one question: how you deal with GUI components like Range sliders, scrolls, list boxes, drop downs, radio buttons and so on, you can't simply apply transparent image to them, can you? – sysop Feb 09 '12 at 19:59
  • 1
    @Jonathan, have you looked at the new Styles engine introduced in C++Builder XE2 for custom skinning? – Remy Lebeau Feb 09 '12 at 20:35
  • @RemyLebeau-TeamB, I don't have XE2 yet :( Does the styles engine simplify that whole process? – Jonathan Feb 09 '12 at 23:22
  • 1
    @sysop, You put the gui components on top of the image, they will still appear fine. Only the form disappears. Though if I am using a skin as you describe, I sometimes use images for the buttons instead of standard controls. – Jonathan Feb 09 '12 at 23:27
  • @Jonathan: yes. See http://docwiki.embarcadero.com/RADStudio/en/VCL_Styles_Overview for instructions. – Remy Lebeau Feb 10 '12 at 00:02
  • Just trying to answer what I knew. Anyway, I agree with you, the vast majority of custom skinned apps look gaudy, cheap, or stick out like a sore thumb. – Jonathan Feb 10 '12 at 15:10
2

The operating system handles "skinning" for you automatically.

In "classic" mode (or Windows 2000 and earlier versions), this gets you a, well classic-looking interface. The windows are drawn just like they always were since Windows 95. Presumably, this is what you are referring to when you say that "Win32 look nasty". However, you need to realize that many people like this look and specifically choose to enable it on their machines. [WARNING: Personal opinion coming up!] I'm one of those people, and judging from the screenshots that get posted here from developers' machines, I'm definitely not the only one.

Windows XP actually introducing the "skinning" or theming engine, which lives in a set of Windows DLLs. By explicitly linking to version 6 of ComCtl32.dll, your application would automatically get these visual effects. Some people said this version of Windows looked "Fisher-Price", while others were perfectly happy with the term "gaudy". The option was retained to allow the user to switch to the "classic" theme (as described above), if desired.

Windows Vista completely overhauled Windows's theming engine and introduced a new UI known as "Aero". This provides flashy-looking windows and controls, complete with transparency effects—that is, as long as your graphics card supports it. Again, by explicitly linking to version 6 of ComCtl32.dll, your application would automatically get all of these styles applied.

It's worth noting that through all of this, Microsoft has provided users with the ability to customize the colors (and fonts and other things) used in the user interface. For example, Aero defaults to blue. If you don't like blue, you can change it. I change my UI colors periodically for fun and to re-energize myself. If you can't read or don't like the font, you change it, too.

Thus, if you choose to do something different with your application, defining your own custom color palette and ignoring the options chosen by the user through the provided customization interface, your app is going to look broken and stick out like a sore thumb on the user's desktop. When designing a UI, the last thing you want to do is to be or look different.

In short, upgrade your computer to Windows Vista or later and enable the Aero interface if you want flashy. Don't override the user or try to custom draw all of your controls. You'll just end up with an application that is hard to use, doesn't work as expected, is a pain in the rear to maintain, and just generally looks worse than if you'd simply left it alone.

Community
  • 1
  • 1
Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
  • 6
    This doesn't answer the question at all @CodyGray. The OP's question was not : "Is it a good idea to do a custom UI design?" but more "How can we do it?". – Basj Dec 28 '13 at 14:17