FlexLabel——控制伸缩面板的标签

前    注：

这是自己平时根据自己需要写的一些小代码，未必对各看官有用。另外，这是根据个人想法而写，未必严谨和符合设计原则，若有任何不妥之处，还请不吝赐教。

说    明：

在豆瓣和其它一些网站陆续看到这样的UI效果：单击一篇文章的标题，在下边展开一个面板，显示文章的内容；再次单击则将文章内容面板收缩。

此控件是仿此效果的一个WinForm的实现。

此控件显示为了一个水平的标签条，左边可显示文本，右边显示一个向上或向下的箭头（描述当然相关面板处于展开还是收缩状态）。将鼠标置于控件上时，控件背景将高亮。

使用时，将要展开和收缩的面板关联到此控件并设置好其它相关属性即可。在此控件上单击鼠标时，此控件将通过设置目标控件的高度来达到展开或收缩的效果，展开或收缩的过程应用了阻尼效果。

设计要点&使用说明：

1、Target属性描述此控件关联的面板，IsSpread描述目标面板当前处于展开还是收缩状态。

2、SizeSpread和SizeShrink分别描述目标控件展开或收缩时的尺寸（高度）。

3、阻尼效果指目标控件的尺寸呈正弦曲线形变化。TickCount和TickPause用于控制阻尼效果，TickCount用于控制变化过程分几步完成，TickPause用于控制每两次变化之间的时间间隔。TickCount越大，变化过程越精细；TickCount越小、TickPause越小，收缩或展开的过程越快。

4、Flexing事件发生于IsSpread即将发生变化时，Flexed事件发生于IsSpread变化完成之后。

5、此控件的展示效果比较丑（因为是自己绘制的，在这方面，我没有天赋），如果哪位能够实现更好的效果，还请不吝赐教。

源代码  ：

代码

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
{
     ///   <summary>
     ///  带有伸缩功能的一个标签
     ///   </summary>
     public   partial   class  FlexLabel : Control
    {
         #region  数据

         #region  控件绘制相关

         ///   <summary>
         ///  是否高亮
         ///   </summary>
         private   bool  _IsHighLight  =   false ;

         ///   <summary>
         ///  是否处于伸展状态
         ///   </summary>
         private   bool  _IsSpread  =   false ;

         ///   <summary>
         ///  状态变化：此变量用于防止使用者在Flexing事件响应中修改IsSpread属性
         ///   </summary>
         private   bool  StateChanging  =   false ;

         ///   <summary>
         ///  高亮区域的边界路径
         ///   </summary>
        System.Drawing.Drawing2D.GraphicsPath HighLightRegionPath;

         ///   <summary>
         ///  高亮颜色
         ///   </summary>
        Color _HighLightColor;

         ///   <summary>
         ///  隐藏时的颜色
         ///   </summary>
        Color _HideColor;

         ///   <summary>
         ///  用于填充高亮区域的刷子
         ///   </summary>
        Brush HighLightBrush;

         ///   <summary>
         ///  用于清空高亮区域的刷子
         ///   </summary>
        Brush HideBrush;

         ///   <summary>
         ///  文本画刷
         ///   </summary>  
        Brush TextBrush;

         ///   <summary>
         ///  描述信息
         ///   </summary>
         string  _Description;

         private   int  _LabelStyle  =   0 ;

         #endregion

         #region  关联控件数据与伸缩效果

         ///   <summary>
         ///  目标
         ///   </summary>
        Control _Target;

         ///   <summary>
         ///  收缩时的尺寸
         ///   </summary>
         int  _SizeShrink  =   10 ;

         ///   <summary>
         ///  伸展时的尺寸
         ///   </summary>
         int  _SizeSpread  =   10 ;

         ///   <summary>
         ///  阻尼效果的间隔角度
         ///   </summary>
         double  RadianTick  =   5   *  (Math.PI  /   180 );

         ///   <summary>
         ///  指示伸缩过程分为多个部分完成
         ///   </summary>
         int  _TickCount  =   10 ;

         ///   <summary>
         ///  指定两个部分伸缩动作间的时间间隔，以毫秒为单位
         ///   </summary>
         int  _TickPause  =   50 ;

         #endregion

        CancelEventArgs FlexingArgs;

         #endregion

         #region  属性

         ///   <summary>
         ///  是否处于伸展状态
         ///   </summary>
         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  控件绘制相关

         ///   <summary>
         ///  是否高亮
         ///   </summary>
         private   bool  IsHighLight
        {
             get  {  return  _IsHighLight; }
             set
            {
                 if  (_IsHighLight  ==  value)  return ;
                _IsHighLight  =  value;
                 this .Refresh();
            }
        }

         ///   <summary>
         ///  高亮颜色
         ///   </summary>
         public  Color HighLightColor
        {
             get  {  return  _HighLightColor; }
             set
            {
                 if  (_HighLightColor  ==  value)  return ;

                _HighLightColor  =  value;
                HighLightBrush  =   new  SolidBrush(_HighLightColor);
            }
        }

         ///   <summary>
         ///  隐藏颜色
         ///   </summary>
         public  Color HideColor
        {
             get  {  return  _HideColor; }
             set
            {
                 if  (_HideColor  ==  value)  return ;

                _HideColor  =  value;
                HideBrush  =   new  SolidBrush(_HideColor);
            }
        }

         ///   <summary>
         ///  显示的提示信息
         ///   </summary>
        [Browsable( true )]
         public   override   string  Text
        {
             get
            {
                 return   base .Text;
            }
             set
            {
                 base .Text  =  value;
            }
        }

         ///   <summary>
         ///  标签样式
         ///   </summary>
         public   int  LabelStyle
        {
             get  {  return  _LabelStyle; }
             set  { _LabelStyle  =  value; }
        }

         #endregion

         #region  关联控件与伸缩效果

         ///   <summary>
         ///  关联的控件
         ///   </summary>
         public  Control Target
        {
             get  {  return  _Target; }
             set  { _Target  =  value; }
        }

         ///   <summary>
         ///  朝向
         ///   </summary>
         public  Orientation Orientation
        {
             get  {  return  Orientation.Vertical; }
             set  { }
        }

         ///   <summary>
         ///  收缩时的尺寸
         ///   </summary>
         public   int  SizeShrink
        {
             get  {  return  _SizeShrink; }
             set
            {
                 if  (value  <   0 )  return ;
                _SizeShrink  =  value;
            }
        }

         ///   <summary>
         ///  伸展时的尺寸
         ///   </summary>
         public   int  SizeSpread
        {
             get  {  return  _SizeSpread; }
             set
            {
                 if  (value  <  _SizeShrink)  return ;
                _SizeSpread  =  value;
            }
        }

         ///   <summary>
         ///  此值用于指定将伸缩过程分为多少次完成。此值越大，则伸缩过程的平滑效果越好，但代价也越大。推荐在8至20之间。
         ///   </summary>
         public   int  TickCount
        {
             get  {  return  _TickCount; }
             set
            {
                 if  (_TickCount  <   1 )
                {
                    _TickCount  =   1 ;
                }
                 else   if  (_TickCount  >   30 )
                {
                    TickCount  =   30 ;
                }
                 else
                {
                    _TickCount  =  value;
                }

                RadianTick  =  Math.PI  /  (_TickCount  *   2 );
            }
        }

         ///   <summary>
         ///  指定两个部分伸缩动作间的时间间隔，以毫秒为单位
         ///   </summary>
         public   int  TickPause
        {
             get  {  return  _TickPause; }
             set
            {
                 if  (_TickPause  <   0 )
                {
                    _TickPause  =   0 ;
                }
                 else
                {
                    _TickPause  =  value;
                }
            }
        }

         #endregion

         #endregion

         #region  事件

         ///   <summary>
         ///  伸缩事件
         ///   </summary>
         private   event  CancelEventHandler _Flexing;

         ///   <summary>
         ///  伸缩事件
         ///   </summary>
         public   event  CancelEventHandler Flexing
        {
            add
            {
                _Flexing  +=  value;
            }
            remove
            {
                _Flexing  -=  value;
            }
        }

         ///   <summary>
         ///  伸缩发生后事件
         ///   </summary>
         private   event  EventHandler _Flexed;

         ///   <summary>
         ///  伸缩发生后事件
         ///   </summary>
         public   event  EventHandler Flexed
        {
            add
            {
                _Flexed  +=  value;
            }
            remove
            {
                _Flexed  -=  value;
            }
        }

         #endregion

         #region  方法

         public  FlexLabel()
        {
            InitializeComponent();

             #region  画笔

             // 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 );
        }

         ///   <summary>
         ///  重置伸缩状态
         ///   </summary>
         ///   <param name="IsSpread"></param>
         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.FillPath(HighLightBrush, HighLightRegionPath);

            pe.Graphics.DrawString( this .Text,  this .Font,  this .TextBrush,  this .Padding.Left, YPos);

             string  FlexTag  =  (IsSpread)  ?   " ︽ "  :  " ︾ " ;

            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 .OnMouseEnter(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;
        }

         ///   <summary>
         ///  获取一个左右两端为弧形的区域
         ///   </summary>
         ///   <param name="Rect"> 包含区域的矩形 </param>
         ///   <returns></returns>
         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 :
                         #region  两端圆滑

                        ArcRect  =   new  Rectangle(Rect.Location,  new  Size(Rect.Height, Rect.Height));

                         // 左边
                        Path.AddArc(ArcRect,  90 ,  180 );

                         // 右边
                        ArcRect.X  =  Rect.X  +  Rect.Width  -  Rect.Height;
                        Path.AddArc(ArcRect,  270 ,  180 );

                         break ;
                         #endregion

                     case   1 :
                         #region  四角圆滑

                        ArcRect  =   new  Rectangle(Rect.Location,  new  Size( 8 ,  8 ));

                         // 左上角
                        Path.AddArc(ArcRect,  180 ,  90 );


                        ArcRect.X  =  Rect.Width  -   9 ;
                         // 右上角
                        Path.AddArc(ArcRect,  270 ,  90 );

                        ArcRect.Y  =  Rect.Height  -   9 ;
                         // 右下角
                        Path.AddArc(ArcRect,  0 ,  90 );

                        ArcRect.X  =   0 ;
                         // 左下角
                        Path.AddArc(ArcRect,  90 ,  90 );

                         break ;

                         #endregion

                     case   2 :
                         #region  四角平滑

                        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 ;
                }

                 // 闭合
                Path.CloseFigure();
            }
             catch  (Exception ex)
            {
                Console.WriteLine(ex.ToString());
            }

             return  Path;
        }

         ///   <summary>
         ///  伸缩目标控件
         ///   </summary>
         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  <  _TickCount; i ++ )
            {
                Radian  +=  RadianTick;

                Target.Height  =  SizeInit  +  ( int )(Distance  *  Math.Sin(Radian));

                Target.Update();

                System.Threading.Thread.Sleep(_TickPause);
            }
        }

         #endregion
    }
}