VisualStyler.

Net is the ultimate skinning component for WinForms developers, it includes an

advanced Skin editor, Visual Studio Add-in and direct support for Microsoft Visual Styles
along with 31 built-in Skins, including Office 2010,Office 2007 and Mac-OSX themes

Overview

VisualStyler.Net is the premium skinning component for Windows Forms .Net developers, the
product is supplied with an advanced skin editor and 31 professional skins including Office
2007, Office 2010, Windows 7, Windows Aero, Windows Metro, Windows XP and Mac-OSX and
you can also use any Microsoft Visual Style to skin your applications. With currently over 2000
visual styles to choose from, your applications can really stand out from crowd.

General Features

Automatically skins your entire .NET application.

Supplied with 31 professional visual styles.
Choose from 3 translucent form shadow effects.
Choose from 7 professional ToolStrip rendering styles.
Skins the entire set of window forms .NET controls.
 Skins all forms and MDI forms applications.
Skins all of the native system scrollbars.
Skins all of the common dialogs such as OpenFileDialog, PrintDialog etc.
Full support for control image and background image properties.
Full support for WinForms control background transparency.
Full support for multithreaded forms and user interfaces.
High quality rendering produces smooth flicker free drawing.
Easy to use component API lets you customize what is skinned.
Uses hardware accelerated drawing methods on all platforms.
Supports 16-bit, 24-bit and 32-bit color depths.
Does not require uxtheme or 'theme aware' OS platforms.
Written entirely in 100% managed C#.
Compatible with NET 2.0, NET 3.0, NET 3.5 and NET 4.0.
Implemented as a single .NET component assembly dll.

Supported Environments

VB.Net, C#.Net, MC++.Net

Visual Studio .NET 2005
Visual Studio .NET 2008
Visual Studio .NET 2010
Visual Studio .NET 2012
Visual Studio .NET 2013
Visual C# Express Editions
Visual VB.Net Express Editions
Visual C++.NET Express Editions

Supported Platforms

Windows 2000
Windows 2003
Windows 2003 64-bit
Windows XP
Windows XP 64-bit
Windows Vista
Windows Vista 64-bit
Windows 7
Windows 7 64-bit
Windows 8
Windows 8 64-bit
© 2014 CSS Ltd All rights reserved

Design-time Integration

VisualStyler comes supplied with a Visual Studio add-in which completely extends the Visual
Studio design-time IDE providing developers with a rich WYSIWYG design-time skinning
experience. The component uses the latest smart-tag designers, making the component very
easy to setup and configure.

The smart-tag designer enables you to quickly

setup the component and access all of the
design-time features.

The style browser dialog enables you to

browse, preview, and select any visual style
from the style gallery.

The style import wizard enables you to

import new visual styles from any msstyles
file or zip archive.

Designer Features

VisualStyler uses the latest smart-tag designers making the component extremely easy to setup
and use, and for a fully skinned design-time experience you can use the supplied Visual Studio
add-in which extends Visual Studio to support WYSIWYG skinning on all forms, controls and
user controls. So you can now design your skinned application GUI just as you would with any
other normal windows forms application.

Designer Tasks

The designer task smart-tag panel gives you convenient access all of the design-time features
local to the component. In less than a few clicks your application is skinned without having to
write a single line of code.
 Figure 1. The Smart-tag panel

Quick property setup

Style browser dialog
Style import dialog
Component customization
License activation

Designer Style Browser

The Style browser enables you to browse, preview and select any visual style at design-time.
The browser displays the default 10 supplied styles and you can import any number of new
visual styles. Imported visual styles are automatically grouped and added to the browsers
catalog.

Figure 2. The Style browser dialog

WYSIWYG preview
Browse default styles
Browse imported styles
Import new visual styles
Remove styles

Designer Import Wizard

The style import wizard enables you to import any number of new visual styles. You can import
directly from an msstyles file or a zip archive. VisualStyler extracts the raw visual style and
converts it into compact XML markup. All imported visual styles are automatically stored in the
style gallery and are visible in the style browser.

Skin Gallery

We've prepared a list of some of the best Visual Styles available, using VisualStyler.Net you can
skin your applications with any one of the 2000 or more skins currently available. These skins
will give your applications an instant modern and professional appearance. Simply click on the
download link and save the msstyles file to a temporary folder, then use the Built-in Visual Style
Import Tool to add the skin permanently to your collection.
Aluminum Alloy Aluminum Alloy Aluminum Alloy Aluminum Alloy Ambient

Antixero Antixero Antixero Aqualux Aquanox

Aquanox Artemis Aurum Bnw B-ranged

CarbonPro3 CarbonPro3 CarbonPro3 Celshaded Celshaded

Chameleon Chocolate Clearlooks06 ConcaveC ConcaveD

ConcaveL Core Core Cosmo Cybertron

Duo Earthcg Emperor Jedi Ex2008 Fatale

Fatale Fresco Fresco GelXP GelXP

GelXP Glaskalas Glaskalas Glaskalas Milkvista

Milkvista Milkvista Milkvista Milkvista Milkvista

Grasscg Greenius Grenox GuiRelax GuiRelax

GuiRelax GuiRelax Halcyon Hex Human

Human Human Human Human HumanCG

Hydrangea Hydrangea Hydrangea Hydrangea Hydrangea

Hydrangea Islander Islander JaguarXP Kemikal

Klarheit Klarheit Kroma Kuantum Kuantum

KupoXP KupoXP KupoXP KupoXP KupoXP

KupoXP KupoXP KupoXP KupoXP Lakrits

LK Luder Luder Luder Luna Inspirat

Luna Inspirat Sleek Sustenance Sustenance Sustenance

Sustenance Sustenance Titan Black Titan Blue Violex

Figure 3. The Style import wizard

WYSIWYG preview
Import from msstyle
Import from zip archive
Preview any visual style
Browse all color schemes

Importing Visual Styles

VisualStyler allows you to import any Microsoft Visual Style at design-time, visual styles can be
imported directly from an msstyles file or from a Zip archive. The 'Import Visual Style' task can
be found on the VisualStyler designer and at the bottom of the VisualStyler properties window.

Step 1.

Open the main form of your application and click on the VisualStyler component and select the
designer tasks by clicking on the small arrow on the top right hand corner. This will reveal the
designer panel as shown below, now click on the 'Import Visual Styles' link.
Step 2.

This will display the import style dialog. Select the 'Zip Archive' option and click Open Zip to
choose a Zip file, the Zip file is assumed to contain one or more msstyles files.
Step 3

Select the Zip file using the file open dialog, click Ok or Cancel.

Step 4

After selecting a Zip file the dialog will display a list of all msstyles in the Zip archive. You can
then select which style to import from using the style listbox. Click Import, and the visual style
will be extracted from the zip and displayed.
Step 5

You will now see a preview of the visual style with the default color scheme. You can preview all
of the available color schemes using the color scheme drop-down box. Click OK to accept the
current selection or Cancel to quit.

The style will now be converted to a VisualStyler file (.vssf) and saved in the skin gallery under
'Custom Skins'. If you are using the VisualStyler add-in, the skin will automatically be applied to
any open forms.
Visual Studio Edition Setup
After the VisualStyler.Net setup has completed, start Visual Studio and then open or create a
new Windows Forms Project. Open the main application Form in the forms designer, and you
will notice a new Toolbox tab named 'SkinSoft VisualStyler' with the VisualStyler component in
this tab. Visual Studio Express uses will need to manually add VisualStyler to the toolbox using
the following steps
Installing the VisualStyler Add-in

The VisualStyler add-in supports the Visual Studio 2005, 2008 and 2010 IDE's. If you wish to use
the VisualStyler design-time skinning features then you will need to activate the VisualStyler
add-in. On the main Visual Studio toolbar select Tools->Add-in Manager to show the Add-in
Manager dialog. Please note, if you are using Visual Studio 2008 on Windows Vista, then you
will need Administrator permissions in order to configure Add-in settings on this platform.
In the dialog under available add-ins you will see an entry for the VisualStyler component,
please check this item in the 'Available Add-ins' column and also check the 'Startup' column.
Click OK, the add-in will now automatically load when Visual Studio starts. If you are using the
add-in with Visual Studio 2008 then you will need to start Visual Studio as an Administrator in
order to configure add-in settings.
Now drag the VisualStyler component from the Toolbox onto the form, after doing this the
component will be visible in the component tray, and the VisualStyler designer will
automatically display with the default options. When you click on the form you will also notice
the VisualStyler add-in is visible alongside the other Visual Studio toolbars. If you wish , you can
now move this to a preferred location and Visual Studio will remember its position at startup.

Installing the Add-in on Visual Studio 2008 under Windows Vista

Visual Studio 2008 runs as a 'Standard User' account on Windows Vista ( even though you may
have an Administrator account ) and when you open the add-in manager and attempt to select
the VisualStyler component, Visual Studio is unable to save the setting to the registry because
of insufficient access rights.

Please carry out the following steps to resolve this issue :-

1. Run Visual Studio has an Administrator using one of the following methods :-
o Launch "C:\Program Files\Microsoft Visual Studio
9.0\Common7\IDE\devenv.exe" as Administrator.
 o Modify your shortcut to VS2008 by bringing up the shortcut properties, click
Advanced and check the 'Run as Administrator' box.

2. Bring up the Add-In manager you will see the Startup checkbox is now enabled, you
need to check just this column.
3. You could could continue to run VS2008 has Administrator by modifying the shortcut as
described above, or run in the standard
user mode in which case the Startup checkbox will be checked but disabled.

Visual Studio Express Setup

After the VisualStyler.Net setup has completed, start Visual Studio Express and then open or
create a new windows forms project. Open the main application form in the forms designer.

Visual Studio Express editions do not include the IDE automation and extensibility layer,
therefore you will now need to add the component to the Visual Studio Toolbox. .Click on the
Toolbox and create a new Toolbox tab named 'SkinSoft VisualStyler'
Click on the tab to select it, and then right mouse button to bring up the context menu, and
select the option 'Choose Items" to display the Choose Toolbox Items dialog.
Click on the .NET Framework Components tab and sort the list by Name, scroll through the list
until you see the VisualStyler component. Select the component and ensure it is checked then
click OK.

Installing the VisualStyler add-in

The VisualStyler add-in extends the Visual Studio design-time IDE to support skinned Forms,
UserControls and Controls. The add-in presents itself has a standard Visual Studio toolbar
alongside the existing IDE toolbars. The add-in automatically skins your project user interface
whenever you create or open a project that has an instance of the VisualStyler component sited
on a Form.
The VisualStyler add-in is designed to work with C#, VB.Net and C++.Net Windows Forms
project types. The add-in toolbar is very intuitive and functions almost in the same way as the
Visual Studio control layout toolbar, that is it is visible whenever the currently active document
is a Form or UserControl. If the Form with the VisualStyler component is currently open then
the add-in automatically synchronizes the skin with the VisualStyler settings.

Activating the VisualStyler Add-in

If you wish to use the VisualStyler design-time skinning features then you will need to activate
the VisualStyler add-in after the product installation. On the main Visual Studio toolbar select
Tools->Add-in Manager to show the Add-in Manager dialog. Please note, if you are using Visual
Studio 2008/2010 on Windows Vista or Windows 7, then you will need Administrator
permissions in order to configure Add-in settings on this platform.
In the add-in manager dialog under available add-ins you will see an entry for the VisualStyler
component, please check this item in the 'Available Add-ins' column and also check the
'Startup' column. Click OK, the add-in will now automatically load when Visual Studio starts.

Installing the Add-in on Visual Studio 2008/2010 under Windows Vista or Windows 7

Visual Studio 2008 runs as a 'Standard User' account on Windows Vista ( even though you may
have an Administrator account ) and when you open the add-in manager and attempt to select
the VisualStyler component, Visual Studio is unable to save the setting to the registry because
of insufficient access rights.

Please carry out the following steps to resolve this issue :-

1. Run Visual Studio has an Administrator using one of the following methods :-
o Launch "C:\Program Files\Microsoft Visual Studio
9.0\Common7\IDE\devenv.exe" as Administrator.
o Modify your shortcut to VS2008 by bringing up the shortcut properties, click
Advanced and check the 'Run as Administrator' box.

2. Bring up the Add-In manager you will see the Startup checkbox is now enabled, you
need to check just this column.
3. You could could continue to run VS2008 has Administrator by modifying the shortcut as
described above, or run in the standard
user mode in which case the Startup checkbox will be checked but disabled.
The VisualStyler component has now been added to the Visual Studio Toolbox, now drag the
VisualStyler component from the toolbox onto the form, after doing this the component will be
visible in the component tray, and the VisualStyler designer will automatically display with the
default options.
Build the project, then run - this application is now skinned , you can easily customize the
VisualStyler either using the component properties window or through its designer tasks.

Using the VisualStyler designer

VisualStyler supports the new Visual Studio smart tag designers available in the Visual Studio
and Visual Studio Express editions, The designer can be activated ant anytime by clicking on the
component in the Visual Studio component tray and then clicking on the small arrow on the
top right hand corner. This designer panel makes it easy to access all of the design-time
features from one convenient location.
VisualStyler designer tasks

The designer exposes the following properties and actions :-

Visual Style
Displays the current visual style and optionally allows you to select a new one.
Save As Application Resource
If this option is checked the visual style will be embedded in the application as a resource, and
you do not need to deploy the VSSF file with you application.
Browse Visual Styles
Displays the style browser dialog, allowing you to browse, preview and select a new visual style.
Import Visual Styles
Displays the import style dialog, allowing you to import a new visual style from a MsStyles file
or Zip archive.
Skin Mode
Determines how the application is skinned, we recommend you use Automatic skin mode.
Target Controls
Determines which forms and controls should be skinned in the application.
Exclude Skin Tag
Specifies the global exclude tag, any forms or controls whose Tag property matches this value,
will not have the skin applied.
 Shadow Style
Specifies the form shadow style that is applied to all forms and dialogs.
ToolStrip Style
Specifies the application ToolStrip rendering style.
Skin Common Dialogs
Determines whether to skin the common dialogs such as the OpenFileDialog, FontDialog, this
also applies to any win32 system dialog.
Register License
Displays the License activation dialog, if you decide to purchase a licence then you need to
register your license details here, in order to unlock the product.

Using the VisualStyler Add-in

The VisualStyler add-in extends the Visual Studio design-time IDE to support skinned Forms,
UserControls and Controls. The add-in presents itself has a standard Visual Studio toolbar
alongside the existing IDE toolbars. The add-in automatically skins your project user interface
whenever you create or open a project that has an instance of the VisualStyler component sited
on a Form.
The VisualStyler add-in is designed to work with C#, VB.Net and C++.Net Windows Forms
project types. The add-in toolbar is very intuitive and functions almost in the same way as the
Visual Studio control layout toolbar, that is it is visible whenever the currently active document
is a Form or UserControl. If the Form with the VisualStyler component is currently open then
the add-in automatically synchronizes the skin with the VisualStyler settings.

Visual Studio 2005 and 2008 Add-in Toolbar Layout

The add-in supports the following toolbar commands :-

Browse Styles
Browse and select a new visual style using the style browser dialog.
Import Styles
Import a new visual style using the style import dialog.
 Select Style
Selects one of the default styles, the drop down list provides quick access to the following built-
in styles :-

XP (Blue)
XP (Olive)
XP (Silver)
XP (Royale)
Vista (Basic)
Vista (Aero)
Vista (Black)
Vista (Silver)
Vista (Green)
Vista (Teal)
Aero (Blue)
Aero (Black)
Aero (Silver)
Office (Blue)
Office (Black)
Office (Silver)
OSX (Aqua)
OSX (Panther)
OSX (Tiger)
OSX (Leopard)
OSX (iTunes)
OSX (Brushed)
Custom Style...

Toggle Preview
Toggle the design-time skin preview, The skin can be shown / removed at any time this applies
to all forms and controls.

Visual Studio 2010 Add-in Toolbar Layout

The add-in supports the following toolbar commands :-

 Browse Styles
Browse and select a new visual style using the style browser dialog.
Import Styles
Import a new visual style using the style import dialog.
Toggle Preview
Toggle the design-time skin preview, The skin can be shown / removed at any time this applies
to all forms and controls.
Selecting Visual Styles at design-time
VisualStyler enables you to select, preview and import visual styles at design-time. There are 22
default styles provided with the product, and these can be selected at any time by either using
the VisualStyler add-in, component designer or properties window. However there is currently
over 2000 visual styles freely available, and you can import any number of new styles which are
automatically added to this list.
Step 1. For this example we will use the component designer, Open the main form of your
application and click on the VisualStyler component and select the designer tasks by clicking on
the small arrow on the top right hand corner. This will reveal the designer panel as shown
below, now click on the 'Browse Visual Styles' link.
 Step 2. You will now see the Style browser dialog, this enables you to browse through all of
the available skins, this list includes the 22 skins we provide and any imported skins. The skins
can be displayed in a List or Thumbnail format which can be selected by clicking on either the
list or thumbnail button on the browser Toolbar.
 Step 3. Select a skin from the list and click OK or Cancel. If you are using the VisualStyler add-
in, the skin will automatically be applied to any open forms, otherwise if the 'Save as Resource'
option is set then the skin will be embedded in your application as a resource.
Importing skins from MsStyles
VisualStyler allows you to import new visual styles at design-time, visual styles can be imported
directly from an msstyles file or from a zip archive. The import visual style task can be found on
the VisualStyle designer and at the bottom of the VisualStyler properties window. By default
visual styles are automatically embedded into your application as a resource, unless the
SaveAsResource property is false.
Step 1. For this example we will use the component designer, Open the main form of your
application and click on the VisualStyler component and select the designer tasks by clicking on
the small arrow on the top right hand corner. This will reveal the designer panel as shown
below, now click on the 'Import Visual Styles' link.
 Step 2. This will display the import style dialog. The default option is to import directly from
an msstyles file, click Import to choose a msstyles file.
 Step 3. Select the msstyles file using the file open dialog, click Ok or Cancel.

Step 4. After selecting the file you will then see a preview of the visual style with the default
color scheme. You can preview all of the available color schemes using the color scheme drop-
down box. Click OK to accept the current selection or Cancel to quit.

The style will now be converted to a VisualStyler file (.vssf) and saved in the skin gallery under
'Custom Skins'. If you are using the VisualStyler add-in, the skin will automatically be applied to
any open forms, otherwise if the 'Save as Resource' option is set then the skin will be
embedded in your application as a resource.

Important Notes

Don't be surprised if some visual styles only have one available color scheme or selecting other
color schemes does not appear to change the skin, this is because these color schemes may
only affect UI elements that you wouldn’t normally see in a winforms application such as the
Taskbar, Explorer bar ect.
mporting skins from Zip archives
VisualStyler allows you to import new visual styles at design-time, visual styles can be imported
directly from an msstyles file or from a zip archive. The import visual style task can be found on
the VisualStyle designer and at the bottom of the VisualStyler properties window. By default
visual styles are automatically embedded into your application as a resource, unless the
SaveAsResource property is false.

Step 1. For this example we will use the component designer, Open the main form of your
application and click on the VisualStyler component and select the designer tasks by clicking on
the small arrow on the top right hand corner. This will reveal the designer panel as shown
below, now click on the 'Import Visual Styles' link.

Step 2. This will display the import style dialog. Select the 'Zip Archive' option and click Open
Zip to choose a Zip file, the Zip file is assumed to contain one or more msstyles files.
 Step 3. Select the Zip file using the file open dialog, click Ok or Cancel.

Step 3. After selecting a Zip file the dialog will display a list of all msstyles in the Zip archive.
You can then select which style to import from using the style listbox. Click Import, and the
visual style will be extracted from the zip and displayed.
 Step 4. You will now see a preview of the visual style with the default color scheme. You can
preview all of the available color schemes using the color scheme drop-down box. Click OK to
accept the current selection or Cancel to quit.

The style will now be converted to a VisualStyler file (.vssf) and saved in the skin gallery under
'Custom Skins'. If you are using the VisualStyler add-in, the skin will automatically be applied to
any open forms, otherwise if the 'Save as Resource' option is set then the skin will be
embedded in your application as a resource.
Important Notes

Don't be surprised if some visual styles only have one available color scheme or selecting other
color schemes does not appear to change the skin, this is because these color schemes may
only affect UI elements that you wouldn’t normally see in a winforms application such as the
Taskbar, Explorer bar ect.
Embedding VisualStyler skins
By default VisualStyler will automatically embed the selected visual style into your applications
at design-time, and you do not need to write any code. This behaviour is controlled by the
SaveAsResource setting on the component designer, if this is set to false then you will need to
deploy the skin file separately.

However you might want to provide your users with a choice of skins, and this is very easy to
do, in the following example we have a simple application that provides two skins at runtime.
Both skins are embedded into the application and are loaded when the user clicks the
appropriate button, you will need to carry the following tasks :-

Example solution layout

Create a folder 'Skins' in the root of your application solution.

 Select the folder and right-click Add->Add Existing Item.
In the file dialog navigate to the skins folder and select one or more skins, and click OK.
Bring the properties window up and for each file set the 'Build Action' to 'Embedded
Resource'.

Example C# code

The following sample code is taken from the main form above, and as you can see when each
button is clicked, we simply obtain the resource stream for each skin and then use the
VisualStyler LoadVisualStyle method to load directly from the stream. Using this method you
can ship any number of VisualStyler skins with your application.
using System;
using System.Reflection;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
namespace WindowsApplication1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

//<------------------------------------------------------------------->
/// <summary>
/// Handles the LoadVistaAeroSkin button click event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>

private void btnLoadVistaAeroSkin_Click(object sender, EventArgs e)

{
// Get the resource path for the Aero skin
string skinName = @"WindowsApplication1.Skins.Vista (Aero).vssf";

// Load the skin directly from the resource stream

visualStyler1.LoadVisualStyle(Assembly.GetExecutingAssembly().GetManifestResourceStream(s
kinName));
}

//<------------------------------------------------------------------->
/// <summary>
/// Handles the LoadAquaSkin button click event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>

private void btnLoadAquaSkin_Click(object sender, EventArgs e)

{
// Get the resource path for the Aqua skin
string skinName = @"WindowsApplication1.Skins.OSX (Aqua).vssf";

// Load the skin directly from the resource stream

visualStyler1.LoadVisualStyle(Assembly.GetExecutingAssembly().GetManifestResourceStream(s
kinName));
}
}
}

Example VB.Net code

The code for Visual Basic is identical except that Visual Basic stores assembly resources
differently than C#, in Visual Basic the resource is accessed through the root namespace and
then the resource name i.e MyApplication.MySkin.vssf, where as resources in C# are accessed
using there fully qualified name.
Imports System
Imports System.Reflection
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports System.Windows.Forms

Namespace WindowsApplication1
Partial Public Class Form1
Inherits Form
Public Sub New()
InitializeComponent()
End Sub

'<------------------------------------------------------------------->
''' <summary>
''' Handles the LoadVistaAeroSkin button click event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>

Private Sub btnLoadVistaAeroSkin_Click(ByVal sender As Object, ByVal e As EventArgs)

' Get the resource path for the Aero skin
Dim skinName As String = "WindowsApplication1.Vista (Aero).vssf"

' Load the skin directly from the resource stream

visualStyler1.LoadVisualStyle(System.Reflection.Assembly.GetExecutingAssembly().GetManifest
ResourceStream(skinName))
End Sub

'<------------------------------------------------------------------->
''' <summary>
''' Handles the LoadAquaSkin button click event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>

Private Sub btnLoadAquaSkin_Click(ByVal sender As Object, ByVal e As EventArgs)

' Get the resource path for the Aqua skin
Dim skinName As String = "WindowsApplication1.OSX (Aqua).vssf"

' Load the skin directly from the resource stream

visualStyler1.LoadVisualStyle(System.Reflection.Assembly.GetExecutingAssembly().GetManifest
ResourceStream(skinName))
End Sub
End Class
End Namespace
VisualStyler skin folder paths
VisualStyler skins are implemented in XML markup with the extension vssf. At design-time the
VisualStyler component automatically stores all default styles and imported styles in the public
documents folder as follows :-

Windows XP Skins Folder

C:\Documents and Settings\All Users\Documents\SkinSoft\VisualStyler\Skins\.

Windows Vista Skins Folder

C:\Users\Public\Documents\SkinSoft\VisualStyler\Skins\.