• Import and export images
• Change, add or remove properties
• Import and export STREAM images
• Compile into a totally new MsStyles-file

In this post I will highlight some details of Vista Style Builder (VSB) which show how much easier this application makes it to edit MsStyles.

The Main Window

Most of the time when creating Visual Styles, you will be looking at the main window of VSB. This main window exists basically of four parts:

• The command bar in the top of the window to do things
• The UI parts browser on the left which displays every UI part in a MsStyle neatly grouped into categories
• The Preview pane, which will show the images used in a UI part
• The property view in the bottomright, showing an editable list of all properties for a UI part

As you might notice, there is no menu bar anymore. In line with most Vista applications, VSB uses a commandbar for all possible actions that can be done.

Importing Images

VSB allows a user to export the images used in a Visual Style in order to edited the images in an external application, such as Adobe Photoshop. It is possible to export a strip of images (e.g. all different button states in one image), but it is also possible to just export one state of an image (e.g. the button-pressed image).

Importing is done in a similar fashion: you can import an image with all states or just one state directly. VSB always provides a default name for importing and exporting, so if you follow that naming schemes, you can quickly import and export images.

VSB will notice it if you try to import an image of different dimensions than the original; it will actually ask you what you want to do:

Alpha Channel Importing

One of the problems people are currently facing with Vista Styles is that photoshop and Vista uses a slightly – or so it seems – different format: the alpha channel comes out wrong in MsStyles for files imported manually.
Vista Style Builder fixes this incompatibility when importing images.

Adding Properties

Another feature in VSB is the possibility to add new properties to UI parts. This makes it possible, for example, to give the taskbar fonts a glow or even make the breadcrumb bar glow.

Properties are added through a easy to use dialog which allows you to select the type of property (e.g. enum or color), the name (e.g. iconeffect or textcolor) and the value. For enumeration-types, such as Iconeffect, a listbox will automatically show all possible values.

StyleHacks

People often want to change the same things in their Visual Styles. Some good examples are a thinner taskbar and a small startmenu. Most of the time, these things involve editing a number of properties in some unexpected way.

To make it easier for everyone to use often done things in their styles we invented StyleHacks in VSB. A StyleHack is an easy way to apply an often done thing (a`hack`) to your Visual Style. For example, there is a StyleHack to change the height of the taskbar to 18px.

Visual Style Builder provides an in-application menu to browse the available StyleHacks with a preview image and apply them with a click of the mouse:

Import XP Styles

A featue of Visual Style Builder that has been secret until now is the ability to Import XP MsStyles.
That’s right, VSB makes it possible to use your favorite XP Styles on Vista! Most XP Styles only need some small modifications after importing to work correctly on Vista .

Here’s an example of XP Luna after having it converted to a Vista Style after importing:

As you can see, the dialog uses the Luna window borders as well as Luna buttons. As a bonus, the Luna theme got dropshadows and is rendered by the DWM. For this theme, I opted to keep the Aero buttons because I personally think they look great on the Luna theme.

Of course, not all themes can be imported 100% correctly: Vista has some more restrictions on the window frames than XP had. However, it will make porting much easier and it works for a lot of themes without modifications.

Availability and price

The big question is now when will VSB be available? Unfortunately, I can’t really give a date yet. The technical side of the application is completely done; the business side, however, is not.

I know a lot of people expect this application to be free, but I can tell you that it will not be free. There went a lot of work in VSB and, at the very least, I need to earn the invested time back.

Editor’s Note: A distribution policy for Vista Style Builder and AeroXperience members is currently being researched

In this post, I will show you a way to add custom buttons — like in the above image — to the commandbar by adding items to the registry. Unfortunately, not all buttons (e.g. New Folder) are possible via this way.

The registry key

We start by opening up regedit as administrator (start, type regedit and hit enter. Accept the UAC prompt if you have UAC enabled). Once inside regedit, we navigate to the following key:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\explorer\FolderTypes

Under this key, you’ll see a list of numbers in the format of {de2b70ec-9bf7-4a93-bd3d-243f7881d492}. These numbers are CLSIDs and represent the special folders such as Documents, Music, Drives in Explorer.
Most of the CLSIDs can be figured out by clicking the registry key and looking at the CanonicalName. For example, {de2b70ec-9bf7-4a93-bd3d-243f7881d492} has its CanonicalName set to Directory.Contacts, so it is likely that these CLSID refers to the Contacts folder.

TaskNoItemsSelected

Under some of the CLSID registry keys, you’ll see another key named TaskNoItemsSelected. For example, {de2b70ec-9bf7-4a93-bd3d-243f7881d492} (the Contacts folder) has this subkey. If you further expand this key, you will see that it has numbered subkeys 0, 1, 2 and 3.
These subkeys actually contain a description of the buttons that are added to the commandbar when no item is selected in the Contacts folder.

Editing TaskNoItemsSelected

Before we can edit this registry key, you need to make sure you have the proper rights to do so. On a fresh install, only the installer can write or modify these registry keys.
If you plan on editing some of the button, take ownership of the FolderTypes registry key by right-clicking it and selecting Permissions. Next, click Advanced and go to the Owner tab. In here, you can select your own user or the Administrators group as the new owner. Before hitting OK, tick the bottom-most checkbox saying something along the lines of ‘Replace owner of the underlying objects’.
After doing this, you now have the proper rights to edit the FolderTypes.

We start by adding a new key under the {de2b70ec-9bf7-4a93-bd3d-243f7881d492}\TaskNoItemsSelected key. We name it 4, since 0 to 3 already exists.

The next thing we need to do is add another subkey under the 4 key, which needs to be a unique and long number (called a GUID). For generating GUIDs, we use the following tool: http://www.somacon.com/p113.php . Hit the Generate UUID/GUID button and copy the GUID to the clipboard. We got the {61C0D9CB-BB72-4013-8769-EC628B50C351} GUID from this tool.
Now we got a GUID, we add it under TaskNoItemsSelected\4 as a subkey, so we end up with the key:

\TasksNoItemsSelected\4\{61C0D9CB-BB72-4013-8769-EC628B50C351}

In this key, we add the following values in the right pane:

• (default), Character string, with a value of MyButton
• Icon, Expendable Character string, with a value of c:\windows\system32\calc.exe, 0
• InfoTip, Character string, with a value of My Custom Tooltip
• Title, Character string, with a value of My Custom Item

When done right, you’ll end up with:

These values let Explorer know how our button should look like. They are self-explanatory, except for Icon, which takes a string in the form of PathToExeOrDllFile, iconNumber. In our example, we tell Explorer to use the first Icon from the Calculator.

We now have told Explorer what our custom button looks like, but not what it should do. We do this by adding a the following subkeys to our custom-button key: shell\InvokeTask\command. In the command key, we change the (Default) value to the application we want to launch when the button is clicked. Let’s put in c:\windows\system32\calc.exe to launch calc.

If you did everything right, you ended up with the following key structure under FolderTypes:

Now, if you go into the Contacts folder, you will see a My Custom Item button, which, when clicked, will launch the Calculator.

Next time we will delve into the TasksItemsSelected list, which has some additional properties!