Question

I’ve been trying to implement a custom control much like the standard Winform DateTimePicker control.. only that I need my control to display architectural length values in feet and inches.. like 9′-6″.. the control should work in this way..

• A single up-down spin button should be visible on the right side of the control..
• The control should have 2 subfields, one for feet and one for inches.. the fields should not be individual TextBoxes with their own borders..
• When no value has been associated with the control, it should display a ghost text string in grey color “Specify a length”..
• When the control is clicked it should display ?’-?”, if the user clicks away without entering any length, the ghost text should be displayed again..
• Only the subfields should be selectable when clicked.. and the updown spin button only changes the currently selected subfield..
• The inches subfield should increment and decrement in units of 3, and wrap around its range of 0 to 11..

I think all of the functionality exist somewhere (or can be overridden) in the standard DateTimePicker control with the exception of ghost text requirement.. so probably what I should be asking is how exactly does the DateTimePicker actually work? How can I replicate its appearance and behaviour..?

I’ve looked around on Google and stackoverflow a lot but havent come across a similar question or answer..

---

EDIT 01:

I think a combination of updownbase and maskedtextbox might be what I need to work with.. but I have no idea how.. for one.. the maskedtextbox does not select subfields when clicked.. also how to get the updownbase to work with the currently selected subfield in the maskedtextbox..

Answer 1

I’ll try to post some information which hopefully will help you get started, even though it does not directly address all of your concerns. First of all, you can get a free dotpeek decompiler, do CTRL+T, find DateTimePicker type and learn how it works. Be prepared to see a lot of winapi calls. Don’t go this route unless you are confident that you will be able to comprehend everything and re-write it to work for your needs.

A more simple way would be to create a custom control. It may not look as nice, but at least you can get it working much faster. For example, create a UserControl1, which consists of a TextBox + a Button:

Public Class UserControl1
  Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
    Dim frm As New Form2
    Dim p = frm.PointToScreen(New Point(Me.Left, Me.Bottom))
    frm.Location = New Point(Me.ParentForm.Left, Me.ParentForm.Top + 40) + p
    frm.Show()
  End Sub
End Class

Disclaimer: Doing +40 is a poor coding standard, but that’s the best I could figure after struggling with conversion of coordinates to screen/client. If you find a better way – please suggest in comments.

Anyway, at design time it looks like this:

Form2 is your popup, it will close if focus is lost, to imitate real popup behavior:

Public Class Form2
  Private Sub Form2_Deactivate(sender As Object, e As System.EventArgs) Handles Me.Deactivate
    Me.Close()
  End Sub
End Class

At design time it looks like this (FormBorderStyle = None):

Compile and drop this control onto your main form. Run your application – when you click the button, ft/in dropdown will appear underneath your control. Just as any popup would do (including that of DateTimePicker), it will disappear if you click anywhere else (Deactivate event is used to make it work like this). Here is a picture, to illustrate its behavior:

Now add validation, formatting etc.