iPhone like controls for .Net, Part 2: IOS switch
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:
- 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 
.
- Drag the control from the toolbox onto the Form.
- Set the items (images and/or strings) - Form_load event.
- Set the properties by code or in the property grid - Form_load event.
- 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.