Skip to content

owtysm2/ThemeEngineTest

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

35 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Caution

(in-dev and not recommended for prod use, at all)

This is rather a proof-of-concept, and this had most definitely been done before.


πŸ“ƒ The Overview

This project aims to provide designer-driven theming(-ish?) capabilities for WinForms.
You can define themes with the Theme Definer component. Then, give the theme a name, mark which controls to affect, pick what properties to change and to what values.

Quick Explanation

Themes can be shared across forms, as when your form opens, its themes report themselves to the Internal Theme Manager class.
A Theme is an object created by the Theme Definer. It contains the theme's name, alongside the info on what controls and/or properties to change.

Note

Every Theme is serialized in your Form's resources, so that it persists.
The Theme will only be accessible to other forms, if its parent form had already been shown.

In short

Create at design-time, load at run-time:

  • Each Theme is created with a Theme Definer.
  • Each Theme gets assigned a name and a list of types (or individual controls) to affect. (internally called ChangingControls)
  • Each type (or individual control) gets assigned a list of properties to change. (internally called ChangingProperties)
image

🚧 Important Notes

Warning

If you want to use a theme across Forms, the Theme's parent Form (to which it was added) needs to have been shown at least once.

Note

Dynamically created controls need to have the theme applied manually after creation:

Button newButton = new Button();
newButton.Size = new Size(128, 32);

theme_Definer1.ApplyTo(newButton); // apply theme to singular control
Controls.Add(newButton);

... or you can add many controls and apply the theme to their Parent:

Button newButton = new Button();
newButton.Size = new Size(128, 32);

Button newButton2 = new Button();
newButton2.Size = new Size(128, 32);
newButton2.Top = 36;

Button newButton3 = new Button();
newButton3.Size = new Size(128, 32);
newButton3.Top = 72;

this.Controls.Add(newButton);
this.Controls.Add(newButton2);
this.Controls.Add(newButton3);

theme_Definer1.ApplyTo(this); // apply to Parent, its children will update

Note

Individual control name entries will have their Type properties, if any, applied first, and then their Name properties (also if any exist).

(Basically, Name has higher priority than Type)

😼 Usage Example

1. Drag a Theme Definer from your toolbox onto your Form

image

2. To edit the theme, open the editor from Visual Studio's Properties panel. (The "..." button placed next to the conveniently named "Click to Edit Theme" property)

image

3. This form appears. For beginners, you can press "Import Controls from Current Form", and not worry about the UI too much.

This button will process every control in your Form that's currently opened in the designer (if any) and get their names and types, which you can then select from a check list.

You also don't have to worry about the Theme's name unless you want to use it in another Form later.

image

4. Here, select which types (or individual controls) you want to theme. In my case, I want to theme every Chart control, so I check "cuiChartLine" in the list and press "OK".

(Notice that below the list, the "Import Types" option is selected. You can import individual controls by their names with the "Import Names" option.)

image

5. The type's name (or the control's name) is in the list - Select it from the list to edit its "changing properties" (properties which will change once you load this theme)

image

6. Currently, no properties are being changed. Press "Add New" in the bottom-right of the "Edit Properties" panel, and choose which properties you want to modify with your Theme

In this example, I only want to change the UseBezier property, so I select just that and press "OK":

image

7. When a property is selected from the list - An editor appears above.
I want the UseBezier property to be set to True with my Theme, so I checked the "Property Value" checkbox:

image

8. Since this is just an example, I'll stop here. Press the "OK" button in the top-right to save your theme.

image

10. I want to apply the theme when a button in my example app is pressed.

This is actually simple, you call your theme definer's .ApplyTo(Control targetControlOrForm) method:

        private void cuiButton1_Click(object sender, EventArgs e)
        {
            theme_Definer1.ApplyTo(this);
        }

The End Result

This is my app before clicking the button: image

This is the same app after I clicked the button: image

As visible in the photos, the chart control now draws bezier curves instead of straight lines, because its "UseBezier" property's value had been changed to True

About

A proof-of-concept designer-driven Winforms Theme Engine (2512262040)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages