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

LEDClock - Windows Forms Composite Control

By , 4 Jun 2002
Rate this:
Please Sign up or sign in to vote.
<!-- Download Links --> <!-- Article image -->

Sample Image - LEDClock.jpg

Introduction

Visual Studio .NET provides a rich set of design-time support for a components. One of the elements which allows components to take advantage of the designer architecture is Properties Window with the functionality like Value conversion, Subproperties, Enumeration and Dropdown / Popup editors.

This article explains how to build Popup editor and link it to an appropriate property in Properties Window. For that purpose, I have made LEDControl custom control and composite LEDClock control to simulate a clock.

LEDControl custom control

LEDControl control has a public property Number which is used by OnPaint method to draw appropriate number or colon (Smile | :) , and a public method Increase to change the property Number by one. Here is one segment of code, which draws part of the "LED" digit:

Private Sub DrawNumber(ByVal g As Graphics, ByVal num As Integer) 
  Dim p As New Pen(Me.ForeColor) 
  Select Case num 
    Case   0 
     'TOP 
      g.DrawLine(p, 5, 2, Me.Width - 5, 2) 
      g.DrawLine(p, 4, 3, Me.Width - 4, 3) 
      g.DrawLine(p, 5, 4, Me.Width - 5, 4) 
     'BOTTOM 
      g.DrawLine(p, 5, Me.Height - 4, Me.Width - 5, Me.Height - 4) 
      g.DrawLine(p, 4, Me.Height - 3, Me.Width - 4, Me.Height - 3) 
      g.DrawLine(p, 5, Me.Height- 2, Me.Width - 5, Me.Height - 2) 
................

LEDClock user control

LEDClock contains eight LEDControl controls in a row. Except all properties, methods and events inherited from UserControl class, there are a few public methods Stop, Start and Reset and one property Time. You can use them to manipulate with the clock. The control uses the thread to increase the time every second.

It was necessary to override OnResize method to resize all LEDControl controls when their parent LEDClock is resized. The same stands for OnForeColorChanged method (all digits have to change a color in parent's ForeColor):

Protected Overrides Sub OnForeColorChanged(ByVal e As System.EventArgs)
   Dim c As Control
   For Each c In Me.Controls
       c.ForeColor = Me.ForeColor
   Next
End Sub

Time property and design-time LEDEditor

When you select Time property in Property window, an ellipsis button will appear:

Sample Image

If you click this button, an appropriate UI editor will be shown:

Sample Image

After that, you can set Time property entering numbers in TextBoxes. Inside the form you can provide all necessary validation for the controls used for input.

How can you achieve that? There are a few steps you have to follow. The first one is to design an appropriate editor dialog, by adding a form to the project.

Imports System.Drawing.Design
Imports System.Windows.Forms.Design

Public Class LEDEditor
   Inherits System.Windows.Forms.Form
.............

LEDEditor class has a property called Value, which is initialised in the constructor with current value of Time property.

Next thing you need is a class derived from UITypeEditor that will be called to determine how the type should be edited.

Public Class LEDTypeEditor
    Inherits UITypeEditor

    Public Overloads Overrides Function EditValue(ByVal context As _
           System.ComponentModel.ITypeDescriptorContext, _
           ByVal provider As System.IServiceProvider, ByVal value As Object) As Object

        Dim edSvc As IWindowsFormsEditorService
        Try
            edSvc = CType(provider.GetService(GetType(IWindowsFormsEditorService)), _
                          IWindowsFormsEditorService)
            Dim edForm As LEDEditor
            edForm = New LEDEditor(CStr(value))
            edSvc.ShowDialog(edForm)
            If edForm.DialogResult = DialogResult.OK Then
                edForm.Value = edForm.txtH1.Text & edForm.txtH2.Text & ":" & _
                               edForm.txtM1.Text & edForm.txtM2.Text & ":" & _
                               edForm.txtS1.Text & edForm.txtS2.Text
            End If
            Return edForm.Value
        Catch e As Exception
            MsgBox(e.ToString)
        End Try
    End Function

    Public Overloads Overrides Function GetEditStyle(ByVal context As _
           System.ComponentModel.ITypeDescriptorContext) As _
           System.Drawing.Design.UITypeEditorEditStyle
        Return UITypeEditorEditStyle.Modal
    End Function
    
End Class

Two methods need to be overridden: GetEditStyle and EditValue. GetEditStyle is called by the Properties window to determine how the value should be edited. UITypeEditorEditStyle can have three values:

1. None - which means that no UI element will be used to edit the value,

2. DropDown - which means that a drop-down list will be shown,

3. Modal - which means that a modal dialog will be shown.

After the GetEditStyle is called, the Properies window will show ellipsis button (or a down-arrow button for a drop-down list). When this button is clicked, the EditValue method will be called to create the dialog.

The final step is to indicate that a property will be edited with this particular editor using EditorAttribute:

< Editor(GetType(LEDTypeEditor), GetType(UITypeEditor)) > _
    Public Property Time() As String
...............

You can set Time property in Properties Window directly, which is String type, but you have to provide an appropriate validation for that input as well.

Private Function IsValid(ByVal s As String) As Boolean
        If s.Length <> 8 Then Return False
        If s.Substring(2, 1) <> ":" Or s.Substring(5, 1) <> ":" Then Return False
        Dim ss As String
        ss = s.Substring(0, 2)
        If IsNumeric(ss) = False Then Return False
        If CInt(ss) > 23 Then Return False
        ss = s.Substring(3, 2)
        If IsNumeric(ss) = False Then Return False
        If CInt(ss) > 59 Then Return False
        ss = s.Substring(6, 2)
        If IsNumeric(ss) = False Then Return False
        If CInt(ss) > 59 Then Return False
        Return True
    End Function

Conclusion

This was an attempt to use design-time support for .NET controls. I have only scratched the surface and there are so many elements and facilities in VS.NET that help us to build better .NET controls and components. Any comment will be welcome not only from Visual Basic programmers, but C# and others as well. We are all .NET programmers, aren't we?

Good luck and wish you lots of bright ideas in your work.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Andelko Pavelic

Australia Australia
No Biography provided

Comments and Discussions

 
GeneralDoes Not Work in Visual Studio 2008 and VWD 2008 PinmemberDutchMafia28-Feb-08 4:52 
Generalthanks Pinmembersumeet_cos19-May-06 4:04 
GeneralAnother question... Pinmemberklaus@gubbernet.com28-Jun-05 13:41 
QuestionHow to get 2 or more properties linked Pinmemberklaus@gubbernet.com28-Jun-05 7:44 
GeneralWell done!! Pinmemberklaus@gubbernet.com26-Jun-05 7:00 
GeneralThank you... PinmemberBooleanOperator22-Oct-03 13:54 
GeneralEditorAttribute Pinsussdeepakbatra7-Mar-03 14:56 
GeneralProperty Grid DropDowns Pinsusssparkesy12-Feb-03 5:31 
GeneralRe: Property Grid DropDowns Pinmemberklaus@gubbernet.com28-Jun-05 13:47 
QuestionHow do you actually USE the control? Pinmembercodemagician13-Nov-02 16:15 
Generaldigital clock PinsussMohsin Farooq11-Oct-02 8:45 
GeneralRe: digital clock Pinmemberjaba22-Oct-02 21:50 
GeneralGood one PinmemberDavid Wengier5-Jun-02 15:08 
GeneralRe: Good one PinmemberAndelko Pavelic5-Jun-02 23:25 
GeneralRe: Good one PinmemberPadgett Rowell10-Jun-02 4:30 
GeneralRe: Good one PinmemberAndelko Pavelic10-Jun-02 23:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140421.2 | Last Updated 5 Jun 2002
Article Copyright 2002 by Andelko Pavelic
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid