XPSuite 4.0 Custom Skinning

XPSuite 4.0 incorporates a radical change to the previous versions.  In the past, the control's visual appearance was hard coded based on the selected VisualStyle and Theme settings.  Not to take anything away from Microsoft's XP look, which obviously we think is great, some may desire their own look for their project.  Using the XPSuite collection of controls has allowed users to create products with a clean modern look, setting them apart from the rest.  However, now with most everyone enjoying the new look, many are desiring to go to the next step; custom skinning! 

Custom skinning allows users to create any look, or theme, they desire, distinguishing their product from the rest.  For example, let's say you are Pepsi, and want your controls to have the Pepsi look.  Now you can create a set of skins based on the Pepsi look, and apply them to the XPSuite controls. 

What is a Skin?
 

A Skin is simply a bitmap, specific to a control, made up of the different states (i.e. Normal, MouseHover, MouseDown, Disabled, Focus, etc.).  For example, let's take the XPButton control.  The following is the skin associated with the XP look, XPBlue color scheme. 

       The results:  

Looking at the above skin, you will notice there are eight distinct images stacked on top of each other, one for each button state.  These distinct images comprise the button's skin.  Now here is the same thing, but with a custom drawn skin.

      The results: 

Some controls use multiple skins to create their look.  Take for example the XPCalendar control.  This controls uses several skins for the buttons, spin, combo, background, and so on.  As with the button control, you simple assign your skins to the specific calendar child skin.  Here is an example of the XPCalendar with the XP look, XPBlue color scheme settings:

Now here is the same thing, but using custom drawn skins.  Note also, that the controls include a custom layout structure which allows you to determine where certain items are located and drawn within the control.  In the example below, the month drop arrow, year spin arrows, and month title are custom positioned.

How Radical Can I Go?

Completely up to you.  Custom skinning allows you to determine your projects destiny.  Want the MAC look? Here's an example of what you can do with the XPSuite controls.  This example was created 100% using only XPSuite controls.  Included in this sample project are the XPTab, XPCombo, XPText, XPButton, XPImage, and XPSelection.

Or, for the more radical developers, take a look at our Alien example, we titled BattleStar Galactica.  This example was created 100% using only XPSuite controls.  Included in this sample project is virtually every XPSuite control. This sample demo is based on a custom skinned XPSideMenuBar hosting other custom skinned XPSuite controls to provide an overall "alien" visual theme to the form.  Click the image to view the complete sample image.

Here's another example of the Alien skin theme.  This example was created 100% using only XPSuite controls.  Included in this sample project is the XPMenuBar, XPCombo, and XPPanel controls.  Click the image to view the complete sample image.