StylesSheetManager - A 'CSS like component' for WinForms

• Download demo project - 27.9 Kb
• Download source - 55.3 Kb

Introduction

When you create an ASP.NET application, you can use a CSS file to style your graphic controls, using the CssClass property. But actually, there is no such solution for WinForms applications. Now, there is one: the StylesSheetManager.

Using the component

To use the StylesSheetManager, you only have to do the following:

1. Create a styles sheet file (an XML file). The XML file containing the styles should be defined like the following:
   XML

   <?xml version="1.0" encoding="utf-8" ?>
   <StylesSheetFile xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
                    xmlns:xsd="http://www.w3.org/2001/XMLSchema">
       <Styles>
           <Style Name="FormType1">
               <Properties>
                   <Property Name="BackColor" Value="White" />
                   <Property Name="Text" Value="Personal information" />
                   <Property Name="Enabled" Value="true" />
               </Properties>
           </Style>
           <Style Name="DataGridType1">
               <Properties>
                   <Property Name="RowsDefaultCellStyle.BackColor" 
                             Value="White" />
                   <Property Name="AlternatingRowsDefaultCellStyle.BackColor" 
                             Value="214,222,247" />
                   <Property Name="Columns[0].HeaderText" 
                             Value="Color name" />
                   <Property Name="Columns[1].HeaderText" Value="My rate" />
               </Properties>
           </Style>
           <Style Name="TabControlType1">
               <Properties>
                   <Property Name="Enabled" Value="true" />
                   <Property Name="TabPages[0].BackColor" Value="White" />
                   <Property Name="TabPages[1].BackColor" Value="White" />
                   <Property Name="TabPages[2].BackColor" Value="White" />
               </Properties>
           </Style>
           <Style Name="LabelType1">
               <Properties>
                   <Property Name="TextAlign" Value="TopLeft" />
                   <Property Name="BorderStyle" Value="None" />
                   <Property Name="ForeColor" Value="72,94,158" />
                   <Property Name="Font" 
                             Value="Microsoft Sans Serif,8.25pt,style=Regular" />
                   <Property Name="Height" Value="20" />
                   <Property Name="Enabled" Value="true" />
               </Properties>
           </Style>
           <Style Name="LabelType2">
               <Properties>
                   <Property Name="ForeColor" Value="Red" />
                   <Property Name="Font" 
                             Value="Microsoft Sans Serif,8.25pt,style=Bold" />
               </Properties>
           </Style>
           <Style Name="TextBoxType1">
               <Properties>
                   <Property Name="TextAlign" Value="Left" />
                   <Property Name="BorderStyle" Value="Fixed3D" />
                   <Property Name="Font" Value="Tahoma,10,style=Regular" />
                   <Property Name="Height" Value="20" />
                   <Property Name="Width" Value="200" />
                   <Property Name="BackColor" Value="214, 222, 247" />
               </Properties>
           </Style>
           <Style Name="HyperLinkType1">
               <Properties>
                   <Property Name="BorderStyle" Value="None" />
                   <Property Name="ForeColor" Value="Blue" />
                   <Property Name="Font" 
                             Value="Tahoma,10,style=Italic,Underline" />
                   <Property Name="Height" Value="30" />
                   <Property Name="Width" Value="200" />
                   <Property Name="Enabled" Value="true" />
               </Properties>
           </Style>
           <Style Name="ButtonType1">
               <Properties>
                   <Property Name="TextAlign" Value="TopLeft" />
                   <Property Name="ForeColor" Value="Black" />
                   <Property Name="BackColor" Value="214;222;247" />
                   <Property Name="Font" Value="Tahoma,8.25,style=Italic" />
                   <Property Name="Height" Value="23" />
                   <Property Name="Enabled" Value="true" />
               </Properties>
           </Style>
           <Style Name="ComboBoxType1">
               <Properties>
                   <Property Name="BackColor" Value="White" />
                   <Property Name="Font" Value="Tahoma,10,style=Italic" />
                   <Property Name="Height" Value="30" />
                   <Property Name="Width" Value="200" />
                   <Property Name="Enabled" Value="true" />
               </Properties>
           </Style>
           <Style Name="RadioButtonType1">
               <Properties>
                   <Property Name="ForeColor" Value="Blue" />
                   <Property Name="Font" Value="Verdana,8,style=Regular" />
                   <Property Name="Width" Value="150" />
                   <Property Name="Enabled" Value="true" />
               </Properties>
           </Style>
       </Styles>
   </StylesSheetFile>

   As you can see, a style is defined by a name and properties. The property tag corresponds to a property of the control you want to style. It is defined by a name (e.g.: BackColor) and a value (e.g.: 255;124;157). Because the StylesSheetManager component uses TypeConverter, internally, to convert a value stored in an XML file to an object, you must respect the TypeConverter format (e.g.: value="Microsoft Sans Serif;8,25pt;style=Bold, Italic"). See the MSDN site for more explanations.

2. Drop a StylesSheetManager component on your form.

   

3. Select the style sheet file you want to use. To do it, just add a StylesSheetFilename key to the appSettings section of the app.config file, like the following:

   

4. Last but not least, set the Style property of the controls of your form (not all, just the ones you want to style) to a value which is present in the style sheet file.

   

5. Now, just launch your application.

Points of interests

• IExtenderProvider: this component is based on the IExtenderProvider interface which permits to add properties to controls at design time (see the StylesSheetManager.cs file).
• Serialization: The XmlSerializer.Deserialize()method is used to read the styles sheet file (see the StylesSheetFileManager.cs file) which permits us to easily do the inverse operation: save the styles in XML.
• Reflection/TypeDescriptor: To get/set value to a property of a control, Reflection is used. To convert a string stored in an XML file to the right type of property, TypeDescriptor is used (see the PropertySetter.cs file).
• Exception management / Localization: all exceptions thrown by this component are grouped in the StylesSheetException class. The messages corresponding to these exceptions are stored in a resource file, and is available in English.
• EnvDTE namespace (Environment Design Time): Displaying the new appearance of controls at design-time is a little more complicated than at execution time. Indeed, when you click on a form to open it in the designer, the executing application is devenv.exe, and so the configuration is devenv.exe.config, and not the one of the current project. Because I need app.config to store the StylesSheetFilename, I had to use the EnvDTE namespace (see GetAppConfigPath() in the StylesSheetManager.cs file) to retrieve the good configuration file.

History

• 2006/10/14
  • Make the read of the styles sheet file independent of the regional settings of the operating system. To do it, I force the thread to English culture => The format of the file has changed. Now, the list separator is "," and the decimal separator is ".". To be able to continue to use your old version styles sheet file, do the following: replace all "," by ".", then all ";" by ",". For composed style font ("Tahoma,8.25,style=Italic,Underline"), make sure there is a "," between styles (Italic,Underline) and not a "."
• 2006/09/24
  • a new Form (ChildForm3_Dynamic) has been added to the demo to demonstrate the use of the StylesSheetManager component with dynamic control creation. improved error messages, and now all messages are in English (instead of French).
• 2006/07/30
  • the appearance of the controls is visible in the designer (style is set when opening a form in the designer): thanks to "Emanuele" (post).
  • the style sheet file name is stored in app.config, and becomes the same for all forms => performance increase (file is read only once): thanks to "Yancyn" (post).
• 2006/07/19
  • the indexed properties are managed: thanks to "Matt" (post).
• 2006/07/14
  • first version.

Conclusion

I hope you will enjoy this component. I really want to thank "Atlas2002" who wrote the first message on this article and encouraged me to continue.