Click here to Skip to main content
Click here to Skip to main content

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

, 28 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Animated IOS like On/Off switch.

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:

 

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

hgbecker
Founder TechDoc G. Becker
Germany Germany
I'am developing Applications since the Comodore 64 Computer was available to the marked.
At present I'm programming in Visual Studio 2012 using C# and mostly Visual Basic.
Sorry for Language mistakes but as a German English is not my native Language. But I hope anyone is able to understand me.
 
Best Regards from Germany
Happy coding
Guenter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.141022.2 | Last Updated 28 Jul 2014
Article Copyright 2014 by hgbecker
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid