• 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!

Yes that’s right, Builders! This week, AeroXperience was the first to get exclusive previews from Andreas Verhoeven’s Vista Style Builder.

I happen to be one of the fortunate people testing this application and giving feedback to Andreas mostly from an End-users Perspective. This Application does everything we could do before plus loads more. Whereas before we could only see numbers for images, now we will be looking at descriptions or, at the very least, class names. Instead of Hex-editing, we can insert/edit class properties using a language we can one day understand. At the moment, most of us will not understand what each Visual Style class does as they have not been publicly documented, so this is where I hope to step in and help.

I don’t want to Speak for Andreas as I am sure you will be hearing from him soon, but from what I gather, his plan is to make an application that the end-user can understand and use easily. Due to the large content of .msstyles, that will not be an easy thing to do. At the moment Avestyle is a Work in progress, but Andreas worked hard to make the application as usable and functional as possible. The actual core of the application works beautifully, but the UI is still in the process of being built. In the early builds, the Vista classes will be displayed in the application with the class name and a description.I am currently researching these classes to organize the Treeview in the application in a way where the user can find what he/she is looking for.

So Instead of researching image numbers and variant hex-edits, I will be focusing my attention on researching Vista class names and property names. This will most likely be more useful to us all as I am really confident that AveStyle is the way forward. Look out for more blog’s right here at AeroXperience about the new Customizing possibilities avestyle has to offer.

www.vistastylebuilder.com | Aves Pages | AeroXperience Forum Discussion

If anybody else would like to start getting familiar with class and property names, you will find the following links useful.

• Vista Visual Style Class names
• Property Identifiers

After I created a few Visual styles and struggled with the graphic design side of things, I turned my efforts to researching and documenting my methods for Resource Hacking and Hex-Editing. Resource Hacking is where it all starts. The first time I opened the .msstyle with Restorator, I did not know where to begin. All those image numbers meant nothing to me, but 12 months of research for much of what we need has already been documented.

In October 2007 Stardock released their solution to Customizing Vista; WindowsBlinds 6.0 adds full support for skinning Windows Vista as well as applying a host of new special effects to skins (blurred glass, advanced animations, etc.) Users also can create their very own WindowBlinds skins using SkinStudio 6 Pro.

However Stardocks solution does not suit everyone and In the last 12 months, skinners using the hacking methods have been documenting what they find; the vista customization community has really pulled together to share expertise.

UxTheme Patches: (To Date)

• Raphael’s uxTheme Patches
• Vista Glazz
• PsycoB’s Style Selector

Tools:

• ResHacker (Resource Hacker)
• Restorator 2007 (Resource Hacker)
• Mirkes Tiny Hexer (Hex-Editor)
• XVI32 Hex Editor (Hex-Editor)
• Alpha Image Converter
• Png Alpha Fixer

Documentation: (Threads and Tutorials)

• How to make Aero.msstyles compatible pngs
• How to make a Visual Style for Windows Vista
• The Resource Research Thread
• Aero Resource ID’s (Wiki)
• Decimal to Hex (Calc.exe)
• Hex-Editng (general)
• Hex-Editng (Margins)