Post: [TUTORIAL] Creating a Simple theme in C#
Options
11-17-2015, 08:43 PM
#1
Sloth
Banned
Once I am done I will add the full .cs file
When the control is finished build the solution then check the tool box and the control should be there.
Starting Off
First we need to create a new Windows Form project, call it anything you like.
Next create a class file, again call it anything you like.
Now to start off our class file add these namespaces at the top
[COLOR=#000000]using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Text;
using System.Windows.Forms;[/COLOR]
Next we need to add our mouse states (these are what control what state the mouse is in e.g. None, Hovering, or active/down)
[COLOR=#000000]enum MouseState
{
None = 0,
Over = 1,
Down = 2
}[/COLOR]
For now that is all we need
Control - Button
PREVIEW
You must login or register to view this content.
Create a class called SimpleButton and add the control base so that the class has access to the windows form controls
[COLOR=#000000]class SimpleButton : Control[/COLOR]
[COLOR=#000000]{[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000]}[/COLOR]
Lets add our Declarations (to keep the code clean I will be using the region directive)
[COLOR=#000000]#region Declarations[/COLOR]
[COLOR=#000000] private MouseState _State;[/COLOR]
[COLOR=#000000] #endregion[/COLOR]
Next we can add our mouse states for the button
[COLOR=#000000]#region MouseStates[/COLOR]
[COLOR=#000000] protected override void OnMouseEnter(EventArgs e)[/COLOR]
[COLOR=#000000] {[/COLOR]
[COLOR=#000000] base.OnMouseEnter(e);[/COLOR]
[COLOR=#000000] _State = MouseState.Over;[/COLOR]
[COLOR=#000000] Invalidate();[/COLOR]
[COLOR=#000000] }[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] protected override void OnMouseLeave(EventArgs e)[/COLOR]
[COLOR=#000000] {[/COLOR]
[COLOR=#000000] base.OnMouseLeave(e);[/COLOR]
[COLOR=#000000] _State = MouseState.None;[/COLOR]
[COLOR=#000000] Invalidate();[/COLOR]
[COLOR=#000000] }[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] protected override void OnMouseDown(MouseEventArgs e)[/COLOR]
[COLOR=#000000] {[/COLOR]
[COLOR=#000000] base.OnMouseDown(e);[/COLOR]
[COLOR=#000000] _State = MouseState.Down;[/COLOR]
[COLOR=#000000] Invalidate();[/COLOR]
[COLOR=#000000] }[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] protected override void OnMouseUp(MouseEventArgs e)[/COLOR]
[COLOR=#000000] {[/COLOR]
[COLOR=#000000] base.OnMouseUp(e);[/COLOR]
[COLOR=#000000] _State = MouseState.Over;[/COLOR]
[COLOR=#000000] Invalidate();[/COLOR]
[COLOR=#000000] }[/COLOR]
[COLOR=#000000] #endregion[/COLOR]
Now time for the customization (edit this to however you like)
First lets specify our button size on created so basically when it's dropped on to our form.
[COLOR=#000000]public SimpleButton()
{
Size = new Size(90, 30);
}[/COLOR]
Next lets create our base color for the button (Background color)
[COLOR=#000000] #region Properties[/COLOR]
[COLOR=#000000]
//Edit the ARGB to whichever color you wish[/COLOR]
[COLOR=#000000] private Color _BaseColor = Color.FromArgb(37, 37, 37);[/COLOR]
[COLOR=#000000] public Color BaseColor[/COLOR]
[COLOR=#000000] {[/COLOR]
[COLOR=#000000] get { return _BaseColor; }[/COLOR]
[COLOR=#000000] set { _BaseColor = value; }[/COLOR]
[COLOR=#000000] }[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] #endregion[/COLOR]
Now finally lets add our OnPaint event so basically when the control is painted on to the form when it's run or in the designer (you should be able to read through this and edit it to you liking.
[COLOR=#000000] protected override void OnPaint(PaintEventArgs e)[/COLOR]
[COLOR=#000000] {[/COLOR]
[COLOR=#000000] base.OnPaint(e);[/COLOR]
[COLOR=#000000] dynamic G = e.Graphics;[/COLOR]
[COLOR=#000000] G.Clear(_BaseColor);[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] switch (_State)[/COLOR]
[COLOR=#000000] {[/COLOR]
[COLOR=#000000] case MouseState.Over:[/COLOR]
[COLOR=#000000] G.FillRectangle(new SolidBrush(Color.FromArgb(20, Color.White)), new Rectangle(0, 0, Width, Height));[/COLOR]
[COLOR=#000000] break;[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] case MouseState.Down:[/COLOR]
[COLOR=#000000] G.FillRectangle(new SolidBrush(Color.FromArgb(30, Color.Black)), new Rectangle(0, 0, Width, Height));[/COLOR]
[COLOR=#000000] break;[/COLOR]
[COLOR=#000000] }[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] StringFormat _StringF = new StringFormat();[/COLOR]
[COLOR=#000000] _StringF.Alignment = StringAlignment.Center;[/COLOR]
[COLOR=#000000] _StringF.LineAlignment = StringAlignment.Center;[/COLOR]
[COLOR=#000000] G.DrawString(Text, new Font("Arial", 9), Brushes.White, new RectangleF(0, 0, Width, Height), _StringF);[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000] }[/COLOR]
Control - TextBox
PREVIEW
You must login or register to view this content.
So the TextBox control is going to have a bit more code than the button but it's easy enough to understand.
I would suggest looking through each bit of code and editing to however you like.
So first off lets create the class with the control base
class SimpleTextBox : Control
{
}
Now one line above the class add this code.
This code is called an attribute and we are basically adding the attribute of the Event of TextChanged inside the textbox.
[DefaultEvent("TextChanged")]
Now for the variable (this basically gives it the control and settings of a general Win Form TextBox
#region Variables
private System.Windows.Forms.TextBox _TextBox;
#endregion
Next we need to add our properties (Read through this code and edit it to your preference)
#region " Properties"
private HorizontalAlignment _TextAlign = HorizontalAlignment.Left;
[Category("Options")]
public HorizontalAlignment TextAlign
{
get { return _TextAlign; }
set
{
_TextAlign = value;
if (_TextBox != null)
{
_TextBox.TextAlign = value;
}
}
}
private int _MaxLength = 32767;
[Category("Options")]
public int MaxLength
{
get { return _MaxLength; }
set
{
_MaxLength = value;
if (_TextBox != null)
{
_TextBox.MaxLength = value;
}
}
}
private bool _ReadOnly;
[Category("Options")]
public bool ReadOnly
{
get { return _ReadOnly; }
set
{
_ReadOnly = value;
if (_TextBox != null)
{
_TextBox.ReadOnly = value;
}
}
}
private bool _UseSystemPasswordChar;
[Category("Options")]
public bool UseSystemPasswordChar
{
get { return _UseSystemPasswordChar; }
set
{
_UseSystemPasswordChar = value;
if (_TextBox != null)
{
_TextBox.UseSystemPasswordChar = value;
}
}
}
private bool _Multiline;
[Category("Options")]
public bool Multiline
{
get { return _Multiline; }
set
{
_Multiline = value;
if (_TextBox != null)
{
_TextBox.Multiline = value;
if (value)
{
_TextBox.Height = Height - 11;
}
else
{
Height = _TextBox.Height + 11;
}
}
}
}
[Category("Options")]
public override string Text
{
get { return base.Text; }
set
{
base.Text = value;
if (_TextBox != null)
{
_TextBox.Text = value;
}
}
}
[Category("Options")]
public override Font Font
{
get { return base.Font; }
set
{
base.Font = value;
if (_TextBox != null)
{
_TextBox.Font = value;
_TextBox.Location = new Point(3, 5);
_TextBox.Width = Width - 6;
if (!_Multiline)
{
Height = _TextBox.Height + 11;
}
}
}
}
//Change this ARGB color to change the border of the TextBox
private Color _BorderColor = Color.FromArgb(32, 32, 32);
public Color BorderColor
{
get { return _BorderColor; }
set { _BorderColor = value; }
}
#endregion
Next we add the events for the textbox (I suggest leaving this alone but read through it you can edit a couple things if you wish)
#region " Events "
protected override void OnCreateControl()
{
base.OnCreateControl();
if (!Controls.Contains(_TextBox))
{
Controls.Add(_TextBox);
}
}
private void OnBaseTextChanged(object s, EventArgs e)
{
Text = _TextBox.Text;
}
private void OnBaseKeyDown(object s, KeyEventArgs e)
{
if (e.Control && e.KeyCode == Keys.A)
{
_TextBox.SelectAll();
e.SuppressKeyPress = true;
}
if (e.Control && e.KeyCode == Keys.C)
{
_TextBox.Copy();
e.SuppressKeyPress = true;
}
}
protected override void OnResize(EventArgs e)
{
_TextBox.Location = new Point(5, 5);
_TextBox.Width = Width - 10;
if (_Multiline)
{
_TextBox.Height = Height - 11;
}
else
{
Height = _TextBox.Height + 11;
}
base.OnResize(e);
}
#endregion
Now Finally we can add our customization options (look through all this code and edit too your liking
public SimpleTextBox()
{
SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.ResizeRedraw | ControlStyles.OptimizedDoubleBuffer | ControlStyles.SupportsTransparentBackColor, true);
DoubleBuffered = true;
BackColor = Color.Transparent;
_TextBox = new System.Windows.Forms.TextBox();
_TextBox.Font = new Font("Segoe UI", 10);
_TextBox.Text = Text;
_TextBox.BackColor = Color.FromArgb(255, 255, 255);
_TextBox.ForeColor = Color.Black;
_TextBox.MaxLength = _MaxLength;
_TextBox.Multiline = _Multiline;
_TextBox.ReadOnly = _ReadOnly;
_TextBox.UseSystemPasswordChar = _UseSystemPasswordChar;
_TextBox.BorderStyle = BorderStyle.None;
_TextBox.Location = new Point(5, 5);
_TextBox.Width = Width - 10;
_TextBox.Cursor = Cursors.IBeam;
if (_Multiline)
{
_TextBox.Height = Height - 11;
}
else
{
Height = _TextBox.Height + 11;
}
_TextBox.TextChanged += OnBaseTextChanged;
_TextBox.KeyDown += OnBaseKeyDown;
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
dynamic G = e.Graphics;
G.Clear(Color.FromArgb(255, 255, 255));
G.DrawRectangle(new Pen(_BorderColor), new Rectangle(0, 0, Width - 1, Height - 1));
}
Control - Close Form
So the Close form control is basically an [X] button that closes the form.
So first we need to add our class again we use the Control base.
class SimpleClose : Control
{
}
Next our Mouse State declaration
#region Declarations
private MouseState _State;
#endregion
And or course our mouse states
#region MouseStates
protected override void OnMouseEnter(EventArgs e)
{
base.OnMouseEnter(e);
_State = MouseState.Over;
Invalidate();
}
protected override void OnMouseLeave(EventArgs e)
{
base.OnMouseLeave(e);
_State = MouseState.None;
Invalidate();
}
protected override void OnMouseDown(MouseEventArgs e)
{
base.OnMouseDown(e);
_State = MouseState.Down;
Invalidate();
}
protected override void OnMouseUp(MouseEventArgs e)
{
base.OnMouseUp(e);
_State = MouseState.Over;
Invalidate();
}
protected override void OnClick(EventArgs e)
{
base.OnClick(e);
//This call below ask the program to exit up click the button
Environment.Exit(0);
}
#endregion
Now next we need to add a Resize method so that the button stays the same size
protected override void OnResize(EventArgs e)
{
base.OnResize(e);
Size = new Size(12, 12);
}
Our public class to set the size
public SimpleClose()
{
SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.ResizeRedraw | ControlStyles.OptimizedDoubleBuffer, true);
DoubleBuffered = true;
Size = new Size(12, 12);
}
Finally we can add our paint method which you can mess with yourself to theme it for however you like I have commented on what to edit here
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
dynamic G = e.Graphics;
//This is the background color
G.Clear(Color.FromArgb(32, 32, 32));
StringFormat _StringF = new StringFormat();
_StringF.Alignment = StringAlignment.Center;
_StringF.LineAlignment = StringAlignment.Center;
//This controls the font size and color of the X normally
G.DrawString("r", new Font("Marlett", 11), Brushes.White, new RectangleF(0, 0, Width, Height), _StringF);
switch (_State)
{
case MouseState.Over:
//This controls the font size and color of the X on hover
G.DrawString("r", new Font("Marlett", 11), new SolidBrush(Color.FromArgb(25, Color.White)), new RectangleF(0, 0, Width, Height), _StringF);
break;
case MouseState.Down:
//This controls the font size and color of the X on press
G.DrawString("r", new Font("Marlett", 11), new SolidBrush(Color.FromArgb(40, Color.Black)), new RectangleF(0, 0, Width, Height), _StringF);
break;
}
}
Control - TabControl Coming Soon
Last edited by
Sloth ; 11-20-2015 at 05:37 PM.
The following 5 users say thank you to Sloth for this useful post:
Copyright © 2024, NextGenUpdate.
All Rights Reserved.
