C# 自定义窗体收缩容器 伸缩控件的实现

直接上效果

 

想要实现的效果，不用解释也看得出来了，为了给窗体节省空间，让它可以贴附在窗体的边缘。

那么怎么实现这个效果呢？原理在于对Padding这个属性的妙用。

另外可以看见，窗体在设计的时候也是可以进行事件的交互的，就像TabControl在设计的时候可以点击每一个Page一样，关于这个如果有兴趣，就可以参考一下msdn 关于ParentControlDesigner和ControlDesigner给的例子了。

好了废话不多说先上容器的代码

[Designer(typeof(MiracleControls.ControlDesigner.LayoutPanelDesigner))]
    [ToolboxBitmap(typeof(LayoutPanel))]
    public class LayoutPanel : Panel
    {
        private System.ComponentModel.Container components = null;
        public LayoutPanel()
        {
            components = new System.ComponentModel.Container();
            DoubleBuffered = true;
            BackColor = Color.Transparent;
            Padding = new Padding(0, 0, _controlSize, 0);
            if (_state == States.Open)
                buttonRect = new Rectangle(Width - _controlSize, Height / 2 - _controlSize / 2, _controlSize, _controlSize);
            else
                buttonRect = new Rectangle(0, Height / 2 - _controlSize / 2, _controlSize, _controlSize);
            Dock = DockStyle.Right;
        }
        #region Properties
        private Color _arrowColor = Color.White;
        private int _controlSize = 20;
        private Color _buttonColor = Color.FromArgb(55, 55, 55);
        private Color _hoverColor = Color.Orange;
        private States _state = States.Open;
        private int _memorySize = 50;
        private bool _hover = false;
        private bool _down = false;

        public override DockStyle Dock 
        {
            get { return base.Dock; }
            set { base.Dock = value == DockStyle.Left || value == DockStyle.Right ? value : Dock; }
        }
        public int ButtonSize
        {
            get { return _controlSize; }
            set { _controlSize = value >= 20 ? value : 20; changeSize(); Invalidate(); }
        }
        public Color ArrowColor
        {
            get { return _arrowColor; }
            set { _arrowColor = value; Invalidate(); }
        }
        public Color ButtonColor
        {
            get { return _buttonColor; }
            set { _buttonColor = value; Invalidate(); }
        }
        public Color HoverColor
        {
            get { return _hoverColor; }
            set { _hoverColor = value;Invalidate(buttonRect); }
        }
        private bool Hover
        {
            get { return _hover; }
            set
            {
                _hover = value;
                if (_hover)
                    Cursor = Cursors.Hand;
                else
                    Cursor = Cursors.Default;
                Invalidate(buttonRect);
            }
        }
        private bool Down
        {
            get { return _down; }
            set { _down = value; }
        }
        [Browsable(false)]
        public int MemorySize
        {
            get { return _memorySize; }
            set { _memorySize = value; }
        }
        public States State
        {
            get { return _state; }
            set
            {
                _state = value;
                changeSize();
                Invalidate(buttonRect);
            }
        }
        public enum States
        { Open, Close };
        #endregion

        private void changeSize()
        {
            if (State == States.Close)
            {
                if (Dock == DockStyle.Left)
                {
                    Size = new Size(_controlSize, Height);
                    Padding = new Padding(_controlSize, 0, 0, 0);
                }
                else if (Dock == DockStyle.Right)
                {
                    Size = new Size(_controlSize, Height);
                    Padding = new Padding(_controlSize, 0, 0, 0);
                }
            }
            else
            {
                if (Dock == DockStyle.Left)
                {
                    Padding = new Padding(0, 0, _controlSize, 0);
                    Size = new Size(_memorySize, Height);
                }
                else if (Dock == DockStyle.Right)
                {
                    Size = new Size(MemorySize, Height);
                    Padding = new Padding(_controlSize, 0, 0, 0);
                }
            }
        }
        Rectangle buttonRect;
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics G = e.Graphics;
            G.SmoothingMode = SmoothingMode.HighQuality;
            //绘制虚线框
            if (Site != null)
                using (Pen pen = new Pen(Color.Blue))
                {
                    pen.DashStyle = DashStyle.Custom;
                    pen.DashPattern = new float[] { 5, 5 };
                    G.DrawRectangle(pen, new Rectangle(Padding.Left, Top, Width - Padding.Right - 1, Height - Padding.Bottom - 1));
                }

            Rectangle circleRect = new Rectangle(buttonRect.X + 1, buttonRect.Y + 1, buttonRect.Width - 2, buttonRect.Height - 2);
            using (LinearGradientBrush lb = new LinearGradientBrush(Dock == DockStyle.Left ? buttonRect :
                new Rectangle(buttonRect.X, buttonRect.Y, buttonRect.Width + 1, buttonRect.Height), BackColor, Color.FromArgb(180, _buttonColor), 0F))
            {
                lb.SetBlendTriangularShape(0.5F);
                using (GraphicsPath GP = CreatePath())
                    G.FillPath(lb, GP);
            }
            using (SolidBrush sb = new SolidBrush(ControlPaint.Dark(_buttonColor, 0.2F)))
                G.FillEllipse(sb, buttonRect);
            using (SolidBrush sb = new SolidBrush(_buttonColor))
            {
                G.FillEllipse(sb, circleRect);
            }
            if (Dock == DockStyle.Left || Dock == DockStyle.Right)
                DrawLeftRight(G, circleRect);
        }
        private void DrawLeftRight(Graphics G, Rectangle circleRect)
        {
            using (Pen pen = new Pen(_hover ? _hoverColor : _arrowColor, 2))
            {
                if (Dock == DockStyle.Left)
                    if (State == States.Open)
                    {
                        G.DrawLine(pen, circleRect.X + circleRect.Width / 8 + circleRect.Width / 4, circleRect.Y + 1 + circleRect.Height / 2,
                               circleRect.X + circleRect.Width / 8 + circleRect.Width / 2, circleRect.Y + 1 + circleRect.Height / 4);
                        G.DrawLine(pen, circleRect.X + circleRect.Width / 8 + circleRect.Width / 4, circleRect.Y + circleRect.Height / 2,
                            circleRect.X + circleRect.Width / 8 + circleRect.Width / 2, circleRect.Y + circleRect.Height - circleRect.Height / 4);
                    }
                    else
                    {
                        G.DrawLine(pen, circleRect.X + circleRect.Width / 2 - circleRect.Width / 8, circleRect.Y + 1 + circleRect.Height / 4,
                              circleRect.X - circleRect.Width / 8 + circleRect.Width - circleRect.Width / 4, circleRect.Y + 1 + circleRect.Height / 2);
                        G.DrawLine(pen, circleRect.X + circleRect.Width / 2 - circleRect.Width / 8, circleRect.Y + circleRect.Height - circleRect.Height / 4,
                               circleRect.X - circleRect.Width / 8 + circleRect.Width - circleRect.Width / 4, circleRect.Y + circleRect.Height / 2);
                    }
                else
                if (State == States.Close)
                {
                    G.DrawLine(pen, circleRect.X + circleRect.Width / 8 + circleRect.Width / 4, circleRect.Y + 1 + circleRect.Height / 2,
                           circleRect.X + circleRect.Width / 8 + circleRect.Width / 2, circleRect.Y + 1 + circleRect.Height / 4);
                    G.DrawLine(pen, circleRect.X + circleRect.Width / 8 + circleRect.Width / 4, circleRect.Y + circleRect.Height / 2,
                        circleRect.X + circleRect.Width / 8 + circleRect.Width / 2, circleRect.Y + circleRect.Height - circleRect.Height / 4);
                }
                else
                {
                    G.DrawLine(pen, circleRect.X + circleRect.Width / 2 - circleRect.Width / 8, circleRect.Y + 1 + circleRect.Height / 4,
                          circleRect.X - circleRect.Width / 8 + circleRect.Width - circleRect.Width / 4, circleRect.Y + 1 + circleRect.Height / 2);
                    G.DrawLine(pen, circleRect.X + circleRect.Width / 2 - circleRect.Width / 8, circleRect.Y + circleRect.Height - circleRect.Height / 4,
                           circleRect.X - circleRect.Width / 8 + circleRect.Width - circleRect.Width / 4, circleRect.Y + circleRect.Height / 2);
                }
            }
        }
        private GraphicsPath CreatePath()
        {
            GraphicsPath GP = new GraphicsPath();
            if (Dock == DockStyle.Left)
                GP.AddLines(new PointF[] {new PointF(Width-_controlSize,Height/2-2*_controlSize),
            new Point(Width-_controlSize/2,Height/2-_controlSize),new PointF(Width-_controlSize/2,Height/2+_controlSize)
            ,new PointF(Width-_controlSize,Height/2+2*_controlSize),new PointF(Width-_controlSize,Height/2-2*_controlSize)});
            else if (Dock == DockStyle.Right)
                GP.AddLines(new PointF[] {new PointF(_controlSize,Height/2-2*_controlSize),
            new Point(_controlSize/2,Height/2-_controlSize),new PointF(_controlSize/2,Height/2+_controlSize)
            ,new PointF(_controlSize,Height/2+2*_controlSize),new PointF(_controlSize,Height/2-2*_controlSize)});
            return GP;
        }
        protected override void OnMouseDown(MouseEventArgs e)
        {
            base.OnMouseDown(e);
            if (e.X > buttonRect.X && e.X < buttonRect.X + buttonRect.Width && e.Y > buttonRect.Y && e.Y < buttonRect.Y + buttonRect.Height)
            {
                if (!Down)
                    Down = true;
            }
            else { if (Down) Down = false; }
        }
        protected override void OnMouseLeave(EventArgs e)
        {
            base.OnMouseLeave(e);
            Hover = false;
        }
        protected override void OnMouseUp(MouseEventArgs e)
        {
            base.OnMouseUp(e);
            Down = false;
        }
        protected override void OnMouseMove(MouseEventArgs e)
        {
            base.OnMouseMove(e);
            if (e.X > buttonRect.X && e.X < buttonRect.X + buttonRect.Width && e.Y > buttonRect.Y && e.Y < buttonRect.Y + buttonRect.Height)
            {
                if (!Hover)
                    Hover = true;
            }
            else { if (Hover) Hover = false; }
        }
        protected override void OnMouseClick(MouseEventArgs e)
        {
            base.OnMouseClick(e);
            if (Hover && Down)
                State = _state == States.Open ? States.Close : States.Open;
        }
        protected override void OnResize(EventArgs eventargs)
        {
            base.OnResize(eventargs);
            if (State != States.Close && this.Width > _controlSize)
                MemorySize = Width;
            if (Dock == DockStyle.Left)
            {
                if (_state == States.Open)
                    buttonRect = new Rectangle(Width - _controlSize, Height / 2 - _controlSize / 2, _controlSize - 1, _controlSize - 1);
                else
                    buttonRect = new Rectangle(0, Height / 2 - _controlSize / 2, _controlSize - 1, _controlSize - 1);
            }
            else if (Dock == DockStyle.Right)
            {
                if (_state == States.Open)
                    buttonRect = new Rectangle(0, Height / 2 - _controlSize / 2, _controlSize - 1, _controlSize - 1);
                else
                    buttonRect = new Rectangle(0, Height / 2 - _controlSize / 2, _controlSize - 1, _controlSize - 1);
            }
            Invalidate();
        }
        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                if (components != null)
                    components.Dispose();
            }
            base.Dispose(disposing);
        }
    }

首先 映入眼帘的有这样一行特性[Designer(typeof(MiracleControls.ControlDesigner.LayoutPanelDesigner))]这是什么意思呢，这就是让这个容器在窗体设计器上可以进行交互的一个必不可少的东西了，至于MiracleControls.ControlDesigner这个命名空间，可以不用关心，因为这是写在我自己的类库中的，有点懒，代码中出现类似的命名空间，均不用关心。

好了，先提供设计器的类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Drawing;
using MiracleControls.ContainerControls;
using System.Windows.Forms;
using System.Windows.Forms.Design;

namespace MiracleControls.ControlDesigner
{
    public class LayoutPanelDesigner : System.Windows.Forms.Design.ParentControlDesigner
    {
        public override SelectionRules SelectionRules
        {
            get
            {
                if ((Control as LayoutPanel).State == LayoutPanel.States.Close)
                    return System.Windows.Forms.Design.SelectionRules.None;//让容器在关闭的状态下不可以被调整
                else
                    return SelectionRules.AllSizeable;
            }
        }
        protected override bool GetHitTest(Point point)
        {
            LayoutPanel lay = base.Control as LayoutPanel;//得到宿主控件
            Point e = lay.PointToClient(point);//得到鼠标的坐标
            Rectangle buttonRect = new Rectangle(lay.Width - lay.ButtonSize, lay.Height / 2 - lay.ButtonSize / 2, lay.ButtonSize - 1, lay.ButtonSize - 1);//定义可以点击的按钮区域

            if (lay.Dock == DockStyle.Left)
            {
                if (lay.State == LayoutPanel.States.Open)
                    buttonRect = new Rectangle(lay.Width - lay.ButtonSize, lay.Height / 2 - lay.ButtonSize / 2, lay.ButtonSize - 1, lay.ButtonSize - 1);
                else
                    buttonRect = new Rectangle(0, lay.Height / 2 - lay.ButtonSize / 2, lay.ButtonSize - 1, lay.ButtonSize - 1);
            }
            else if (lay.Dock == DockStyle.Right)
            {
                if (lay.State == LayoutPanel.States.Open)
                    buttonRect = new Rectangle(0, lay.Height / 2 - lay.ButtonSize / 2, lay.ButtonSize - 1, lay.ButtonSize - 1);
                else
                    buttonRect = new Rectangle(0, lay.Height / 2 - lay.ButtonSize / 2, lay.ButtonSize - 1, lay.ButtonSize - 1);
            }
            if (e.X > buttonRect.X && e.X < buttonRect.X + buttonRect.Width && e.Y > buttonRect.Y && e.Y < buttonRect.Y + buttonRect.Height)
            {
                if (isMouseDown)
                {
                    lay.State = lay.State == LayoutPanel.States.Close ? LayoutPanel.States.Open : LayoutPanel.States.Close;
                    isMouseDown = false;
                }
            }
            else
            { isMouseDown = false; }
            return false;
        }
        bool isMouseDown = false;

        protected override void WndProc(ref Message m)
        {
            if (m.Msg == 0x0202)
            { isMouseDown = true; }
            base.WndProc(ref m);
        }
    }
}

代码中没什么解释，这也是我一个不好的习惯。恐怕有一天自己都看不懂了。

 先看图

 

 这是一个 继承Panel的容器，这里为了空出位置 绘制可以点击的那个按钮，所以我们把这个容器的Padding改了，定义按钮的尺寸为ButtonSize 那么上面的情况，按钮的的位置也就好计算了，自己去悟吧。

 

 收缩的效果如上图，只显示一个可以展开的按钮，收缩的原理猜也能够猜测到了，就是改变了容器的尺寸。假如我们把容器的尺寸改变成ButtonSize 并且这个容器的Dock属性 改为Right 那么是不是就可以贴附在窗体的右侧了呢？想想这个道理就很简单对不对。那么此时我们有一个问题，就是收缩之后怎么恢复呢？在代码1中可以看到我写的，我用一个属性专门记录了它展开时候的宽度，如果重新展开那么，恢复尺寸即可。

 

 那么上图的这个 点击事件 我们怎么判断呢，这很简单，判断鼠标按下和移动的位置，就可以得到用户是否点击的这里了。提醒一下哦，鼠标移动和按下必须是同一个区域。至于按钮的形状，重写OnPaint就可以了。