Search code examples
c#wpftimepickerxceed-plus-edition

Allow spinner Increment/decrement by time interval TimePicker WPF


So I have a TimePicker declared in my XAML view file:

<xctk:TimePicker Grid.Column="5" Value="{Binding TimeFrame}" TimeInterval="00:30:0" Format="Custom" FormatString="HH:mm" Margin="3 3 3 0" MinWidth="100"/>

Which is binded to my TimeFrame method in my view model class:

private DateTime _timeFrame;
public DateTime TimeFrame
{
    get { return _timeFrame; }
    set
    {
        if (value != _timeFrame)
        {
            _timeFrame = value;
            OnPropertyChanged("TimeFrame");
        }
    }
}

At the moment, setting TimeInterval to 00:30:0 only shows those intervals in the dropdown.

Is there a way to also make the up/down spinner only increment/decrement by 30 mintues as well? Is there a way to register button presses with TimePicker?


Solution

  • You should be able to accomplish this by subclassing the TimePicker and set the Step property to 30 whenever the minute part is increased or decreased:

    public class CustomTimePicker : Xceed.Wpf.Toolkit.TimePicker
    {
        protected override void OnIncrement()
        {
            SetStep();
            base.OnIncrement();
        }
    
        protected override void OnDecrement()
        {
            SetStep();
            base.OnDecrement();
        }
    
        private void SetStep()
        {
            Step = CurrentDateTimePart == Xceed.Wpf.Toolkit.DateTimePart.Minute ? 30 : 1;
        }
    }
    

    Usage:

    <local:CustomTimePicker Grid.Column="5" Value="{Binding TimeFrame}" 
                            TimeInterval="00:30:0" Format="Custom"
                            FormatString="HH:mm" 
                            Margin="3 3 3 0" MinWidth="100" />