作者: Blue_Pen
查看: 622|回复: 1

【DSkin教程系列】IDSkinSwitchButton开关按钮

[复制链接]
Blue_Pen 发表于 2018-9-21 11:01:24 | 显示全部楼层 |阅读模式
查看: 622|回复: 1
本帖最后由 Blue_Pen 于 2018-9-21 11:03 编辑

【IDSkinSwitchButton】开关按钮

很多人一看到这个开关按钮可能都会想到,用CheckBox,设置两张图片不就行了,没错,的确用CheckBox可以实现开关按钮。
但是今天我们在这里讲的是通过DSkin界面库拓展实现Android和IPhone手机上的SwichButton。我们先看一下微信中switchButton的效果

如下图:

【DSkin教程系列】IDSkinSwitchButton开关按钮

【DSkin教程系列】IDSkinSwitchButton开关按钮

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

接下来, 我们就一步步实现这个效果控件。
一、定义按钮的开和关枚举
[C#] 纯文本查看 复制代码
[/align]
[align=left]/// <summary>
    /// 滑块状态枚举
    /// </summary>
    public enum StrockState
    {
        Open = 0x01,
        Close = 0x02
    }[/align][align=left]
二构造函数初始化控件样式
[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#] 纯文本查看 复制代码
 [/align][align=left]#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();
            }
        }[/align][align=left]        #endregion

四、设置属性改变时刷新方法
用于刷新圆角、按钮颜色等属性
[C#] 纯文本查看 复制代码
[/align]
[align=left]#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教程系列】IDSkinSwitchButton开关按钮

【DSkin教程系列】IDSkinSwitchButton开关按钮



购买DSkin界面授权请联系:
乔克斯:
小红帽:




回复 论坛版权

使用道具 举报

214679 发表于 2018-9-29 08:54:55 | 显示全部楼层
慢慢學習, 謝謝樓主!
您需要登录后才可以回帖 登录 | 加入CSkin论坛

本版积分规则

QQ|申请友链|小黑屋|手机版|Archiver|CSkin ( 粤ICP备13070794号

Powered by Discuz! X3.2  © 2001-2013 Comsenz Inc.  Designed by ARTERY.cn
GMT+8, 2018-12-17 23:17, Processed in 0.753801 second(s), 33 queries , Gzip On.

快速回复 返回顶部 返回列表