Export (0) Print
Expand All

Using Windows XP Visual Styles With Controls on Windows Forms

Visual Studio .NET 2003
 

Seth Grossman
Visual Studio Team
Microsoft Corporation

January 2002

Summary: Windows XP has introduced a new look and feel to the Windows user interface (UI). Composed of the same controls that ship with Visual Studio .NET, the Windows XP UI features an updated, ultra-modern look. Controls with rounded corners that light up on mouse over and a futuristic ProgressBar control are two of the enhancements Windows XP introduces.

The question most Visual Studio developers will ask is "How can I get these cool controls in my applications?". All that is required is adding a few references and a resource file to your application. This article covers how to incorporate Windows XP visual styles into your Visual Basic and Visual C# Windows applications and illustrates it by creating a simple application. (8 printed pages)

Note   The features described in this article only apply to applications running on the Windows XP operating system.

Contents

Introduction
How Does It Know?
Manifest Is Best
Adding Visual Styles to Controls
Brave New World
Next Steps
Conclusion

Introduction

The controls that appear in Microsoft® Windows® XP have a new, futuristic look.

Figure 1

The controls available to developers in Microsoft Visual Studio®, by contrast, do not share this look, even though they are the same controls.

Figure 2

This article addresses how to make the Visual Studio controls look like the controls in Windows XP.

You can think of a form as being composed of two distinct parts: a client area and a non-client area. All applications running on the Windows XP operating system have a non-client area, which includes the window frame, title bar, and non-client scrollbars. The operating system applies a visual style to the non-client area by default, so that even without making the changes described below, you will see an updated title bar and scroll bars on Windows Forms running on Windows XP. This article describes how to make changes to the client area.

How Does It Know?

The appearance of the non-client area is specified by the visual style that is currently applied. The visual style is the user-modifiable appearance of the user interface of an application or operating system. As already mentioned, the form's scroll bars and title bar will change immediately when run on Windows XP. Some Windows Forms controls will assume their new guise as soon as the application is bound to version 6.0 of Comctl32.dll.

The controls that change visual style when bound to Comctl32.dll, version 6.0 are:

  • TextBox control
  • ListView control
  • RichTextBox control
  • TreeView control
  • HScrollBar control
  • DateTimePicker control
  • VScrollBar control
  • MonthCalendar control
  • ProgressBar control
  • Splitter control
  • TabControl control
  • TrackBar control
  • MainMenu control
  • StatusBar control
  • ContextMenu control
  • ToolBar control
  • ComboBox control
  • TreeView control
  • DataGrid control
  • ListView control
  • ListBox control
 

Other controls need more encouragement. Specifically, the controls that derive from the System.Windows.Forms.ButtonBase class (the Button, RadioButton, GroupBox and CheckBox controls) have a property, FlatStyle, that indicates how the controls should be drawn. This property is set using the FlatStyle enumeration, which allows controls to be drawn in the following ways:

Enumeration Member Description
Flat The control appears flat.
Popup A control appears flat until the mouse pointer moves over it, at which point it appears three-dimensional.
Standard The control appears three-dimensional.
System The appearance of the control is determined by the user's operating system.

As you can see above, when the FlatStyle property is set to System, the appearance of the control is determined by the user's operating system. This setting makes controls that have this property paint themselves in the manner of Windows XP.

Controls that change visual style when the FlatStyle property is set to System

  • Button control
  • RadioButton control
  • CheckBox control
  • GroupBox control

Finally, there are some Windows Forms controls that will look the same both in Windows XP and in Visual Studio.

Controls whose visual style does not change

  • Label control
  • LinkLabel control
  • DomainUpDown control
  • NumericUpDown control
  • CheckedListBox control

Manifest Is Best

If you want your application to use visual styles, you must add an application manifest (a file used during the build process to specify a certain resource) that indicates that Comctl32.dll version 6 should be used if it is available. Version 6 includes some new controls and new options for other controls, but the biggest difference is support for changing the appearance of controls in a window.

Unlike earlier versions of Comctl32.dll, version 6 is not redistributable. The only way you can use version 6 of the dynamic-link library (DLL) is to use an operating system that contains it. Windows XP ships with both version 5 and version 6. By default, applications use the common controls defined in Comctl32.dll version 5 (user controls are defined in User32.dll). Comctl32.dll version 6 contains both the user controls and the common controls. By changing the .dll associated with these controls, you are able to apply Windows XP visual styles to them.

To be visually compatible with the operating system on users' computers, the Windows application you create below uses a manifest file to explicitly specify that the Windows Forms controls use Comctl32.dll, version 6.0. A manifest file is an XML file that is included in your application as a resource or is otherwise present in a separate file that resides in the executable file's directory.

Thus, in order to use Windows XP visual styles in your Windows Forms application, you must:

  • Set each control that has a FlatStyle property to FlatStyle.System.
  • Create a manifest file to bind your application to Comctl32.dll, version 6.0. The sample manifest file below can be used to bind any application created with Visual Studio .NET to Comctl32.dll.
  • Add this resource (the manifest) to your executable file and rebuild it.

Adding Visual Styles to Controls

The easiest way to learn to apply Windows XP visual styles is to try an example. The rest of this article describes how to create a simple application and make the controls on the forms of that application pick up the Windows XP visual style that is currently applied to the operating system.

In the following procedures, you will:

  • Create a Windows Application project and add controls to it.
  • Create the manifest file that binds your application to the DLL that provides visual styles for Windows XP.
  • Move the manifest file to the executable file's directory.
  • Add a resource (the manifest) to the executable file.

So let's begin. First, create your Windows application project.

Create the Project

To create a project and arrange controls on a form

  1. Create a Windows Application project. For more information on creating a Windows application, see Creating a Windows Application Project.
    Note   Be sure to take note of both the name of the project and what directory you save it to, as these will be important later on.
  2. From the Toolbox, drag the following controls to your form and arrange them:
    • Button control
    • RadioButton control
    • ProgressBar control
    • CheckBox control
    • Label control
      Note   A Label control is included on the form, even though its appearance will not change, as a contrast to the controls that will pick up the visual style. Refer to the tables above for a list of controls that change via Comctl32.dll, controls that change when the FlatStyle property is set, and controls that do not change appearance.
  3. Set the Button, RadioButton, and CheckBox control's FlatStyle property to System.
    Tip   To set all three controls at once, click each one while pressing the CTRL key until all are selected. In the Properties window choose System from the drop-down box next to the FlatStyle property.
  4. Double-click the Button control to add a Click event handler.

    The Code Editor opens with the insertion point in the event handler.

  5. Add the following code to set the ProgressBar control's Value property, so that you will be able to see the new progress bar in action at run time.
    ' Visual Basic
    Private Sub Button1_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
       ProgressBar1.Value = 50
    End Sub
    
    // C#
    private void button1_Click(object sender, System.EventArgs e)
    {
       progressBar1.Value = 50;
    }
    
  6. From the Build menu, choose Build to build your solution.
  7. From the File menu, choose Save All to save your work.

Create the Manifest File

Next, create an XML file that binds your application to the correct version of Comctl32.dll.

To create and edit the manifest file

  1. In Solution Explorer, right-click the project. Point to Add, then click New Item.
  2. Perform these actions in the Add New Item dialog box:
    1. In the left-hand pane (Categories), click Local Project Items.
    2. On the right-hand pane (Templates), click Text File.
    3. In the name box, name the file in the following manner: <Executable Name>.exe.manifest. Thus, if your application is called MyXPApp, you would name the XML file MyXPApp.exe.manifest.
  3. Click the Open button to create the XML file and close the dialog box.

    The empty text file you added opens in the Text Editor.

  4. Add the following XML to the text file:
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
    <assemblyIdentity
       version="1.0.0.0"
       processorArchitecture="X86"
       name="Microsoft.Winweb.<Executable Name>"
       type="win32"
    />
    <description>.NET control deployment tool</description>
    <dependency>
       <dependentAssembly>
         <assemblyIdentity
           type="win32"
           name="Microsoft.Windows.Common-Controls"
           version="6.0.0.0"
           processorArchitecture="X86"
           publicKeyToken="6595b64144ccf1df"
           language="*"
         />
       </dependentAssembly>
    </dependency>
    </assembly>
    
    Tip   If the < and > symbols are replaced with &lt; and &gt; when you paste, remove the pasted text, and then re-paste the schema by right-clicking the design surface and choosing Paste as HTML on the shortcut menu.
  5. In the XML you just pasted, replace <Executable Name> with the actual name of your executable file, just as you did in step 2.
  6. From the Build menu, choose Build to build your solution.
  7. From the File menu, choose Save All to save the XML file.

Move the Manifest to the Executable File's Directory

Now, copy the manifest you created from the default location to the directory containing your executable file.

To move the manifest file

  1. In Windows Explorer, navigate to the directory where the Visual Studio solution is saved. This is the directory you saved it in during Step 1 of the "Create the Project" section.

    In this directory, you should see the manifest file we created in the section above (this is the file we named <Executable Name>.exe.manifest).

  2. Click the manifest to select it and, from the Edit menu, choose Copy.
  3. Now, open the obj directory and then the Debug or Release directory (depending on the build option you set in the development environment). This will be the directory containing your executable file (The executable file's name will be in the form of ProjectName.exe).
  4. From the Edit menu, choose Paste to put the manifest file into this directory.

Add the Manifest to the Executable File

Next, open the executable file within Visual Studio to add the manifest as a resource.

To add the manifest as a resource

  1. In the Visual Studio development environment, on the File menu, point to Open, then click File.
  2. Navigate to the directory containing this Visual Studio solution. This is the directory you saved it in during Step 1 of the "Create the Project" section.
  3. Open the obj directory and then the Debug or Release directory (depending on the build option you set in the development environment).
  4. Locate the executable file (it will be in the form of ProjectName.exe) and double-click it to open it with the Visual Studio environment.
  5. Right-click the executable file in the designer and choose Add Resource.
  6. In the Add Resource dialog box, click the Import button.
  7. Navigate to the manifest file you created, which should be located in the same directory as your solution.
    Note   Be sure that the Files Of Type field in the dialog box is set to All Files (*.*) so that you can see the manifest file in the file picker.
  8. Double-click the manifest file.

    The Custom Resource Type dialog box opens.

  9. In the Resource Type box, type RT_MANIFEST and click OK.
  10. In the Properties window, set the ID property to 1.
  11. From the File menu, choose Save All to save the changes you have made.

Brave New World

When you run your application, the controls on your Windows Form appear in the futuristic Windows XP visual style. Click the Button control to see the new look of the ProgressBar control.

When you deploy your application to computers running versions of Windows other than Windows XP, the manifest should be ignored, because version 6.0 of Comctl32.dll will not be present. Thus, your controls will appear as they normally do when created with Visual Studio .NET.

Next Steps

A more robust and reliable solution to the problem we address above would be to check both the version of the operating system and for the presence of an application manifest file in the same directory as the executable file, then dynamically change the FlatStyle property to System. This also allows for deployment via the XCopy command.

The code below implements logic such as this, with a procedure that iterates through the controls on the form to see if they derive from the ButtonBase class and, if so, to set the FlatStyle property appropriately.

' Visual Basic
Private Sub RecursivelyFormatForWinXP(control As Control)
   Dim x As Integer
   For x = 0 To control.Controls.Count - 1
      ' If the control derives from ButtonBase, 
      ' set its FlatStyle property to FlatStyle.System.
      If control.Controls(x).GetType().BaseType Is _
GetType(ButtonBase) Then
         CType(control.Controls(x), ButtonBase).FlatStyle = _
FlatStyle.System
      End If
      
      ' If the control holds other controls, iterate through them also.
      If control.Controls.Count > 0 Then
         RecursivelyFormatForWinXP(control.Controls(x))
      End If
   Next x
End Sub

// C#
private void RecursivelyFormatForWinXP(Control control)
{
   for(int x = 0; x < control.Controls.Count; x++)
   {
      // If the control derives from ButtonBase, 
      //  set its FlatStyle property to FlatStyle.System.
      if(control.Controls[x].GetType().BaseType == typeof(ButtonBase))
      {
         ((ButtonBase)control.Controls[x]).FlatStyle = FlatStyle.System; 
      }
  
      // If the control holds other controls, iterate through them also.
      if(control.Controls.Count > 0)
      {
         RecursivelyFormatForWinXP(control.Controls[x]);
      }
   }
}

Additionally, you will need to modify the form's Load event handler to see if Windows XP is running and whether the manifest file is present.

' Visual Basic
Private Sub Form1_Load(sender As Object, e As System.EventArgs)
   ' Makes sure Windows XP is running and
   ' a .manifest file exists for the EXE.
   If Environment.OSVersion.Version.Major > 4 And _
Environment.OSVersion.Version.Minor > 0 And _
System.IO.File.Exists((Application.ExecutablePath + ".manifest")) Then
      ' Iterate through the controls.
      Dim x As Integer
      For x = 0 To (Me.Controls.Count) - 1
         ' If the control derives from ButtonBase,
         ' set its FlatStyle property to FlatStyle.System.
         If Me.Controls(x).GetType().BaseType Is _
GetType(ButtonBase) Then
            CType(Me.Controls(x), ButtonBase).FlatStyle = _
FlatStyle.System
         End If
         RecursivelyFormatForWinXP(Me.Controls(x))
      Next x
   End If
End Sub

// C#
private void Form1_Load(object sender, System.EventArgs e)
{
   // Makes sure Windows XP is running and 
   //  a .manifest file exists for the EXE.
   if(Environment.OSVersion.Version.Major > 4 
     & Environment.OSVersion.Version.Minor > 0 
     & System.IO.File.Exists(Application.ExecutablePath + ".manifest"))
   { 
      // Iterate through the controls.
      for(int x = 0; x < this.Controls.Count; x++)
      {
         // If the control derives from ButtonBase,
         // set its FlatStyle property to FlatStyle.System.
         if(this.Controls[x].GetType().BaseType == typeof(ButtonBase))
         {
            ((ButtonBase)this.Controls[x]).FlatStyle = FlatStyle.System; 
         }
         RecursivelyFormatForWinXP(this.Controls[x]);
      }
   }
}

An additional area to examine is automating the steps described in this article, as they involve a great degree of interaction with Visual Studio. If you are creating multiple applications that use manifest files to set the visual style, you probably want a less cumbersome process than that outlined above. Creating a Visual Studio .NET Add-In to Provide Windows XP Theme Support steps through using Windows Forms to create an add-in for Visual Studio .NET that automatically sets up your code to use manifest files so that your applications have the Windows XP look and feel.

Conclusion

In this article, we have demonstrated that:

  1. Controls with Windows XP visual styles have an appearance different from that of standard Windows Forms controls in Visual Studio.
  2. You can manipulate the appearance of most Windows Forms controls to look like those of Windows XP.
  3. For most controls, this process entails binding them to a specific version of Comctl32.dll. For others, you need to set the FlatStyle property. Finally, some do not change at all.
  4. You can write code to check the version of the operating system and for the presence of a .manifest file and then set the appropriate properties dynamically.
Show:
© 2014 Microsoft