Time Picker
While posting in the MSDN Forums of WPF, I received a lot of requests to create a TimePicker. So here it is finally, a simple yet extensible TimePicker. This control lets the user select a specific time by enter text in 3 textboxes (Hour, Minutes and Seconds). The user can also increment or decrement the time by pressing the Up and Down keys of the keyboard or even by clicking the up and down buttons that are supplied in the control. To make the user experience better when the user clicks the left or right key the focus of the textboxes changes, for example if the user is in the hours textbox and clicks the left key (if the caret index is at the end of the text) the minute text box will get focus. The Time Picker control also rounds the numbers that the user enter, for example if the user enters “88″ in the hours text box the Time Picker rounds this number to 23 (which is the highest number you can have for the hours textbox)
The Time Picker also supports ControlTemplates. There are 5 parts that you can use in your control template
->PART_Hours. This is the hours textbox you must supply this field so that the TimePicker can hook to the focus events and the text input events to change the time when text is enetered. When using this part the Time Picker will take care of adding the behaviour of focusing the next textbox when the left/right key is enetered etc..
-> PART_Minutes. This is the minutes textbox. This field is also needed for the Time Picker to change the time when text is entered. Again when using this field the time picker will hook to the events to get the behaviour mentioned above for the PART_Hours
-> PART_Seconds. This is the seconds textbox. This field is also needed for the Time Picker to change the time when text is entered. Again when using this field the time picker will hook to the events to get the behaviour mentioned above for the PART_Hours
->PART_IncreaseTime. This is a button that must be supplied to increment the time when the user click the button
->PART_Decrement. This is a button that must be supplied to decrement the time when the user click the button
Again this is a basic implementation of the TimePicker, nothing special but it is a start. I would really appreciate feedback so that I can enhance this control and maybe add some new features…
Feel free to download the code and play around with this control…
See also DatePicker
See alse DateTimePicker
Regards
25 Comments »
Leave a comment
: About :
Marlon me = new Marlon();
while(me.UseCSharp) me.Happy = true;
I am currently working at Infusion Development as a Sofware Consultant. I love C# and addicted to the WPF technology…. Here in my blog you will find posts mainly on WPF yet sometimes I blog on other .Net stuff…. I also have an OpenSource project AvalonControlsLibrary that I constantly work on….. I am also an MVP for Client App (see my profile here)
I also happen to have the most beautiful daughter, Jasmine; Thanks Jasmine for being in my life, without you my life would be a mess
Besides programming I also like… mmm… what do I like… ooups, I think I need a hobby or something…..
Anyway, I hope you like my blog, feedback is always appreciated……..
Thanks for the support
Marlon
marlongrech AT gmail DOT com
All posting is provided “AS IS” with no warranties, and confers no rights.
-
I’m a WPF Disciple
-
I am an insider …. muhhhaaaa
-
C# Disciple
More Photos -
Awards
-
Vote Me
What about a Date picker? (Time is easy…the Date picker is the one that gives me troubles implementing (properly) )
You can find a DatePicker in my blog over here
http://marlongrech.wordpress.com/2007/09/11/wpf-datepicker/
You can also look at the full List of controls that I have build here
http://marlongrech.wordpress.com/avalon-controls-library/
How about a combination of the date and time pickers?
(I’m actually going to do this now)
(Thanks!!!)
That’s a great idea… If you need some help doing it let me know.. send an email at marlongrech@gmail.com
Hi,
I saw your comments in my blog (http://wpfcontrols.blogspot.com/), if you are interested I could post your controls in my blog..
Let me know
Ta,
Rajeesh
Looks nice, but why cant I get the control to work in 2005? It just wont display?
Can you please send me an email(marlongrech@gmail.com) with the source code that you are using so that I can check what is wrong… Thanks
[...] to build a DateTimePicker. DateTimePicker is nothing really special it is a DatePicker and a TimePicker combined in one [...]
Pingback by WPF Date Time Picker « C# Disciples | February 6, 2008 |
Added support for Min and Max time
http://marlongrech.wordpress.com/2008/03/03/support-for-mindate-and-maxdate-in-datepicker-and-timepicker/
[...] I did a small update to the TimePicker control. I added another Property called CurrentlySelectedTime which can be used to get the current [...]
Pingback by An update to TimePicker control in AvalonsControlLibrary « C h a k s’ C o r n e r | March 12, 2008 |
I am not able to download TimePicker when I click on “Download Source Code” it again displays list of controls instead of download.
you can download from here
http://www.codeplex.com/AvalonControlsLib/Release/ProjectReleases.aspx?ReleaseId=10250
How can I bind a property? I’m experiencing some problems. I bind a timespan but the timespan never gets changed =\
How can I do it?
I m wondering if this control can be used for WindowsForms…
if not how to port it ??
If I place the TimePicker control inside a data template it appears to ignore initial values when either set in markup or when data bound; it always uses the current time for its initial value. It does not appear to “subscribe” to change notifications either…meaning if I have a textbox that is bound to the data source/object and change its value, the TimePicker does not update its value when the properties INotifyPropertyChanged event is fired.
hey? can you visit me at quesera.blogsome.com cause i am posting some of my problems in C#, i ask for your comments and help. .
you can download the full source code from
http://www.codeplex.com/AvalonControlsLib
There seems to be a possible bug in the time picker that involves moving the cursor to “neighbour” control. For example if you click on the hour textbox so all the text is selected, and type in 18, the hour text is changed to 18, but the cursor is placed between the 1 and 8 instead of setting focus to the minutes. I have narrowed it down to the method that acutally checks the caret index is “AdjustCarretIndexOrMoveToNeighbour”,
Please disregard my previous post as it was an accidental submit.
There might be a possible bug in the TimePicker control with the cursor being focused to the next “neighbour” textbox. For example if you click in the Hour field so it is all selected then enter the number 18, after entering this in, the cursor should jump to the minutes field but instead the cursor is place between the 1 and 8.
I have narrowed it down to the method “AdjustCarretIndexOrMoveToNeighbour” and what appears to be happening is the current.CaretIndex is always 0. In the “HoursTextChanged” method, the line ” int hourNum = ValidateAndSetHour(newText);” somehow changes the hours textbox caret index back to 0?
Thanks!
Hi. I’m new to WPF and looking at this to both learn and be try something useful.
Question: How can I make it so that the values always show double digits?
Like “09:30:00″ instead of “9:30:0″ for 9:30 am?
I’ve looked at the code but there’s so much I don’t understand yet that I just don’t see where the time value gets rendered to the textboxes.
Thanks.
I have managed to do this by applying a convertr to the control parts:
For example:
Uses this:
Public Class Format2NumberConverter
Implements IValueConverter
Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
Try
If IsNumeric(value) Then
Return String.Format(”{0:00}”, value)
Else
Return value
End If
Catch ex As Exception
MessageBox.Show(ex.Message)
End Try
Return Nothing
End Function
Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
If value.ToString().Length = 0 Then
Return 0
Else
Return CInt(value)
End If
Throw New System.NotImplementedException()
End Function
End Class
Hi
nice work, but i found sobie bug (?)
i’m binding dependency property from my class to TimePicker.SelectedTime dep. property. It works fine till i change value in TimePicker control.. this action brokes binding expression.
Hi,
I needed the Time picker to not have rounded corners so I made the CornerRadius setable. Here’s the code if in case you want to add it back in:
TimePicker.cs:
///
/// Gets or sets the Corner Radius
///
public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty) ; }
set { SetValue(CornerRadiusProperty, value);}
}
///
/// Backing store for the Corner Radius minsutes
///
public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.Register(”CornerRadius”, typeof(CornerRadius), typeof(TimePicker),
new UIPropertyMetadata( new CornerRadius(5, 5, 5, 5),
delegate(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
TimePicker timePicker = (TimePicker)sender;
//set the new Corner Radius
timePicker.CornerRadius = (CornerRadius)e.NewValue;
}));
TimePicker.xaml:
Change line 14
CornerRadius=”5″
to
CornerRadius=”{TemplateBinding BorderBrush}”
Thats it. The changes appear to work here ok with the limited testing that I’ve done.
Thanks for the great controls.
hey, i tried adding ur reference into my library, but they say its not compatible with my silverlight application..is there any way around that? i wanna use the time picker u created…:(
This is for WPF not silverlight…. Sorry