Page 1 of 1

wxSkin - first preview

Posted: Fri Oct 06, 2006 2:10 pm
by upCASE
Hi all!

Because of a recent discussion about wxWidgets and the ability to "skin" applications I reviewed one of my everlasting projects called wxSkin.

wxSkin is a set of controls that use images to "skin" them. Apart from creating each control and pass it a skin image, wxSkin features a central class called wxSkinEngine that automates most of the skinning by using a simple XML file as a skin definition and is able to load these files either from disk or out of a zip archive. wxSkinEngine parses these files and is able to assign skins to specific windows. Thus loading a different skin during runtime is possible and does not require to reload the application.

wxSkin has two basic top level windows.
wxSkinSimpleFrame is a frame that uses only one image for skinning. It can't be sized in a good way.
wxSkinFrame uses 4 borders, 4 window edges and a body to create the whole GUI. These frames can be sized.
Both frame classes offer support for working with sizers that can be added to special "client" areas.

Apart from these frame classes Buttons, Checkboxes, Gauges and Radiobuttons are implemented. What's still missing are sliders and some transparent static text controls, as well as some "convenience" controls like toggle buttons.

There still is work to do. Currently wxSkin controls only have two states, hovering and disabled states will be added soon. In addition to that the code needs some cleanup and a documentation needs to be written. The GTK port works to some extent, but there are minor issues with that.

Anyway, I decided to give you all a small glimpse of what skinning with wxWidgets might look like once I finished this. I created a small example application to demonstrate wxSkin. Guess what: It's a media player :)

Currently only two skins exist, both are modified skin from VLC to match wxSkins format. Credit for these skins go to the original authors.

Example skin 1:
Example skin 2:
Both skins use PNG files, but all formats wxWidgets is able to handle are supported.

If you want to try this example app for yourself you may download it here:
Note: This is a Windows binary only version! It uses wxMediaCtrl with Directshow. It comes with both skins and can change the skins during runtime by pressing a button (you'll find out which one :) Hint: It has something to do with "settings").

To see what the skin files look like, simply open the archives. I could have created a folde structure inside the archives, but I was to lazy :)
I added some comments in the skin files.

If you're curious how wxSkin works in the applications, here's some example code:

Code: Select all

    //Get the skin engine, the master of process
	//load a skin file
	//a skin file is either a valid xml file
	//or a zip archive. archives may contain a folder structure for subgrouping elements

	//create a "simple" frame
	//a simple frame only uses one image as a skin
	//there are also "complex" frame that have 4 borders, 4 window edges and a body
	frame = new wxSkinSimpleFrame(NULL,-1,wxSkinEngine::Get()->GetSkinName());
	media = new wxMediaCtrl(frame,-1,"",wxDefaultPosition,wxDefaultSize,0,wxMEDIABACKEND_DIRECTSHOW );

	//create some buttons and a checkbox
	wxSkinButton* btnOpen = new wxSkinButton(frame,ID_OPEN);
	wxSkinButton* btnNext = new wxSkinButton(frame,ID_NEXT);
	wxSkinButton* btnPrev = new wxSkinButton(frame,ID_PREV);
	wxSkinButton* btnStop = new wxSkinButton(frame,ID_STOP);
	wxSkinButton* btnPlay = new wxSkinButton(frame,ID_PLAY);
	wxSkinButton* btnSup = new wxSkinButton(frame,ID_SUP);
	wxSkinButton* btnSdown = new wxSkinButton(frame,ID_SDOWN);
	wxSkinButton* btnPlist = new wxSkinButton(frame,ID_PLIST);
	wxSkinButton* btnPrefs = new wxSkinButton(frame,ID_PREFS);

	wxSkinCheckBox* chkMute = new wxSkinCheckBox(frame,ID_MUTE);

	//assigne the elements to skin with names used as identifiers in the skin file

	//initialize the skin

	//add the wxMediaCtrl in a sizer that will be handled "special" when added to a skinned frame
	wxBoxSizer* b = new wxBoxSizer(wxVERTICAL);

When loading a new skin, all it does is

Code: Select all

That's it.

I'll work some more on this and maybe create an example showing a "real", meaning complex, frame. But for now I guess this is enough eye-candy :)

I hope you like it and think that it is a good idea. Comments and suggestions are welcome, flaming and emails like "gimme da source" are not. I will release wxSkin once I'm done or decide to make it public. Right now I want some more time to develop it further.

Posted: Fri Oct 06, 2006 6:37 pm
by stevelam
Well I have tried out the samples and looked through the code and I think that this is an excellent project. I really think that this is the way forwards regarding skinning for wxWidgets (even if it is in a platform limited way) and I am looking forward to see how the project progresses!

Posted: Mon Oct 09, 2006 4:29 pm
by buildere
Very nice job upCASE!

I guess this will work on every platform, .... ?

Posted: Tue Oct 10, 2006 12:32 am
by Ryan Norton
Wow! Amazing work - it really works, even in Vista :D!

The see-through part of the first example skin is neat as well!

Posted: Tue Oct 10, 2006 7:02 am
by Jorg
Very impressive! I am glad you decided to go on with it, it is a very valuable contribution to wxWidgets .. I think you should also announce this on the mailing list. If you wish I can post an announcement there, and provide a link to the forum here ..

- Jorgen

Posted: Tue Oct 10, 2006 7:41 am
by upCASE
Thanks for the flowers :)
Jorg wrote:I think you should also announce this on the mailing list. If you wish I can post an announcement there, and provide a link to the forum here
Thanks Jorg, but please wait some more before posting. As you know I do have some mixed feelings about wxSkin and its acceptance, so I want to make sure that it is in a "usable" state. Some documentation and a proper example needs to be written. And there are still some parts missing which I think need to be implemented. Apart from that I'll need to skip to using CMake or bakefiles... Oh,yes, the website really needs anm update as it still features the "old" version. Once I'm done I'd be happy if you could announce it for me. I'll drop you a line.
buildere wrote:I guess this will work on every platform, .... ?
My major dev-platform is Windows, but I tested this on GTK as well. In general it works, but there are some parts I need to fix. With a little bit of luck I'll get access to a Mac and try it there. However, the general idea is to have this cross-platform, yes. There may be things that won't work on every platform, like opacity which I'd like to add, but I can't be sure unless I tried :)

Anyway, thanks for the positive response. This project dates back about 2 years now and I'm happy that now that I revamped it, it finally seems to get some acceptance.

Posted: Tue Oct 10, 2006 8:14 pm
by K39
Cool! I just tested it on w2k, and aside some flicker issues it works well, i would certainly have a use for this, specially if it is cross-platform.

keep it up!

Posted: Fri Oct 13, 2006 11:56 am
by upCASE
Hi guys and gals!

I thought I could give you another updated preview of wxSkin just before the weekend :)

I iimplemented some of the sutff I wanted to have before a release. Controls can now have four states: normal, over, pressed/checked, disabled.
In addition I added radiobuttons, a slider control, a progressbar, a panel with a background skin and a transparent static text control with optional image. Choosing skins is now a bit more simple as I added a "skin chooser". This will change skins during runtime when double clicking a skin in the chooser.

I had another go on GTK and finally got it working. There are some minor issue with getting sizers to work correctly. Apart from that it behaves just fine. I wanted to post some screens on GTK, but unfortunatly my Virtual PC install just f*** up.

Anyway: You can donwload a new sample at
It's still a simple media player, but a better working one than last time. To choose skins simply hit the "prefs" button.

I hope you like the new sample. Please tell me what you think and what you think is missing.

Jorg: I thought about integrating optional support for GUIBuilder within skin files, so that the layout inside the skins "sizer-able" area could be layouted as well. Would you mind if I included GUIBuilder with wxSkin?

Posted: Fri Oct 13, 2006 12:16 pm
by Jorg
Hi upCASE,

Not at all! Go ahead! I do not have much of a dev-env here on my download PC (that's all it does actually) so when I can I will take a look ..

ps. If there are patches for wxGuiBuilder that I need to apply for your wxSkin to work, let me know..

Have a nice weekend!
- Jorgen

Posted: Fri Oct 13, 2006 2:45 pm
by upCASE
Jorg wrote:ps. If there are patches for wxGuiBuilder that I need to apply for your wxSkin to work, let me know..
I'm not really sure how I will implement that, but I thought that this might be a good idea. I guess there would be no patches I'd need, but let me finish the other stuff first and then I'll concentrate on GUI builder.
Jorg wrote:Have a nice weekend!
You too!