CSkin博客

标题: 【DSkin教程系列】IDSkinSwitchButton开关按钮 [打印本页]

---

作者: Blue_Pen    时间: 2018-9-21 11:01
标题: 【DSkin教程系列】IDSkinSwitchButton开关按钮

【IDSkinSwitchButton】开关按钮

很多人一看到这个开关按钮可能都会想到，用CheckBox,设置两张图片不就行了，没错，的确用CheckBox可以实现开关按钮。

但是今天我们在这里讲的是通过DSkin界面库拓展实现Android和IPhone手机上的SwichButton。我们先看一下微信中switchButton的效果。

如下图：

当然点击他们开关时是有动画的，在你们的手机上都可以看到这种动画效果，所以说简单的用CheckBox是无法实现的。

接下来, 我们就一步步实现这个效果控件。

一、定义按钮的开和关枚举

[C#] 纯文本查看 复制代码

/// <summary>
    /// 滑块状态枚举
    /// </summary>
    public enum StrockState
    {
        Open = 0x01,
        Close = 0x02
    }

二构造函数初始化控件样式

[C#] 纯文本查看 复制代码

 

public IDSkinSwitchButton()

        {

            InitializeComponent();

            this.IsPureColor = true;

            this.Text = "";

            this.ButtonBorderColor = Color.Transparent;

            this.InnerDuiControl.Controls.Add(StrockButton);

            SetRadius();

            SetStyle();

            this.SizeChanged += delegate

            {

                SetRadius();

            };

        }

三、定义按钮属性

1、滑块显示模式(Horizontal:横向；Vertical:纵向)

2、滑块背景色

3、滑块鼠标移入时的背景色

4、滑块鼠标点击时的背景色

5、打开状态时的背景色

6、关闭状态时的背景色

7、设置滑块与控件之间的间隙

属性代码：

[C#] 纯文本查看 复制代码

#region 属性

        private bool _designAnimotion = false;

        [Description("设置和获取设计模式下开启动画预览"), Category("IDSkinSwitchButton属性")]
        public bool DesignAnimotion
        {
            get { return _designAnimotion; }
            set { _designAnimotion = value; }
        }

        private StrockState _strockState = StrockState.Close;

        /// <summary>
        /// 设置和获取按钮状态（Open或Close）
        /// </summary>
        [Description("设置和获取按钮状态（Open或Close）"), Category("IDSkinSwitchButton属性")]
        public StrockState StrockState
        {
            get { return _strockState; }
            set
            {
                _strockState = value;
                SetStyle();
                if (_strockState == StrockState.Open)
                {
                    if (Orientation == Orientation.Horizontal)
                    {
                        //如果是横向模式，则启用横向Open动画
                        int left = this.Width - StrockButton.Width - SwitchViewStrockWidth;
                        if (DesignMode && !DesignAnimotion)
                        {
                            StrockButton.Left = left;
                            return;
                        }
                        StrockButton.DoEffect(StrockButton.Left, left, StrockSpeed, "Left", (a) => { });
                    }
                    else if (Orientation == Orientation.Vertical)
                    {
                        //如果是纵向模式，则启用纵向Open动画
                        int top = this.Height - StrockButton.Height - SwitchViewStrockWidth;
                        if (DesignMode && !DesignAnimotion)
                        {
                            StrockButton.Top = top;
                            return;
                        }
                        StrockButton.DoEffect(StrockButton.Top, top, StrockSpeed, "Top", (a) => { });
                    }
                }
                else if (_strockState == StrockState.Close)
                {
                    if (Orientation == Orientation.Horizontal)
                    {
                        //如果是横向模式，则启用横向Close动画
                        int left = SwitchViewStrockWidth;
                        if (DesignMode && !DesignAnimotion)
                        {
                            StrockButton.Left = left;
                            return;
                        }
                        StrockButton.DoEffect(StrockButton.Left, left, StrockSpeed, "Left", (a) => { });
                    }
                    else if (Orientation == Orientation.Vertical)
                    {
                        //如果是纵向模式，则启用纵向Close动画
                        int top = SwitchViewStrockWidth;
                        if (DesignMode && !DesignAnimotion)
                        {
                            StrockButton.Top = top;
                            return;
                        }
                        StrockButton.DoEffect(StrockButton.Top, top, StrockSpeed, "Top", (a) => { });
                    }
                }
            }
        }

        private int _strockSpeed = 200;

        /// <summary>
        /// 设置和获取滑块滑动的速度。(单位毫秒，如200，滑块将在200毫秒内完成动画，数值越小动画越快)
        /// </summary>
        [Description("设置和获取滑块滑动的速度。(单位毫秒，如200，滑块将在200毫秒内完成动画，数值越小动画越快)"), Category("IDSkinSwitchButton属性")]
        public int StrockSpeed
        {
            get { return _strockSpeed; }
            set { _strockSpeed = value; }
        }

        private DuiButton _strockButton = null;

        /// <summary>
        /// 滑块按钮
        /// </summary>
        [Description("滑块按钮"), Category("IDSkinSwitchButton属性"), Browsable(false)]
        public DuiButton StrockButton
        {
            get
            {
                if (_strockButton == null || _strockButton.IsDisposed)
                {
                    _strockButton = new DuiButton();
                    _strockButton.Text = "";
                    _strockButton.IsPureColor = true;
                    _strockButton.BaseColor = SwitchViewStrockColor;
                    _strockButton.DesignModeCanMove = false;
                    _strockButton.DesignModeCanSelect = false;
                    _strockButton.DesignModeCanResize = false;
                    _strockButton.ButtonBorderColor = Color.Transparent;
                    _strockButton.MouseClick += (s, e) =>
                    {
                        StrockState = StrockState == StrockState.Open ? StrockState.Close : StrockState.Open;
                        OnStrockStateChanged(e);
                    };
                }
                return _strockButton;
            }
        }

        /// <summary>
        /// 滑块显示模式。(Horizontal:横向；Vertical:纵向)
        /// </summary>
        [Description("滑块显示模式。(Horizontal:横向；Vertical:纵向)"), Category("IDSkinSwitchButton属性")]
        private Orientation _orientation = Orientation.Horizontal;
        public Orientation Orientation
        {
            get { return _orientation; }
            set
            {
                _orientation = value;
                SetRadius();
            }
        }

        private Color _switchViewStrockColor = Color.White;

        /// <summary>
        /// 滑块背景色
        /// </summary>
        [Description("滑块背景色"), Category("IDSkinSwitchButton属性")]
        public Color SwitchViewStrockColor
        {
            get { return _switchViewStrockColor; }
            set
            {
                _switchViewStrockColor = value;
                SetStyle();
            }
        }

        private Color _switchViewStrockHoverColor = Color.White;

        /// <summary>
        /// 滑块鼠标移入时的背景色
        /// </summary>
        [Description("滑块鼠标移入时的背景色"), Category("IDSkinSwitchButton属性")]
        public Color SwitchViewStrockHoverColor
        {
            get { return _switchViewStrockHoverColor; }
            set
            {
                _switchViewStrockHoverColor = value;
                SetStyle();
            }
        }

        private Color _switchViewStrockPressColor = Color.White;

        /// <summary>
        /// 滑块鼠标移入时的背景色
        /// </summary>
        [Description("滑块鼠标点击时的背景色"), Category("IDSkinSwitchButton属性")]
        public Color SwitchViewStrockPressColor
        {
            get { return _switchViewStrockPressColor; }
            set
            {
                _switchViewStrockPressColor = value;
                SetStyle();
            }
        }

        private Color _switchViewStrockOpenColor = Color.FromArgb(26, 172, 25);

        /// <summary>
        /// 获取和设置打开状态时的背景色
        /// </summary>
        [Description("获取和设置打开状态时的背景色"), Category("IDSkinSwitchButton属性")]
        public Color SwitchViewStrockOpenColor
        {
            get { return _switchViewStrockOpenColor; }
            set
            {
                _switchViewStrockOpenColor = value;
                SetStyle();
            }
        }

        private Color _switchViewStrockCloseColor = Color.FromArgb(153, 153, 153);

        /// <summary>
        /// 获取和设置关闭状态时的背景色
        /// </summary>
        [Description("获取和设置关闭状态时的背景色"), Category("IDSkinSwitchButton属性")]
        public Color SwitchViewStrockCloseColor
        {
            get { return _switchViewStrockCloseColor; }
            set
            {
                _switchViewStrockCloseColor = value;
                SetStyle();
            }
        }

        private int _switchViewStrockWidth = 2;

        /// <summary>
        /// 获取和设置滑块与控件之间的间隙
        /// </summary>
        [Description("获取和设置滑块与控件之间的间隙"), Category("IDSkinSwitchButton属性")]
        public int SwitchViewStrockWidth
        {
            get { return _switchViewStrockWidth; }
            set
            {
                _switchViewStrockWidth = value;
                SetRadius();
            }
        }

        #endregion

四、设置属性改变时刷新方法

用于刷新圆角、按钮颜色等属性

[C#] 纯文本查看 复制代码

#region 方法

        /// <summary>
        /// 设置滑快圆角样式和控件圆角样式
        /// </summary>
        public void SetRadius()
        {
            if (Orientation == Orientation.Horizontal)
            {
                this.Radius = this.Height;
                StrockButton.Size = new Size(this.Height - SwitchViewStrockWidth*2,
                    this.Height - SwitchViewStrockWidth*2);
                StrockButton.Radius = StrockButton.Width;
                StrockButton.Location = StrockState == StrockState.Close
                    ? new Point(SwitchViewStrockWidth, SwitchViewStrockWidth)
                    : new Point(this.Width - StrockButton.Width - SwitchViewStrockWidth, SwitchViewStrockWidth);
            }
            else if (Orientation == Orientation.Vertical)
            {
                this.Radius = this.Width;
                StrockButton.Size = new Size(this.Width - SwitchViewStrockWidth*2, this.Width - SwitchViewStrockWidth*2);
                StrockButton.Radius = StrockButton.Width;
                StrockButton.Location = StrockState == StrockState.Close
                    ? new Point(SwitchViewStrockWidth, SwitchViewStrockWidth)
                    : new Point(SwitchViewStrockWidth, this.Height - StrockButton.Height - SwitchViewStrockWidth);
            }
        }

        /// <summary>
        /// 设置滑块和控件颜色样式
        /// </summary>
        public void SetStyle()
        {
            this.HoverColor =
                this.PressColor =
                    this.BaseColor =
                        StrockState == StrockState.Open ? SwitchViewStrockOpenColor : SwitchViewStrockCloseColor;
            StrockButton.BaseColor = _switchViewStrockColor;
            StrockButton.HoverColor = _switchViewStrockHoverColor;
            StrockButton.PressColor = _switchViewStrockPressColor;
        }

        #endregion

五、创建开关自定义事件

[C#] 纯文本查看 复制代码

/// <summary>

        /// 滑块状态改变时触发

        /// </summary>

        [Description("滑块状态改变时触发")]

        public event EventHandler<DuiMouseEventArgs> StrockStateChanged;



        protected virtual void OnStrockStateChanged(DuiMouseEventArgs e)

        {

            if (StrockStateChanged != null)

            {

                StrockStateChanged(this, e);

            }

        }

又看视频教程的朋友们可以看到在滑块动画中我们用的是:

[C#] 纯文本查看 复制代码

StrockButton.DoEffect(StrockButton.Top, top, StrockSpeed, "Top", (a) => { });

DoEffect这个动画方法。

最终效果如下图所示：

购买DSkin界面授权请联系：

乔克斯：[qq]345015918[/qq]

小红帽：[qq]761716178[/qq]

---

作者: 214679    时间: 2018-9-29 08:54
慢慢學習, 謝謝樓主!

---

作者: 86208012@qq.com    时间: 2019-8-26 09:35
直接封装成控件多好

---

作者: wangxiangtan    时间: 2019-12-27 14:38
目测效果不错

---

作者: z290555412    时间: 2020-2-20 00:43
public event EventHandler<DuiMouseEventArgs> StrockStateChanged;           protected virtual void OnStrockStateChanged(DuiMouseEventArgs e)         {             if (StrockStateChanged != null)             {                 StrockStateChanged(this, e);             }         }

---

作者: z290555412    时间: 2020-2-20 00:45
段提示错误，
错误        CS0116        命名空间不能直接包含字段或方法之类的成员       

---

欢迎光临 CSkin博客 (http://bbs.cskin.net/)

Powered by Discuz! X3.2