CONTENT
 PRODUCTS
 ARTICLES
 DOWNLOAD
 SOURCE CODE
 BOOK
 ABOUT
 HOME

MVP

ADS




Picking Date and Time in .NET CF
Let's have a look at a how data entry can be made more efficient with a state-of-the-art DateTimePicker custom control for the Pocket PC .NET developer. The control includes most of the features of the native Pocket PC DateTimePicker and even support events triggered by the control.

If you are building enterprise applications for Pocket PC, you soon realize that you need your users to enter dates (and time). Most enterprise scenarios involve selecting dates and time for certain events. It could be a service engineer selecting the day he visits the customer, or the time she spent on repairing a machine. Due to the stylus-based input on a Pocket PC, entering dates (and time) manually using the Soft Keyboard or Letter Recognizer takes a long time and can easily result in wrong entries. Most mobile applications require the data entry to be fast and accurate, and therefore something more efficient is needed. Entering dates (and time) should be just a few taps to be efficient.

Go get the DateTimePicker Control at IntelliProg. A fully functional trial version is available for download, so go and try it out!
DateTimePicker Control
DateTimePicker Control

To be efficient when building these Pocket PC applications, you would probably use SDP (Smart Device Programmability) and .NET CF (Compact Framework) included in Visual Studio .NET 2003.

A DateTimePicker Control
One efficient method to enter dates (and time) is provided by the DateTimePicker Control from IntelliProg Inc. The control is developed by Tim Wilson, who has been working on the control for some time. Over several iterations, more and more features have been added and the control is now something to be really proud of. Thanks to Alex Yakhnin, the creator of MessageCE, the issue with trapping native events (windows messages) was solved.

Actually, this is not a custom control written from scratch, but a wrapper for the DateTimePicker control already available in the Windows CE operating system. That doesn't make it less interesting. On the contrary, with a footprint of about 36 KB it's the most efficient way of utilizing the resources already available.

The .NET CF control includes most of the features available in the native control and it even includes support for a number of events generated by the control. Events are important to create dynamic applications and as you will see the implementation is made in a way a .NET CF developer is used to.

DateTimePicker Sample
Included with the control is a sample application that shows most of its features. The application consists of one form:

DateTimePicker Control sample
DateTimePicker Control sample

In the top area of the screen the DateTimePicker control is located and each of the changes that are made in the different tabs on the lower part of the screen is instantly reflected in the control. On the first tab (Display) there are some basic display options available. You can change the format of the contents of the control. The options are "Short", "Long", "Time", or "Custom". The first three options take the default format as selected in the Regional Settings and the last option allows you to enter a custom format. For a description of how to construct a custom format date (and time) string, see the Windows CE API documentation.

In the same tab you can also choose how the drop-down date picker should be aligned (left or right) and whether the control should be enabled. There is also an option to replace drop-down functionality with two arrows for changing part of the date (or time). Finally, the first tab show the ability to include a checkbox in the control and if that checkbox should be selected or not. This can be useful in your application if the user needs to specify if a certain date is valid or not (is the goods delivered, and if yes, when).

On the second tab (Calendar), you can choose to customize the colors of the control. The author of the sample has supplied a number of predefined color schemas that might appeal to you. If not, you are free to create your own combination of colors. On the third and final tab (Events), you can trace the events that are fired when you manipulate the control. The most important event is probably the ValueChanged event that is triggered each time the value in the control has changed (a new selection of date/time is made). This can be very useful in a real-world application where you need other controls in a form to be updated when the date (or time) is changed.

The sample even includes sample code for creating a tap-and-hold drop-down menu for the control. If you tap-and-hold on the control, you will get a menu allowing you to change the alignment of the control's drop-down date picker and also to show a checkbox in the control.

Let's see how to use the DateTimePicker control by having a closer look at the sample code.

Code Walkthrough
As the control includes a designer, all you need to do to use the DateTimePicker control is to set a reference to it and use the toolbox to draw it on your form. The designer will generate the necessary code for you. The declaration of the control that the designer adds looks like this:
  private Intelliprog.Windows.Forms.DateTimePicker dateTimePicker1;
And to simplify the use of the control, you could add the namespace with the following line of code at the beginning of the form:
  using Intelliprog.Windows.Forms;
The control is created by:
  this.dateTimePicker1 = new Intelliprog.Windows.Forms.DateTimePicker();
And in the sample, the designer has created the following initialization code:
  this.dateTimePicker1.Location = new System.Drawing.Point(10, 15);
  this.dateTimePicker1.Size = new System.Drawing.Size(220, 20);
  this.dateTimePicker1.ContextMenu = this.cmnuDateTimePicker;
  this.dateTimePicker1.DropDown += new
    System.EventHandler(this.dateTimePicker1_DropDown);
  this.dateTimePicker1.EnabledChanged += new
    System.EventHandler(this.dateTimePicker1_EnabledChanged);
  this.dateTimePicker1.CloseUp += new
    System.EventHandler(this.dateTimePicker1_CloseUp);
  this.dateTimePicker1.ValueChanged += new
    System.EventHandler(this.dateTimePicker1_ValueChanged);
  this.dateTimePicker1.FormatChanged += new
    System.EventHandler(this.dateTimePicker1_FormatChanged);
For the .NET CF developer, there's really nothing exceptional about this. It looks just like it should. After the location and size is set, the context menu is attached followed by the declaration of event procedures. In addition to the handled events above, the control also support basic events for most controls (GotFocus, LostFocus, ParentChanged, and Resize). Note that the control support data binding which can come in very handy in an enterprise application.

Now, let's see how the control is manipulated in code, and we start by looking at how to set the default format property:
  dateTimePicker1.Format = DateTimePickerFormat.Short;
Couldn't be much simpler, and as you can see, the DateTimePickerFormat enum include the available formats. When the Format attribute is set to DateTimePickerFormat.Custom, the custom format string is set using the CustomFormat attribute:
  dateTimePicker1.Format = DateTimePickerFormat.Custom;
  dateTimePicker1.CustomFormat = txtCustomFormat.Text;
When setting the alignment, the code is as simple:
  dateTimePicker1.DropDownAlign = LeftRightAlignment.Left;
Again there is a predefined enum for the available options. The code to enable a checkbox and check the checkbox is:

  dateTimePicker1.ShowCheckBox = true;
  dateTimePicker1.Checked = true;
The logic is the same for the other attributes as well. Nothing funny going on, it just does what you expect. The same goes for the events, and as an example here is the code for the ValueChanged event:
  private void dateTimePicker1_ValueChanged(object sender,
    System.EventArgs e)
  {
    chkChecked.Checked = dateTimePicker1.Checked;
    AddEventString("ValueChanged");
  }
The "Checked" checkbox in the first tab is updated from the DateTimePicker control and the event log is updated in the last tab (Events).

For a complete example, see the source code sample provided with the control.

Conclusion
When creating mobile application, the efficiency in data entry can be the difference between success and failure. Most mobile scenarios require data entry to be very fast and accurate and this DateTimePicker control is an excellent way of entering date and time values. For a .NET CF developer, it works just the way you expect it to.

Any comments?


©2001-2009 Christian Forsberg & Andreas Sjöström