Themer.UIApplier (Alpha)

• Download demo project - 1,181.6 KB
• Download source - 38.8 KB

Introduction

Themer is a solution for applying an attractive user interface (UI) at runtime.

1. UI applier: this changes the look and feel of UI at the client end.
2. UI maker: this is Graphic User Interface (GUI) for generating XML (UI) files.
3. Sizer: this make controls sizable at Runtime.
4. Auto Resizer: this solves the problem of changing resolution and form resizing.
5. Path Generator: it gets the path in the form of points[] on the basis of the transparency of image, it creates regions for controls / forms.

All components (3,4,5) will be uploaded with UI maker ASAP.

Background

I was working as a Development Manager. The idea clicked in my mind because the resolution of my boss's PC was much lower compared to mine. All the programs I had been making changed their look on my boss's PC. So I thought about the automatic resizing of controls and the fact that if we can iterate through the controls of form and change their size, then we can change other properties too. But at that time the idea was not full-fledged enough to be published as an article. Moreover, my work load in the office was very high. Last month I quit my job and then started this, as I wanted to finish this before searching for another job.

So here is the first part of the project. I will upload rest of the parts ASAP.

Thanks to CPians for their support and encouragement.

Using the Code

You only need to put one line of code in your form for implementing the basic theme.

// add reference to the Themer library to your project
// and then just add this line in your form`s code 
HoneyBee.UIApplier.Themer themer = new HoneyBee.UIApplier.Themer(this);

To support advanced features such as gradient back color or transparent color, you also need to add these lines of code:

this.SetStyle(ControlStyles.SupportsTransparentBackColor 
    | ControlStyles.DoubleBuffer
    | ControlStyles.AllPaintingInWmPaint, true);
this.UpdateStyles();

Using XML

Some Basic Rules for XML

• XML root element should be Themes.
• An XML file can contain multiple Themes tagged by <Theme>.
• Theme should contain name, author, description and version of theme.
• Then it should contain control types preceding with universal type.
• Control types will further contains property names and events.
• Property name tags will contain value of property in string format.
• Event tags will contain event name as attribute and property listing as the property effected with their values.

XML KeyWords

Theme Markers

• Name: contains the name of theme
• Author: contains the name of author of theme
• Description: contains the description for the theme
• Version: contains information about the version of theme

Control Types

These are the names of controls on which you want to apply formatting:

• Universal: the formatting in this control type will be applied to all the controls.
• System.Windows.Forms.Form: the formatting of this control will be applied to the form.
• MyNamespace.MyControl: the formatting will be applied to the mentioned control.

* the control specific property will override the universal property value

Properties

Property tags will store the name of the property to be modified and contain the value of it as text.

Supported Property Types

Playing with Regions

How to Input

1. point[]
   int x₁ , int y₁ | int x₂ , int y₂ | ....... | int x_n , int y_n10,10|20,20|..........|30,20
2. float[]
   Example for Arc:
   float x ,float y, float Width ,float Height , float Start Angle, float Sweep Angle
   5, 10, 50, 100, 0.2, 0.5
3. Shape
   Write shape name followed by - and then by its values. For multiple shapes use ; as separator.
   ellipse-10,10,130,30;ellipse-5,5,10,10;ellipse-5,35,10,10;ellipse-135,5,10,10
4. "*" are used to separate the (float) tension in curve and closed curve

Supported Shapes

Events

Properties for formatting controls will be contained by the event tag, and on event fire, properties will be applied to the controls.

Currently supported events for the controls are: click, enabled changed, enter, mouse click, mouse down, mouse up, mouse enter, mouse hover, mouse leave, mouse move and paint. Forms does not support any event for now.

Sample XML

<?xml version="1.0" encoding="UTF-8"?>
<!-- Themes Contained here -->
<!-- Root Themes -->
<Themes>
  <!-- Sample Theme 1 -->
  <Theme>
    <!-- Name of theme-->  
    <Name>Red</Name> <!-- name is must -->
    <!-- description of theme-->
    <Description>Description of theme goes here</Description>
    <!-- Name of theme creator -->
    <Author>Amar Chaudhary</Author>
    <!-- Version of theme -->
    <Version>1.0</Version>
    <!-- control types  -->
    <!--* universal is a control type which will effect all controls and 
        form -->
    <Universal><!-- it should come before any other control type -->
      <!-- property name * Case Sensitive -->
      <ForeColor><!-- value of property as string -->White</ForeColor>
    </Universal>
    <!-- Control Type * Case Sensitive * requires complete signature  -->
    <System.Windows.Forms.Button>
      <BackColor>Red</BackColor>
      <Height>50</Height>
      <Width>150</Width>
      <!-- event for this control type * Case Sensitive 
        * requires attribute Name for event name -->
      <Event Name ="MouseEnter">
        <BackColor>DarkGreen</BackColor>
        <Height>35</Height>
        <Width>150</Width>
      </Event>
      <Event Name ="MouseLeave">
        <BackColor>Red</BackColor>
        <Height>50</Height>
        <Width>150</Width>
      </Event>
      <Text>Text</Text>
      <Region>ellipse-10,10,130,30;ellipse-5,5,10,10;ellipse-5,35,10,10;
        ellipse-135,5,10,10;ellipse-135,35,10,10</Region>
    </System.Windows.Forms.Button>
    <System.Windows.Forms.Form>
      <BackColor>Gray</BackColor>
      <Opacity>0.5</Opacity>
      <Size>260,200</Size>
    </System.Windows.Forms.Form>
  </Theme>
</Themes>

How Things Work

When you add your form to themer, it passes the reference of form to the library.

Themer iterate through all the available controls and also stores their references; themer creates an array of properties and events when the theme is applied and applies them to the controls. It also saves an array of properties replaced by themer so that they can be applied when the theme is removed.

History

Loaded Themer Applier (Alpha) Date : Sept. 26, 2007

Improvements

Under Testing/Construction

• Add support to special controls like menus, datagrid cells etc.
• Auto fitting regions. Region of a control or form will fit to its size automatically.
• Creating special effects. Effects are special formatting applied to a form or control such as gradient fill color, glowing text etc.
• Creating a property filter which will allow only specific properties to be altered by the program, because allowing all properties may create security issues.
  For example: the user is allowed to change the enabled or visibility state of the control, which could create bugs in the program, and may also cause some restrictions placed by programmer to be waived.
• Make animated controls.

Will Also Try These

• Adding resources (packed in DLL) to the theme such as Images.
• Increase Property types and events used.
• Try making the Controls drawn anti-aliased.
• Adding more features such as reading of controls text or text associated on particular event, creating some kind of sound on particular event.
• support plug-ins for effects.
• try modifying program so that developers only have to write one line of code for applying the theme to an entire application.