Tuesday, September 4, 2012

WPF TimePicker control

Based from these sources:
 a. (http://jobijoy.blogspot.com.au/2007/10/time-picker-user-control.html)
 b. Dipitimaya Patra's datepicker in Datagrid

I came up with a modified custom timepicker control embedded in WPF Datagrid with databinding features. I encountered bugs on migrating the present time picker custom control throughout development in .Visual Studio 2010 and I manage to fix them myself. The errors are specifically found on the keydown events and time updates (increment/decrement of values).

Here are the things that I did to make this work:

1. I added a dependency property to the user control
Code:
  public DateTime TimeValue  
      {  
        get { return (DateTime)GetValue(TimeProperty); }  
        set { SetValue(TimeProperty, value); }  
      }  
      public static readonly DependencyProperty TimeProperty =  
        DependencyProperty.Register("TimeValue", typeof(DateTime), typeof(TimeControlBinding),  
        new UIPropertyMetadata(DateTime.Now, new PropertyChangedCallback(OnTimeChangedTimeVal)));  
      private static void OnTimeChangedTimeVal(DependencyObject obj, DependencyPropertyChangedEventArgs e)  
      {  
        TimeControlBinding control = obj as CustomDatePickerTimeControlBinding;  
        control.Value = new TimeSpan(control.TimeValue.Hour, control.TimeValue.Minute, control.TimeValue.Second);  
      } 

2. Added a datagrid template column for the time field.
  <DataGridTemplateColumn Header="Hired Time" Width="100">   
       <DataGridTemplateColumn.CellTemplate>   
        <DataTemplate>   
         <TextBlock Text="{Binding HiredTime, StringFormat=hh:mm:ss}"/>   
        </DataTemplate>   
       </DataGridTemplateColumn.CellTemplate>   
       <DataGridTemplateColumn.CellEditingTemplate>   
        <DataTemplate>   
         <local:TimeControlBinding TimeValue="{Binding Path=HiredTime, Mode=TwoWay}" />   
        </DataTemplate>   
       </DataGridTemplateColumn.CellEditingTemplate>   
      </DataGridTemplateColumn>   
Here's how the control works:
a. on form load

b. on cell editing (used keydown or keyup to modify the values)
c. on cell leave (after modifying the time values), binding occurs.

Cheers!

Thanks to the original sources for the inputs of this control.. :)

0 comments:

Post a Comment