适用于 .Net 的 iPhone 风格控件，第 2 部分：iOS 开关

hgbecker

5.00/5 (7投票s)

2014 年 7 月 23 日

CPOL

2分钟阅读

18296

744

具有动画效果的类似 iOS 的开关。

更新 29.7.2814

内容：项目 IOS，子项目 IOSrotator，子项目 ISOswitch，子项目 Test

开发系统：VisualStudio 2012
框架：.net 4.5
语言：Vb.Net

引言


白色开关	滑动白色

开启模式	开启模式

关闭模式	关闭模式

你喜欢这些 iOS（iPhone/iPad）控件吗？如果是，我采用了基本理念，并为 .Net 中的 Winform 开发了一些类似的控件。

这是第二个控件，其他控件是

IOSrotator，一个带有动画效果的选择列表 - 文章 *适用于 .Net 的 iPhone 风格控件，第 1 部分*。
https://codeproject.org.cn/Articles/799593/iPhone-like-controls-for-Net-Part-Rotator

特点

A) 用户

点击控件以切换开关的开启/关闭状态。观看动画开关切换状态。
注意控件周围的边框，以查看控件是否获得焦点。

B) 开发人员

选择控件类型，可能是开关或滑动。
选择所需的皮肤（见上图）
选择点击后是否发出提示音。
选择当前状态，开启或关闭。
自定义事件 isOn_changed 以响应点击。

使用代码

安装

将控件 DLL 添加到 VisualStudio 工具箱。它由其图标表示。

将控件从工具箱拖到窗体上。
设置项目（图像和/或字符串）- Form_load 事件。
通过代码或在属性网格中设置属性 - Form_load 事件。
在父窗体中创建 Sub SelectorClicked(..) 事件。

所有代码都自解释且注释良好。

代码的头部部分

Imports System.Threading
Imports System.ComponentModel

<ToolboxBitmap(GetType(IOSswitch))> Public Class IOSswitch

#Region "Variables"
    Public Event isOn_changed(ByVal isOn As Boolean)

    Private _On As Boolean = False
    Private _Beep As Boolean = False
    Public Enum enuSkin As Integer
        white
        red
    End Enum
    Private _Skin As enuSkin = enuSkin.white

    Public Enum enuControlType As Integer
        switch
        wipe
    End Enum
    Private _ControlType As Integer = enuControlType.switch

    Private intBorderThickness As Integer = 1
    Private colBorderColor As Color = Color.Transparent
    Private blState As Boolean = False
#End Region

自定义属性

#Region "Custom properties"

    <Category("custom Properties"), DisplayName("Control Type"), _
    Browsable(True), Description("switch or wipe")> _
    Public Property ControlType As enuControlType
        Get
            Return _ControlType
        End Get
        Set(value As enuControlType)
            _ControlType = value
            If value = enuControlType.switch Then
                Me.Width = 64 : Me.Height = 26
            ElseIf value = enuControlType.wipe Then
                Me.Width = 32 : Me.Height = 32
            End If
            ' ## redraw
            Invalidate()
        End Set
    End Property

    <Category("custom Properties"), DisplayName("Skin"), _
    Browsable(True), Description("Transparent or white Skin")> _
    Public Property Skin As enuSkin
        Get
            Return _Skin
        End Get
        Set(value As enuSkin)
            _Skin = value
            If ControlType = enuControlType.switch Then
                If value = enuSkin.white Then
                    Me.BackgroundImage = My.Resources.switch_grey1
                ElseIf value = enuSkin.red Then
                    Me.BackgroundImage = My.Resources.switch_red1
                End If
            ElseIf ControlType = enuControlType.wipe Then
                If value = enuSkin.red Then
                    Me.BackgroundImage = My.Resources.wipe_red
                ElseIf value = enuSkin.white Then
                    Me.BackgroundImage = My.Resources.wipe_white
                End If
            End If
            ' ## redraw
            Invalidate()
        End Set
    End Property

    <Category("custom Properties"), DisplayName("Beep On/Off"), _
    Browsable(True), Description("Turn Beep Sound on/off")> _
    Public Property BeepOn As Boolean
        Get
            Return _Beep
        End Get
        Set(value As Boolean)
            _Beep = value
        End Set
    End Property

    <Category("custom Properties"), DisplayName("is On"), _
   Browsable(True), Description("Status On=True/Off=False")> _
    Public Property isOn As Boolean
        Get
            Return _On
        End Get
        Set(value As Boolean)
            _On = value
            If ControlType = enuControlType.wipe Then
                ' ## do wipe animation
                If value = True Then ' ## is always green
                    Me.BackgroundImage = My.Resources.wipe_green
                Else
                    If Skin = enuSkin.white Then
                        Me.BackgroundImage = My.Resources.wipe_white
                    ElseIf Skin = enuSkin.red Then
                        Me.BackgroundImage = My.Resources.wipe_red
                    End If
                End If
            ElseIf ControlType = enuControlType.switch Then
                ' ## do switch animation
                If value Then
                    If Skin = enuSkin.white Then
                        Me.BackgroundImage = My.Resources.switch_grey1a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_grey2
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_grey2a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_green3
                    ElseIf Skin = enuSkin.red Then
                        Me.BackgroundImage = My.Resources.switch_red1a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_red2
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_red2a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_green3
                    End If
                Else
                    If Skin = enuSkin.white Then
                        Me.BackgroundImage = My.Resources.switch_grey2a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_grey2
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_grey1a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_grey1
                    ElseIf Skin = enuSkin.red Then
                        Me.BackgroundImage = My.Resources.switch_red2a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_red2
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_red1a
                        Threading.Thread.Sleep(70) ' wait 250ms
                        Me.BackgroundImage = My.Resources.switch_red1
                    End If
                End If
            End If
            ' ## redraw
            Invalidate()
        End Set
    End Property

    <Category("custom Properties"), DisplayName("Version"), _
    Browsable(True), Description("Control Version Info")> _
    Public ReadOnly Property Version As Object
        Get
            Return My.Application.Info.Version
        End Get
    End Property

#End Region

点击事件，用于启动动画并触发自定义事件。

#Region "Control events"

    ' ## change state and report state
    Private Sub IOSswitch_Click(sender As Object, e As EventArgs) Handles Me.Click
        ' ## set on or off
        blState = Not blState
        isOn = blState
        ' ## sound
        If BeepOn Then Beep()
        ' ## raise event
        RaiseEvent isOn_changed(blState)
    End Sub

    ' ## show hand cursor   
    Private Sub IOSswitch_MouseHover(sender As Object, e As EventArgs) Handles Me.MouseHover
        Me.Cursor = Cursors.Hand
    End Sub

    '## reset cursor
    Private Sub IOSswitch_MouseLeave(sender As Object, e As EventArgs) Handles Me.MouseLeave
        Me.Cursor = Cursors.Default
    End Sub
#End Region

关注点

它只是一个不错的控件，最重要的是使用 Threading.Thread.sleep(??ms) 等待一小段时间以显示动画步骤。此命令取代了旧的 Visual Basic Wait 命令。

历史

更新日期：2014 年 7 月 29 日

添加了更好的图像。
修复了一些错误。
将开关/滑动控件类型合并为一个控件，具有两种类型。
更新/修复测试项目。