WinForm Style Sheet

• Download source code - 13.5 Kb

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:
   C#

   public class ErrorLabel :System.Windows.Forms.UserControl

   to:

   C#

   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:

16. Open the ErrorLabel.cs code page, and go to the "Windows Forms Designer generated code" section. You’ll see:
    C#

    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;
    
    }

17. Override the Font and ForeColor properties and make them read only (do not provide set {... = value ;}).
    C#

    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;
      }
    }

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

19. Add App.config to the MyWinApp project.
20. Add the settings to the <appSettings /> section.
    XML

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

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