Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / Windows Forms
Article

StylesSheetManager - A 'CSS like component' for WinForms

Rate me:
Please Sign up or sign in to vote.
4.11/5 (25 votes)
25 Oct 20063 min read 154.6K   6.8K   95   42
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
    <?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.

    Image 3

  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:

    Image 4

  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.

    Image 5

  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


Written By
Web Developer
France France
Software developer for Capgemini company.

Comments and Discussions

 
QuestionWhere can i find the stylesheetmanager.dll in the solution Pin
Ahad Saddam Hussain10-Sep-15 22:22
Ahad Saddam Hussain10-Sep-15 22:22 
QuestionError Pin
Member 1186688928-Jul-15 0:45
Member 1186688928-Jul-15 0:45 
Questioncss is not implement on my from Pin
Member 1143514915-Jun-15 1:08
Member 1143514915-Jun-15 1:08 
Questionhow to add styles Sheet manager in .frame work 3.5 visual studio 2010 Pin
Member 1099477131-Aug-14 20:46
Member 1099477131-Aug-14 20:46 
QuestionSir, My form is not showing any changes please help Pin
Member 1104198827-Aug-14 21:22
Member 1104198827-Aug-14 21:22 
Questionwhile editing stylesheets, changes not updating in forms Pin
Prasannah16014-Sep-12 0:48
Prasannah16014-Sep-12 0:48 
AnswerRe: while editing stylesheets, changes not updating in forms Pin
mon_compte_anti_spam13-Nov-12 6:01
mon_compte_anti_spam13-Nov-12 6:01 
QuestionRe: while editing stylesheets, changes not updating in forms Pin
Member 1143514914-Jun-15 22:25
Member 1143514914-Jun-15 22:25 
Questionhow can i add my own new style in this manager? [modified] Pin
khushbujasmine20-Sep-11 20:19
khushbujasmine20-Sep-11 20:19 
QuestionStylesSheetFilename error [modified] Pin
Member 802085828-Jul-11 0:20
Member 802085828-Jul-11 0:20 
AnswerRe: StylesSheetFilename error [modified] Pin
afcm66622-Aug-12 13:00
afcm66622-Aug-12 13:00 
GeneralI doesn't maintain this component anymore Pin
mon_compte_anti_spam10-Jun-11 11:06
mon_compte_anti_spam10-Jun-11 11:06 
QuestionIs StylesSheetManager.dll Free? Pin
ajaypediredla2-Feb-11 21:54
ajaypediredla2-Feb-11 21:54 
AnswerRe: Is StylesSheetManager.dll Free? Pin
mon_compte_anti_spam10-Jun-11 11:05
mon_compte_anti_spam10-Jun-11 11:05 
AnswerRe: Is StylesSheetManager.dll Free? Pin
AnjaniRahul2-May-12 0:34
AnjaniRahul2-May-12 0:34 
QuestionI am facing name space issue in stylessheetmanager Pin
ramachandransathish20-May-10 0:20
ramachandransathish20-May-10 0:20 
QuestionHow to set background image ? Pin
Panna Sinha5-Jan-10 21:35
Panna Sinha5-Jan-10 21:35 
QuestionDoes not work on Windows Mobile form applications? Pin
xanoumissa10-Dec-09 2:34
xanoumissa10-Dec-09 2:34 
GeneralIt's work better with Regional Settings accordingly Pin
BDisp16-Oct-06 12:59
BDisp16-Oct-06 12:59 
AnswerRe: It's work better with Regional Settings accordingly Pin
mon_compte_anti_spam19-Oct-06 22:20
mon_compte_anti_spam19-Oct-06 22:20 
QuestionPublic StylesSheetFileManager? Pin
TarpanXt23-Aug-06 3:43
TarpanXt23-Aug-06 3:43 
AnswerRe: Public StylesSheetFileManager? Pin
Sylvain BLANCHARD24-Aug-06 18:55
Sylvain BLANCHARD24-Aug-06 18:55 
GeneralRe: Public StylesSheetFileManager? Pin
TarpanXt25-Aug-06 3:53
TarpanXt25-Aug-06 3:53 
GeneralRe: Public StylesSheetFileManager? Pin
Sylvain BLANCHARD25-Aug-06 12:23
Sylvain BLANCHARD25-Aug-06 12:23 
GeneralRe: Public StylesSheetFileManager? Pin
TarpanXt28-Aug-06 3:25
TarpanXt28-Aug-06 3:25 
RemoveStyle will help, but I have many forms dynamically loaded/unloaded, created dynamically based on XML definitions, designed by different programmers. I feel more confident to have one StylesSheetFileManager object created for the whole application, than bunch of StylesSheetManager objects for each form.

Just make it public, so if somebody (like me) wants to use it - let him use it.

PS. I'll think about inherit all my forms from a single parent, and put the StylesSheetManager in the parent class. Maybe it will be a better solution.

Thank you for the "Activator.CreateInstance()" hint.

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

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