Click here to Skip to main content
Click here to Skip to main content
Go to top

Themer.UIApplier (Alpha)

, 26 Sep 2007
Rate this:
Please Sign up or sign in to vote.
This article demonstrates Themer, an attrative User Interface (UI) at runtime
Screenshot - themer.gif

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
Property Type Syntax Example Comment
Color HTML color
HTML color
,(int) Alpha Value
Red
Red,30
Alpha value should be from
0 (transparent) to 255 (opaque)
Bool Bool True
String String this is string
Point (int) X ,(int) Y 100,100
Size (int) Width ,(int) Height 100,100
Double Double 1.25
Float Float 10.26
Int32 Int32 20
Padding (int)All
(int)Left,(int)Top,(int)Right,(int)Bottom
3
5,2,5,2
Cursor (String) Cursor Cross
Font (String) Font Comic Sans MS, 12px, style=Italic
Enum (String)EmunMember Fill Fill can be used for specifying dock property
Image (String)Path a.png
Region explained below

Playing with Regions

How to Input
  1. point[]
    int x1 , int y1 | int x2 , int y2 | ....... | int xn , int yn10,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
Shape Name Example Comments
Polygon "polygon-10,10|20,20|30,20" name-point[]
Arc "arc-5,10,50,100,.2,.5" name- float x ,float y, float Width ,float Height , float Start Angle, float Sweep Angle
Pie "pie-5,10,50,100,.2,.5" name- float x ,float y, float Width ,float Height , float Start Angle, float Sweep Angle
Bezier "bezier-10,10|20,20|30,20|50,50" name-point start, point control1 , point control2,
point end
Closed Curve "closedcurve-10,10|20,20|30,20"
"closedcurve-10,10|20,20|30,20*.5"
name-point[]
name-point[]*float tension
Curve "curve-10,10|20,20|30,20"
"curve-10,10|20,20|30,20*.5"
name-point[]
name-point[]*float tension
Ellipse "ellipse-10,10,130,30" name- float x ,float y, float Width ,float Height
Line "line-10,10|20,20" name- point start, point end
Rectangle "rectangle-0,0,100,100" name- float x ,float y, float Width ,float Height

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"?>
<!--<span class="code-comment"> Themes Contained here --></span>
<!--<span class="code-comment"> Root Themes --></span>
<Themes>
  <!--<span class="code-comment"> Sample Theme 1 --></span>
  <Theme>
    <!--<span class="code-comment"> Name of theme--></span>  
    <Name>Red</Name> <!--<span class="code-comment"> name is must --></span>
    <!--<span class="code-comment"> description of theme--></span>
    <Description>Description of theme goes here</Description>
    <!--<span class="code-comment"> Name of theme creator --></span>
    <Author>Amar Chaudhary</Author>
    <!--<span class="code-comment"> Version of theme --></span>
    <Version>1.0</Version>
    <!--<span class="code-comment"> control types  --></span>
    <!--<span class="code-comment">* universal is a control type which will effect all controls and 
        form --></span>
    <Universal><!--<span class="code-comment"> it should come before any other control type --></span>
      <!--<span class="code-comment"> property name * Case Sensitive --></span>
      <ForeColor><!--<span class="code-comment"> value of property as string --></span>White</ForeColor>
    </Universal>
    <!--<span class="code-comment"> Control Type * Case Sensitive * requires complete signature  --></span>
    <System.Windows.Forms.Button>
      <BackColor>Red</BackColor>
      <Height>50</Height>
      <Width>150</Width>
      <!--<span class="code-comment"> event for this control type * Case Sensitive 
        * requires attribute Name for event name --></span>
      <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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Amar Chaudhary
Web Developer
India India
Amar Chaudhary
 
Smile | :)

Comments and Discussions

 
GeneralGreat article!! Pinmembertarvataha6-Oct-07 7:05 
GeneralRe: Great article!! PinmemberAmar Chaudhary7-Oct-07 1:41 
GeneralVery Nice Pinmembermerlin98127-Sep-07 3:09 

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.140916.1 | Last Updated 26 Sep 2007
Article Copyright 2007 by Amar Chaudhary
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid