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

WinForm Style Sheet

, 22 Jun 2004
Rate this:
Please Sign up or sign in to vote.
An article on setting styles for Windows applications.

Introduction

Cascading Style Sheet (CSS) is a familiar name to all web developers. Using CSS, you can make a consistent look and feel for all the web pages, and more importantly, it provides a centralized control location which enables you to set or modify the look and feel (color, font, font size, ...) of all the web pages at once.

There is no CSS functionality defined for WinForms. There are commercial components that you can buy and integrate to your application, or you can use Windows Forms XML Parser and make the user interface by XML. But the easiest way is using inheritance.

Using visual inheritance will provide the CSS functionality for the WinForms but there are some considerations involved. In this article, you will see how inheritance works, and how you can use App.config file as a CSS.

Using the code

The following steps will show you how to make a reusable Label control:

  1. Make a new solution (call it: WinformCSS).
  2. Add a "Windows Application" project to the solution (call it: MyWinApp).
  3. Add a "Windows Control Library" project to the solution (call it: WinCSS).
  4. Inside WinCSS project, right click on UserControl1.cs and rename it ErrorLabel.cs.
  5. Inside WinCSS project, right click on ErrorLabel.cs, click on View Code, then search and replace "UserControl1" with "ErrorLabel".
  6. Use inheritance and derive your control from one of the pre existing ones. In this case, I changed:
    public class ErrorLabel :System.Windows.Forms.UserControl

    to:

    public class ErrorLabel :System.Windows.Forms.Label
  7. Save the changes.
  8. Inside WinCSS project, double click on ErrorLabel.cs. The IDE will show you a page with this message:
    To add components to your class, drag them from Server Explorer or Toolbox ...
  9. Right click on the page and choose Properties.
  10. Use the Properties window and set any property you need. In this example, I set the Font to: Verdana, size 10, bold, and set the ForeColor to "Red".
  11. Save all and build WinCSS project.
  12. Inside MyWinApp project, double click on Form1.cs.
  13. Inside the IDE toolbox, open one of the tabs, for example, "My User Controls", then right click and choose "Add/Remove Items...".
  14. Use Browse button and point to the C:\...\WinformCSS\WinCSS\bin\Debug folder, and select WinCSS.dll. It adds all the available controls in the WinCSS.dll to the ".NET Framework Components" tab. Click OK. Now "ErrorLabel" is available in "My User Controls" tab, and you can use it in any WinForm.
  15. Drag and drop "ErrorLabel" to Form1. Now, you have an inherited Label, its properties (Font and ForeColor) have been preset.

But wait, we are not finished yet.

To test this, open ErrorLabel.cs, use the "Properties Window", and change the color of the ErrorLabel from Red to Blue, and rebuild the solution.

If you go back to Form1, you see that the color of the label is still red. What happened?

The answer is inside "Windows Forms Designer generated code". VS. NET has generated this code:

this.errorLabel1.Font = new 
   System.Drawing.Font("Verdana", 9.75F, System.Drawing.FontStyle.Bold, 
   System.Drawing.GraphicsUnit.Point, ((System.Byte)(0)));
this.errorLabel1.ForeColor = System.Drawing.Color.Red;
this.errorLabel1.Location = new System.Drawing.Point(72, 24);
this.errorLabel1.Name = "errorLabel1";
this.errorLabel1.TabIndex = 0;
this.errorLabel1.Text = "errorLabel1";

As you can see, the ForeColor property has been set to Red, which means that it is overriding the predefined value. In other words, although the new color of ErrorLabel is Blue, Form1 shows the local value for the errorLabel1.

Solution

We need to override the control properties inside WinCSS project and make them read only. To do this:

  1. Open the ErrorLabel.cs code page, and go to the "Windows Forms Designer generated code" section. You’ll see:
    private void InitializeComponent()
    {
      // 
      // ErrorLabel
      // 
      this.Font = new System.Drawing.Font("Verdana", 9.75F, 
                  System.Drawing.FontStyle.Bold, 
                  System.Drawing.GraphicsUnit.Point, 
                  ((System.Byte)(0)));
      this.ForeColor = System.Drawing.Color.Blue;
    
    }
  2. Override the Font and ForeColor properties and make them read only (do not provide set {... = value ;}).
    public override Font Font
    {
      get
      {
         return new System.Drawing.Font("Verdana", 9.75F, 
                    System.Drawing.FontStyle.Bold, 
                    System.Drawing.GraphicsUnit.Point, 
                    ((System.Byte)(0)));
      }
    }
     
    public override Color ForeColor
    {
      get
      {
        return System.Drawing.Color.Blue;
      }
    }
  3. Now, if you build the WinCSS project and go back to the Form1, you’ll see that the color is Blue.

Enhancement

Till now, in order to change the style, you needed to change the code and recompile it again. But if you want to expose this functionality and be able to change the style without changing the code and rebuild the application, you need these extra steps:

  1. Add App.config to the MyWinApp project.
  2. Add the settings to the <appSettings /> section.
    <configuration>
        <appSettings>
            <!-- Setting For ErrorLabel ################################# -->
            <add key="ErrorLabelForeColorR" value="0" />
            <add key="ErrorLabelForeColorG" value="0" />
            <add key="ErrorLabelForeColorB" value="255" />
            <add key="ErrorLabelFontName" value="Verdana"/>
            <add key="ErrorLabelFontSize" value="10"/>
            <!--ErrorLabelFontStyle Valid values: 
                     Bold,Italic,Regular,Strikeout,Underline-->
            <add key="ErrorLabelFontStyle" value="Bold"/>
    
            <!--ErrorLabelFontGraphicUnit Valid values: 
                     Display,Document,Inch,Millimeter,Pixel,Point,World-->
            <add key="ErrorLabelFontGraphicUnit" value="Point"/>
            <add key="ErrorLabelFontGRI" value="0"/>
    
            <!-- End Setting For ErrorLabel ################################ -->
        </appSettings>
    </configuration>
  3. In ErrorLabel.cs file, use ConfigurationSettings.AppSettings[""] to read the values in start time and pass them to the overridden properties.

Note: In design time, you should change the settings inside the App.config, but in production, you need to change MyWinApp.exe.config file.

Summary

You can use this approach to make a library of controls such as Button, Label, RadioButton, and …, set their properties by overriding their base class properties, and make them read only. Then you can add the controls to your VS.NET toolbox and use them in your WinForm.

Any time you change the settings in your custom controls (or in the configuration file), the style of the controls in you application(s) will be updated automagically.

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

Share

About the Author

Ali Zolghadri
Architect
Canada Canada
I worked for the software industry as a software architect, system analyst, senior software engineer and MIS (management information system) consultant for last 10 years.

Comments and Discussions

 
GeneralEasier way to change the default value PinmemberThe_Mega_ZZTer27-Aug-05 4:45 

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
Web02 | 2.8.140826.1 | Last Updated 23 Jun 2004
Article Copyright 2004 by Ali Zolghadri
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid