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