C++/WIN32 A professional looking application - is it really possible?

Question

I've been looking everywhere to find a good solution / tip on how to release an application that has todays 'top-end' look.

As we all know, when coding with windows we normally get windows-style colors/buttons/lists etc. They just look and feel ugly.

When we decide we want to sell an application, people want it to look good - obviously because they have paid for it.

So the question is:

• How is the good application look achieved today?
• Owner drawing? ( really?? )
• custom-controls ?
• some good non-free libraries that do the 'dirty' work and 'skin' your application?

I don't believe programmers do those 'overdrawn' tips and tricks, it takes so long to have one control completely done.. Besides, i would rather spend that time coding the internal application stuff than playing around with per-control drawing..

I have no clue, but have a deadline and now after going through all those 'ownerdrawed' controls on google - i came up that this is not the thing.. There has to be something else that comes handy when a programmer needs to make his application look top-end!.

Please help, any tools ? any tips ? any-anything.. ?

Few examples, how do they achieve that look:

http://fooh.pl/pokaz/3198197337370da4cdfdebf0ae13933c_openfm.jpg

Nuncio

I believe, HTML can be used somehow to make this easier and to separate design from code. But I would also like to see a good answer to this qusetion. – Algie

Well, it's kinda weird that C++ (VStudio/WinAPI/W32) coders are stuck into those damn dirty bad looking windows controls.. and i believe there has to be a solution - i've seen too many good looking apps latelty, and if those are owner drawed - then i want to know if this is the ONLY possible option for a win programmer in XXIst century. – Nuncio

That application does not have a professional UI. Sure, it has lots of consumer sex appeal, purely visual, but the controls are too small, too close together, and there's not any good visual indication what is clickable and what isn't. – Extradition

Ben, yeah but compared to a standard Windows-Developed app - this look is like a 'Whoah'. And it's not about 'what is clickable or not' - its more to: How did they make it to get that 'consumer sex appeal' inside? – Nuncio

What do you mean by "windows-style"? If your complaint is about not getting customized look when you don't customize, well in that case the question should be voted not real. If your complaing is about getting e.g. Windows 2000 look for buttons etc., instead of themed thing, then allright, add a "manifest" to your app. Google it. – Oxazine

@Nuncio - It depends on your target. I buy software after "Is it useful", not after "Wow, looks cool!". YMMV. – Timbuktu

@Bo - my customers tend to say: "Look at my iphone application, see its colours, and a look?". People today want: Functionality and design. My customer is my boss, and yeah right - i buy apps because i need their functionality instead of colors, but i code applications too - and when i hear 'can you please make it look more COOL?' - i start to ask myself, how the hell do i do that ? – Nuncio

Answer 1

You could have a look at Qt for example. In addition to its basic functionality, you can also style all Widgets to your liking (in a manner very similar to CSS) and as such create "themes" to your heart's content.

For the non-rectangular look of the window in the image you link to, you can use Qt's setMask() functionality.

Station

Look at the Qt - it looks like a windows 3.11 ui. Sorry, this is not what we are looking for. – Nuncio

If you're referring to the examples, I would look a bit deeper if I were you. Granted, the examples provided are not "sexy" but they do illustrate that basically anything can be changed to whatever you want it to look like. – Station

Bart, if there is anything that looks top-end and was made with QT i would like to see it.. ? – Nuncio

Google Earth was written with Qt. Is that OK? If not, pick one of these that you like: qt.nokia.com/qt-in-use – Jacobus

KDE...? And perhaps you find something you like here: qt.nokia.com/qt-in-use ? But really, that's beyond the point and our definitions of "professional looking" certainly differ. ;) My point merely is that Qt provides all the functionality to do what you want and is not too much of a hassle to work with IMHO. Take from it what you want. Good luck. :) – Station

Well, google earth user interface isn't that 'cool' as you see, just a standard user interface that looks ugly. I'm not saying anything about the rendering engine, because we speak about Windows UI here. Sorry i couldn't find anything made with QT that would blow my mind.. :) yep you're right maybe the term "professiona look" is what differ us :) – Nuncio

Answer 2

The C++ team put together a sample called Hilo (like the place in Hawaii) that uses no frameworks (no ATL, no MFC) and is all native code. It uses a number of Windows 7 capabilities and some delightful graphics and animations. All the code and design is available and documented. Take a look.

Predestinarian

New link: github.com/microsoft/VCSamples/tree/master/VC2015Samples/Hilo – Korea

Answer 3

If you want to dig under the covers of any specific app, you can fire up a Spy Utility and see how many controls an interface has been broken down into:

I want Spy++ but I don't have Visual Studio

Is there a Spy++ like utility for WPF?

For instance...spying into Windows Media Player in skinned mode finds that there is a window class called WMP Skin Host, and you can see that it has zero child windows. (The regular non-skinned mode is broken into some list boxes and buttons such.)

In my experience, "modern" skinning is generally a disaster when people re-implement too much to try and "look cool". It hampers both automation (through things like AutoIt) not to mention the accessibility features for the disabled. Also, what looks cool today will not stay current if you're not using an OS-based theming API.

(Note: Because I'm a fan of Qt in general, I would suggest looking into the QStyle and QStylePainter. But this is more "theming" than "skinning".)

I would be very wary of using skinning in an app, unless I found out that I was developing for a market that absolutely demanded it (like music players).

Auroora

Answer 4

Usually, you can render custom controls with GDI(+) rendering.

Yesman

Yeah right, but this would require me to design/code every single control from scratch - and i don't want to do this, it would take a year to have them all made with GDI+. – Nuncio

@PeeS: If you want a sexy UI, you have to put some effort in. You could also try WPF for .NET. – Yesman

Answer 5

If you don't mind getting into C++/CLI, there is WPF, it offers pretty extensive control over user defined styles and templates.

Cavicorn

This is something i haven't seen - but from what ppl say - it does not 'cooperate' with C++ ? anything more on that? – Nuncio

Downside would be that you would need to deploy the .NET framework with your application, and as you mentioned, C++/CLI may not cooperate (I'm unaware of a designer) but it's doable, at least programatically. As for my approach to this problem, I've been writing the GUI layer in C#/WPF, and using interop to call into C++ – Cavicorn

Answer 6

You might want to take a good look at SkinCrafter. It's mature, stable, and very flexible. I no longer use it but my experience with it was quite enjoyable.

Derange

Chet, looks good ! What is the thing you are using now instead of SkinCrafter? – Nuncio

@Nuncio The applications I am now developing do not require an augmented look and feel. If they did I would continue using SkinCrafter. – Derange

Thanks Chet, i am now ordering this. – Nuncio

Answer 7

There probably is not a single control in that application.

Instead, the whole thing is rendered as an image. There's a background image, along with some overlay images (mostly transparent) to provide mouseover-highlight, disabled controls, etc. The only thing that's not prerendered is the current track and playlist information, which is pure text with a particular font.

Hit-testing can be performed with yet another image.

The programmer does virtually no work to implement the fancy design, it's all done by an artist (and programs like Photoshop support layers in the editor, making it quite easy to construct all the overlays).

The downside, of course, is that buttons don't act exactly like normal Win32 buttons do. They don't support keyboard focus (although there probably are hotkeys) and simply activate on mouseup. And accessibility is horrendous, there's no information for a screenreader, and the application doesn't respect system font-size settings. In order to make the UI readable by people with poor eyesight, an entirely different skin is required.

Extradition

Answer 8

It sounds like you want a fully skinnable app, but for no more effort than typical Win32 controls. This is impossible. But skinning is not difficult in general, just more time consuming than you're willing to spend.

Your next problem is: Once you have a skinned app, you need a professional graphic designer to develop a good skin. Too many small-project developers think they can make their own skin but it almost always looks terrible. This sexy professional look you want is impossible without a design expert.

And finally, whatever fancy custom skin you end up with, the functionality will likely need to be custom. That is, if you want non-rectangular controls, or animations, these are things you must spend the time to develop.

Using a toolkit like Qt can be a nice investment. But this is the kind of detail that takes a lot of effort no matter how you slice it.

Somewhat beside the point: Designed correctly by a UI expert, the default windows controls tend to look very professional. There are so many benefits to using native windows controls, you should really think carefully before trying to re-invent the wheel:

1. Accessibility features like keyboard navigation, screen readers, high contrast. Are you really going to try and re-invent all the accessibility features that Windows provides with the controls? Or is it worth excluding disabled people from using your app just so you can use a skin (not to mention the non-disabled people that use accessibility features)?
2. Resizing. Does your skin mean disabling any resizing of your window? Again, is that worth it?
3. Some things cannot be skinned very well. For example scroll bars and menus. Some developers re-invent them (scrollbars being especially difficult to reinvent), others just leave them unskinned.
4. Windows theme. Windows theming is not just the color of your start menu; it's supposed to dictate the look of your whole OS. Using standard windows controls allows users to use a built-in mechanism for selecting the look and feel.

Telephony

+1 "But this is the kind of detail that takes a lot of effort no matter how you slice it." – Station

I think you're right in pointing that a proffesional graphic designer is what is required to achieve that 'final good look'. The reason why i am asking all this is because i have finished coding the OpenGL realtime game engine two weeks ago and had to code all from scratch by myself ( including User interface ). When we (the dev team) finally finished working on the engine, we received a request to code a small bluetooth application for a customer.. and i am shocked that in 2011 my application looks just terible with a standard controls inside.. I know a pro GFX member can do the 'trick' but i – Nuncio

I think though that even using standard controls can range from looking terrible to looking professional. UI experts have a legitimate talent for this, and they are sadly underused. – Telephony

(cont) But i was thinking that I'll find some tool/technology around that will allow me to at least have some 'additional control' of what is the final look of an app.. – Nuncio

Tenfour, you are definitely right. I'll probably stick to the look as it is, and see if my customer will complain saying : "why does that look this way? it's a XXIst century, look at my apple user interface" – Nuncio

By the way, the absolute simplest way to skin an app is a combination of UpdateLayeredWindow + a .png file + manually handling user input & dispatching events. You just sacrifice all of the typical accessibility features as I mentioned. But on a tight budget, this is always what I do. It's super simple, so there's no fear of "oh I invested too much into this skinning". – Telephony

And he's kinda right, people got used to an 'IPH0NE' look, i know that as i code for multiple customers. They just 'want an application to look cool' on their laptops, and i was shocked that there is no definitive solution for this - 'custom draw' or look oldskewl. – Nuncio

UpdateLayeredWindow - is something i've been using for a long time, and yeah it was great for some time, but the demand is : MORE. ;) – Nuncio

Answer 9

You could use external layout engines, one such is HTMLayout from terra informatica, this one is also used some professional software.

Lawtun