C# user control switch
How do I customize a toggle?
Draw a beautiful control in three steps:
- Define the attributes;
- Canvas repainted;
- Add event;
Primary Skills:
- How to customize the properties;
- General format for canvas repainting;
- The event triggering process of the control;
- Skill Expansion
-
Add a secondary confirmation popup when the conversion button is enabled?
-
Click event not firing when applying control in From form?
-
How is the arrangement of property names in the control's property tree defined?
-
Add a font to change properties?
-
1. Define attributes
- Font
- Color
- String (String)
- Enumeration (Enum)
- Property Description [Browsable(true)]
#region causality
private Font displayFont = new Font("Segoe UI", 12);
[Browsable(true)]
[Category("opening (chess jargon)_G")]
[Description("font format")]
public Font DisplayFont
{
get { return displayFont; }
set
{
if (value != null)
{
displayFont = value;
(); // Trigger redraw
}
}
}
private bool _checked = false;
[Browsable(true)] //clarification（需放在causality前边）：Whether or not to check
[Category("opening (chess jargon)_G")]
[Description("Whether or not to check")]
public bool Checked
{
get { return _checked; }
set
{
_checked = value;
();
//activate a trigger event
this.MouseDown_G?.Invoke(this, null);
}
}
private string falseText = "cloture";
[Browsable(true)] //clarification：文本cloture
[Category("opening (chess jargon)_G")]
[Description("文本cloture")]
public string FalseText
{
get { return falseText; }
set { falseText = value; (); }
}
//Style switching
public enum SwType
{
Ellipse, //ellipses
Rectangle, //rectangles
}
private SwType switchType = ;
[Browsable(true)] //clarification：Toggle Style
[Category("opening (chess jargon)_G")]
[Description("Toggle Style")]
public SwType SwitchType
{
get { return switchType; }
set { switchType = value; (); }
}
private Color sliderColor = ; //
[Browsable(true)] //clarification：Slider Color
[Category("opening (chess jargon)_G")]
[Description("Slider Color")]
public Color SliderColor
{
get { return sliderColor; }
set { sliderColor = value; (); }
}
#endregion
How is the arrangement of property names in the control's property tree defined?
A: Alphabetical order of installation A~Z according to property description
2. Canvas repainting
- Draws rectangles with rounded corners, sliders, and text;
- Drawing ellipses, sliders, text
#region canvas (artist's painting surface)
private Graphics graphics;
private int width;
private int height;
//rectangle drawing
protected override void OnPaint(PaintEventArgs e)
{
(e);
graphics = ;
= ;
= ;
= .;
= .;
= ;
= ;
if ( == ) //When the field selection is rectangular
{
//filler color
Color fillColor = this._checked ? trueColor : falseColor;
//Rectangle with rounded corners
GraphicsPath path = new GraphicsPath();
int diameter = 10; //Default Arc Diameter
//upper-left corner arc：starting coordinate，surname Kuan，your (honorific)，starting angle，scanning angle
(0, 0, diameter, diameter, 180f, 90f);
( - diameter, 0, diameter, diameter, 270f, 90f); //upper right
( - diameter, - diameter, diameter, diameter, 0f, 90f); //lower right
(0, - diameter, diameter, diameter, 90f, 90f); //lower left
(new SolidBrush(fillColor), path); //filler color
//copies
string strText = this._checked ? trueText : falseText;
//slider (computer interface element)(true\false two-part form)
if (_checked)
{
//绘制slider (computer interface element)
path = new GraphicsPath();
int sliderwidth = - 4;
( - sliderwidth - 2, 2, diameter, diameter, 180f, 90f);
( - diameter - 2, 2, diameter, diameter, 270f, 90f);
( - diameter - 2, - diameter - 2, diameter, diameter, 0f, 90f);
( - sliderwidth - 2, - diameter - 2, diameter, diameter, 90f, 90f);
(new SolidBrush(sliderColor), path);
//绘制copies
Rectangle rec = new Rectangle(0, 0, - sliderwidth - 2, );
StringFormat sf = new StringFormat();
= ;
= ;
(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);
}
else
{
//绘制slider (computer interface element)
path = new GraphicsPath();
int sliderwidth = - 4;
(2, 2, diameter, diameter, 180f, 90f);
(sliderwidth - diameter + 2, 2, diameter, diameter, 270f, 90f);
(sliderwidth - diameter + 2, sliderwidth - diameter + 2, diameter, diameter, 0f, 90f);
(2, sliderwidth - diameter + 2, diameter, diameter, 90f, 90f);
(new SolidBrush(sliderColor), path);
//绘制copies
Rectangle rec = new Rectangle(sliderwidth + 2, 0, - sliderwidth - 2, );
StringFormat sf = new StringFormat();
= ;
= ;
(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);
}
}
else if ( == ) //When the field selection is an ellipse
{
//filler color
Color fillColor = this._checked ? trueColor : falseColor;
//elliptical
GraphicsPath path = new GraphicsPath();
(1, 1, - 2, - 2, 90f, 180f);
( - ( - 2) - 1, 1, - 2, - 2, 270f, 180f);
(new SolidBrush(fillColor), path); //filler color
//copies
string strText = this._checked ? TrueText : falseText;
//slider (computer interface element)(true\false two-part form)
if (_checked)
{
//绘制slider (computer interface element)
int ciclewidth = - 6;
(new SolidBrush(sliderColor), new Rectangle( - ciclewidth - 3, 3, ciclewidth, ciclewidth));
//绘制copies
Rectangle rec = new Rectangle(0, 0, - ciclewidth - 3, );
StringFormat sf = new StringFormat();
= ;
= ;
(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);
}
else
{
//绘制slider (computer interface element)
int ciclewidth = - 6;
(new SolidBrush(sliderColor), new Rectangle(3, 3, ciclewidth, ciclewidth));
//绘制copies
Rectangle rec = new Rectangle(ciclewidth + 3, 0, - ciclewidth - 3, );
StringFormat sf = new StringFormat();
= ;
= ;
(strText, DisplayFont, new SolidBrush(sliderColor), rec, sf);
}
}
}
#endregion
3. Add events
Understanding :Execution of the mouse click event of a control in From.
First execute the control's internal MouseDown method - its method's internal property - the trigger event in its property - and finally execute the From backend's click-generated Custom methods (customizable)
Other tips: Pull out and double-click on the control when applying it to generate a custom method.
<From double-click control default is Load method, want to let him automatically generate their own set of events need to be added in the control code: [DefaultEvent("MouseDown_G")]>.
//Specify the default event (double-click the control to enter)
[DefaultEvent("MouseDown_G")]
keycode: Click on the control to confirm the popup box and then execute the code in the From event.
//event declaration public event EventHandler MouseDown_G.
// Activate the event this.MouseDown_G?.Invoke(this, null); --Execution completed jump to the double-click event method in From
//Constructor adds mouse click event - event handling for the click control
+= Toggle_MouseDown.
//Constructor automatically generates this method after adding event handling (no need to double-click in the control's properties)
private void Toggle_MouseDown(object sender, MouseEventArgs e)
{
DialogResult dr = ("Secondary confirmation of operation?" , "Prompts you", , );
if (dr == )
{
Checked = !Checked; }
}
else return; }
}
A bug was found that when applying the control, clicking in From was invalid; it took two days of querying (breakpoint querying) to find the problem, in the Form'sThe From property in the designer has an Enable of FalseThe following is an example of how to change the value of a parameter to true in order to enable it.
Reason: Controls were not generated in time after updating resulting in From crashing after (didn't care after an empty window), causing Designer's default code to change.
End
Discussions and exchanges, please leave a message