iPhone like controls for .Net, Part 2: IOS switch

• Download IOSrotator-noexe.zip - 1.6 MB
• Download IOSrotator.zip - 1.6 MB

UPDATE 29.7.2814

Contents: Project IOS, Sub Project IOSrotator, Sub Project ISOswitch, Sub Project Test

Development System: VisualStudio 2012
Framework: :net 4.5
Language: Vb.Net

Introduction

White switch	wipe white
Mode On	Mode On
Mode Off	Mode Off

Do you like this ios (iphone/ipad) controls? If yes I took the basic idea and developed some equal controls for the use with Winform in .Net.

This is the 2nd control the other controls are:

• IOSrotator an animated selection list - Article iPhone like controls for .Net Part 1.
  http://www.codeproject.com/Articles/799593/iPhone-like-controls-for-Net-Part-Rotator

Features:

A) User

• Click on the control to toggle the On/Off state of the switch. Watch the animated switch turning the state.
• Notice the boarder around the control to see the control has the fouse.

B) Developer

• Cioose the Control type maybe switch or wipe.
• Choose the desired skin (see pictures above)
• Choose sounding a Beep after click.
• Choose the current state On or Off.
• Custom Event isOn_changed to react on the click.

Using the code

Installing

Add the controls DLL to the VisualStudio Toolbox. It is represented by its icon .

1. Drag the control from the toolbox onto the Form.
2. Set the items (images and/or strings) - Form_load event.
3. Set the properties by code or in the property grid - Form_load event.
4. Create Sub SelectorClicked(..) event in the parent form.

All the code is self explaining and well commented.

The Head part of the code

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

The custom Properties

#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

The Click Event to start the animation and fire the custom Event.    

#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

Points of Interest

It is just a nice control and the most important is the usage of Threading.Thread.sleep(??ms) to wait a litte to show the animation step. This command substituts the old Visual Basic Wait command.

History

Update 29.7.2014

• Added better images.
• Fixed some bugs.
• Combining control type switch/wipe into 1 control witth 2 types.
• Updating/Fixing Testproject.