Click here to Skip to main content
Click here to Skip to main content

StylesSheetManager - A 'CSS like component' for WinForms

, 25 Oct 2006
Rate this:
Please Sign up or sign in to vote.
StylesSheetManager is a 'CSS like component' for Windows Forms applications.

Sample Image

Sample Image

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 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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Sylvain BLANCHARD
Web Developer
France France
Software developer for Capgemini company.

Comments and Discussions

 
Questionwhile editing stylesheets, changes not updating in forms PinmemberPrasannah16014-Sep-12 0:48 
AnswerRe: while editing stylesheets, changes not updating in forms Pinmembermon_compte_anti_spam13-Nov-12 6:01 
Questionhow can i add my own new style in this manager? [modified] Pinmemberkhushbujasmine20-Sep-11 20:19 
QuestionStylesSheetFilename error [modified] PinmemberMember 802085828-Jul-11 0:20 
AnswerRe: StylesSheetFilename error [modified] Pinmemberafcm66622-Aug-12 13:00 
GeneralI doesn't maintain this component anymore Pinmembermon_compte_anti_spam10-Jun-11 11:06 
QuestionIs StylesSheetManager.dll Free? Pinmemberajaypediredla2-Feb-11 21:54 
AnswerRe: Is StylesSheetManager.dll Free? Pinmembermon_compte_anti_spam10-Jun-11 11:05 
AnswerRe: Is StylesSheetManager.dll Free? PinmemberAnjaniRahul2-May-12 0:34 
QuestionI am facing name space issue in stylessheetmanager Pinmemberramachandransathish20-May-10 0:20 
QuestionHow to set background image ? PinmemberMember 45575835-Jan-10 21:35 
QuestionDoes not work on Windows Mobile form applications? Pinmemberxanoumissa10-Dec-09 2:34 
GeneralIt's work better with Regional Settings accordingly PinmemberBDisp16-Oct-06 12:59 
AnswerRe: It's work better with Regional Settings accordingly Pinmembermon_compte_anti_spam19-Oct-06 22:20 
QuestionPublic StylesSheetFileManager? PinmemberTarpanXt23-Aug-06 3:43 
AnswerRe: Public StylesSheetFileManager? PinmemberSylvain BLANCHARD24-Aug-06 18:55 
GeneralRe: Public StylesSheetFileManager? PinmemberTarpanXt25-Aug-06 3:53 
GeneralRe: Public StylesSheetFileManager? PinmemberSylvain BLANCHARD25-Aug-06 12:23 
GeneralRe: Public StylesSheetFileManager? PinmemberTarpanXt28-Aug-06 3:25 
GeneralRe: Public StylesSheetFileManager? PinmemberPrince Hitech1-Sep-09 20:51 
GeneralEnglish resource file? [modified] PinmemberTarpanXt22-Aug-06 9:58 
GeneralRe: English resource file? PinmemberSylvain BLANCHARD25-Aug-06 12:25 
GeneralIt's 2006, not 2005 PinprotectorMarc Clifton9-Aug-06 3:03 
GeneralRe: It's 2006, not 2005 PinmemberSylvain BLANCHARD9-Aug-06 21:34 
Questiongood work, but the designer? Pinmemberemanuele.vicari20-Jul-06 1:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 25 Oct 2006
Article Copyright 2006 by Sylvain BLANCHARD
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid