Flexlabel -- label of the control scaling panel

Note:

This is a small piece of code that you usually write based on your needs and may not be useful to readers. In addition, this is written based on my personal thoughts, and may not be rigorous and compliant with the design principles. If there is anything wrong with it, please do not give us any further advice.

Description:

You can see this UI effect on Douban and other websites one after another: Click the title of an article, expand a panel below to display the content of the article, and click again to contract the article content panel.

This control is a winform implementation that imitates this effect.

This control is displayed as a horizontal label bar, text is displayed on the left, and an up or down arrow is displayed on the right (the description of the relevant Panel is in the expanded or shrunk State ). When you place the cursor over the control, the control background is highlighted.

When used, the panel to be expanded and shrunk is associated with this control and other related properties are set. When you click the mouse on the control, the control applies the damping effect by setting the height of the target control to expand or contract.

Design Points & Instructions:

1. The target attribute describes the Panel associated with the control. isspread describes whether the target panel is in the expanded or contracting status.

2. sizespread and sizeshrink respectively describe the size (height) of the target control when it is expanded or shrunk ).

3. the damping effect indicates that the size of the target control changes in a sine curve. Tickcount and tickpause are used to control the damping effect. tickcount is used to control the change process in several steps. tickpause is used to control the interval between every two changes. The larger the tickcount, the more detailed the change process. The smaller the tickcount and the smaller the tickpause, the faster the contraction or expansion process.

4. The flexing event occurs when the isspread is about to change, and the flexed event occurs after the isspread change is complete.

5. The display effect of this control is ugly (because it is drawn by myself, I don't have the talent in this aspect). If anyone can achieve better results, please do not hesitate to give me some advice.

Source code:

Using system; using system. collections. generic; using system. componentmodel; using system. data; using system. drawing; using system. text; using system. windows. forms; namespace commonlibrary. extendedcontrol {////// A tag with the scaling function ///Public partial class flexlabel: Control {# region data # region control plotting ////// Whether to highlight ///Private bool _ ishighlight = false ;////// Whether it is in the stretching status ///Private bool _ isspread = false ;////// Status change: this variable is used to prevent users from modifying the isspread attribute in the flexing Event Response ///Private bool statechanging = false ;////// The border path of the highlighted area ///System. Drawing. drawing2d. graphicspath highlightregionpath ;////// Highlighted color ///Color _ highlightcolor ;////// The hidden color ///Color _ hidecolor ;////// The brush used to fill the highlighted area ///Brush highlightbrush ;////// Specifies the paint brush used to clear the highlighted area ///Brush hidebrush ;////// Text painter ///Brush textbrush ;////// Description ///String _ description; private int _ labelstyle = 0; # endregion # region associated control data and scaling effect ////// Target ///Control _ target ;////// The size when shrinking ///Int _ sizeshrink = 10 ;////// Dimensions during Stretching ///Int _ sizespread = 10 ;////// Interval angle of the damping effect ///Double radiantick = 5 * (math. PI/180 );////// Indicates that the scaling process is completed in multiple parts ///Int _ tickcount = 10 ;////// Specify the time interval between two scaling actions, in milliseconds ///Int _ tickpause = 50; # endregion canceleventargs flexingargs; # endregion # region attribute ////// Whether it is in the stretching status ///Public bool isspread {get {return _ isspread;} set {If (_ isspread = value | statechanging) return; statechanging = true; flexingargs. cancel = false; If (_ flexing! = NULL) _ flexing (this, flexingargs); If (flexingargs. cancel) {statechanging = false; return;} _ isspread = value; flextarget (); this. refresh (); statechanging = false; If (_ flexed! = NULL) _ flexed (this, system. eventargs. Empty) ;}# region control painting ////// Whether to highlight ///Private bool ishighlight {get {return _ ishighlight;} set {If (_ ishighlight = value) return; _ ishighlight = value; this. Refresh ();}}////// Highlighted color ///Public color highlightcolor {get {return _ highlightcolor;} set {If (_ highlightcolor = value) return; _ highlightcolor = value; highlightbrush = new solidbrush (_ highlightcolor );}} ////// Hide the color ///Public color hidecolor {get {return _ hidecolor;} set {If (_ hidecolor = value) return; _ hidecolor = value; hidebrush = new solidbrush (_ hidecolor );}} ////// Displayed prompt information ///[Browsable (true)] public override string text {get {return base. Text;} set {base. Text = value ;}}////// Tag style ///Public int labelstyle {get {return _ labelstyle;} set {_ labelstyle = value ;}# endregion # region associated control and scaling effect ////// Associated controls ///Public control target {get {return _ target;} set {_ target = value ;}}////// Orientation ///Public orientation {get {return orientation. Vertical;} set {}}////// The size when shrinking ///Public int sizeshrink {get {return _ sizeshrink;} set {If (value // the size of the sizespread when stretching // public int sizespread {get {return _ sizespread ;} set {If (value // This value is used to specify the number of completed scaling processes. The larger the value, the smoother the scaling process, the higher the cost. The recommended range is between 8 and 20. /// Public int tickcount {get {return _ tickcount;} set {If (_ tickcount 30) {tickcount = 30 ;}else {_ tickcount = value;} radiantick = math. PI/(_ tickcount * 2 );}}////// Specify the time interval between two scaling actions, in milliseconds ///Public int tickpause {get {return _ tickpause;} set {If (_ tickpause // scaling event // Private event canceleventhandler _ flexing ;////// Scaling event ///Public event canceleventhandler flexing {Add {_ flexing + = value ;}remove {_ flexing-= value ;}}////// Events after scaling ///Private event eventhandler _ flexed ;////// Events after scaling ///Public event eventhandler flexed {Add {_ flexed + = value ;}remove {_ flexed-= value ;}# endregion # region method public flexlabel () {initializecomponent (); # region paint brush // graphics = This. creategraphics (); highlightregionpath = getlrroundregionpath (this. clientrectangle); highlightcolor = color. fromknowncolor (knowncolor. control); hidecolor = color. fromknowncolor (knowncolor. window); textbrush = new solidbrush (color. fromknowncolor (knowncolor. black); # endregion this. padding = new padding (3, 3, 20, 3); flexingargs = new canceleventargs (false );}////// Reset the scaling status //////Public void resetflex (bool isspread) {_ isspread = isspread; this. refresh ();} protected override void onpaint (painteventargs PE) {// todo: add custom paint code here // calling the base class onpaint base. onpaint (PE); float ypos = math. max (0, (this. height-10)/2; If (highlightregionpath = NULL) return; PE. graphics. fillrectangle (hidebrush, this. clientrectangle); If (ishighlight) PE. graphics. f Illpath (highlightbrush, highlightregionpath); PE. graphics. drawstring (this. text, this. font, this. textbrush, this. padding. left, ypos); string flextag = (isspread )? "Weight": "weight"; PE. graphics. drawstring (flextag, this. font, this. textbrush, (float) (this. width-this. padding. right), ypos);} protected override void onsizechanged (eventargs e) {base. onsizechanged (E); console. writeline ("sizechanged"); highlightregionpath = getlrroundregionpath (this. clientrectangle); // graphics = This. creategraphics ();} protected override void onmouseenter (eventargs e) {base. onmousee Nter (E); ishighlight = true; // graphics. fillpath (highlightbrush, highlightregionpath); // graphics. drawstring (description, this. font, this. textbrush, 8f, 3f);} protected override void onmouseleave (eventargs e) {base. onmouseleave (E); ishighlight = false; // graphics. fillpath (hidebrush, highlightregionpath); // graphics. drawstring (description, this. font, this. textbrush, 8f, 3f);} protected override Void onclick (eventargs e) {base. onclick (E); isspread =! Isspread ;}////// Obtain an arc area between the left and right sides //////Rectangle containing area ///
 Public System. drawing. drawing2d. graphicspath getlrroundregionpath (rectangle rect) {system. drawing. drawing2d. graphicspath Path = NULL; rectangle arcrect; try {Path = new system. drawing. drawing2d. graphicspath (); Switch (labelstyle) {Case 0: # smooth arcrect at both ends of region = new rectangle (rect. location, new size (rect. height, rect. height); // path on the left. addarc (arcrect, 90,180); // right arcrect. X = rect. X + rect. width-rect. height; Path. addarc (arcrect, 270,180); break; # endregion Case 1: # region four-corner smooth arcrect = new rectangle (rect. location, new size (8, 8); // path in the upper left corner. addarc (arcrect, 180, 90); arcrect. X = rect. width-9; // path in the upper right corner. addarc (arcrect, 270, 90); arcrect. y = rect. height-9; // path in the lower right corner. addarc (arcrect, 0, 90); arcrect. X = 0; // path in the lower left corner. addarc (arcrect, 90, 90); break; # endregion Case 2: # region four-corner smooth path. addline (0, 2, 2, 0); Path. addline (rect. width-2, 0, rect. width, 2); Path. addline (rect. width, rect. height-2, rect. width-2, rect. height); Path. addline (2, rect. height, 0, rect. height-2); break; # endregion default: break;} // close path. closefigure ();} catch (exception ex) {console. writeline (ex. tostring ();} return path ;}////// Scaling target control ///Public void flextarget () {If (target = NULL | sizeshrink = sizespread) return; int distance = sizespread-sizeshrink; double radian = 0; double radiantick = This. isspread? This. radiantick:-This. radiantick; int sizeinit = This. isspread? This. sizeshrink: This. sizespread; For (INT I = 0; I