Choose Time Intervals with the new RadTimeSpanPicker for WPF
We’ve heard your demands for a time span picker and we’ve answered them. No more using two date time pickers to setup your time intervals. We are happy to introduce the brand new RadTimeSpanPicker.
Default Components
We provide five default time span part components so you can easily set up the time intervals you wish to pick: DayTimeSpanComponent, HourTimeSpanComponent, MinuteTimeSpanComponent, SecondTimeSpanComponent and MillisecondTimeSpanComponent.
Each default component has three properties that determine the values available for picking: Minimum, Maximum and Step. When these properties are set the component’s ItemsSource is populated with decimal values that start from the Minimum value and end with the Maximum value, each time incremented with the Step value.
For example, if we wish to be able to pick intervals of time by day, but no more than 20 days, we should just add a DayTimeSpanComponent to our RadTimeSpanPicker and set its Maximum property:
<telerik:RadTimeSpanPicker> <telerik:RadTimeSpanPicker.TimeSpanComponents> <telerik:DayTimeSpanComponent Maximum="20"/> </telerik:RadTimeSpanPicker.TimeSpanComponents></telerik:RadTimeSpanPicker>
Below you can find a sample definition of a RadTimeSpanPicker:
<telerik:RadTimeSpanPicker GenerateDefaultComponents="true" />When we set the GenerateDefaultComponents = true we set up our RadTimeSpanPicker to include three components: one HourTimeSpanComponent, one MinuteTimeSpanComponent and one SecondTimeSpanComponent with their default values for Minimum, Maximum and Step.
The five default components make the setup of a regular RadTimeSpanPicker very easy and fast.
Custom StepTimeSpanComponent
However, there might be more custom scenarios that require custom time span components. We’ve provided a way to handle that too.
For example, let’s say we want to be able to pick week intervals. To achieve this we would need to create a custom StepTimeSpanComponent and override its GetTicksForItem() method that returns a TimeSpan as ticks value corresponding to the passed item from the ItemsSource:
public class WeekTimeSpanComponent : StepTimeSpanComponentBase{ protected override Freezable CreateInstanceCore() { return new WeekTimeSpanComponent(); } public override long GetTicksFromItem(object item) { if (item != null) { var ticksForOneUnit = 7; decimal selectedItemDecimal; if (decimal.TryParse(item.ToString(), out selectedItemDecimal)) { return TimeSpan.FromDays((double)(ticksForOneUnit * selectedItemDecimal)).Ticks; } } return 0; }}Then just add it as component for our RadTimeSpanPicker:
<telerik:RadTimeSpanPicker> <telerik:RadTimeSpanPicker.TimeSpanComponents> <local:WeekTimeSpanComponent Header="Weeks" Minimum="1" Maximum="4" Step="1.5"/> </telerik:RadTimeSpanPicker.TimeSpanComponents></telerik:RadTimeSpanPicker>
The default components as well as the custom WeekTimeSpanComponent rely on their Minimum, Maximum and Step properties to generate their ItemsSource.
Custom TimeSpanComponentBase
However, there might be scenarios when we would like to set the ItemsSource of our custom component ourselves.
For example, if we wish to create a composite component that accepts TimeSpan values that can be any size of time interval: 1 hour, 5 days, 1 week, etc. We can achieve that by creating a custom TimeSpanComponentBase:
public enum TimePart{ Hours, Days, Weeks}public class MyDataObject{ public double Value { get; set; } public TimePart TimePart { get; set; } public override string ToString() { return this.Value + " " + this.TimePart.ToString(); }}public class CompositeTimeSpanComponent : TimeSpanComponentBase{ public override long GetTicksFromItem(object item) { var dobj = (MyDataObject)item; if (dobj != null) { switch (dobj.TimePart) { case TimePart.Weeks: var ticksForOneUnit = 7; return TimeSpan.FromDays(ticksForOneUnit * dobj.Value).Ticks; case TimePart.Days: return TimeSpan.FromDays(dobj.Value).Ticks; case TimePart.Hours: default: return TimeSpan.FromHours(dobj.Value).Ticks; } } return 0; } protected override System.Windows.Freezable CreateInstanceCore() { return new CompositeTimeSpanComponent(); }} public List<MyDataObject> CompositeItemsSource{ get { return new List<MyDataObject>() { new MyDataObject(){Value = 0.5, TimePart = TimePart.Weeks}, new MyDataObject(){Value = 1, TimePart = TimePart.Weeks}, new MyDataObject(){Value = 1.5, TimePart = TimePart.Weeks}, new MyDataObject(){Value = 2, TimePart = TimePart.Weeks}, new MyDataObject(){Value = 1, TimePart = TimePart.Days}, new MyDataObject(){Value = 5, TimePart = TimePart.Days}, new MyDataObject(){Value = 7, TimePart = TimePart.Days}, new MyDataObject(){Value = 1, TimePart = TimePart.Hours}, new MyDataObject(){Value = 8, TimePart = TimePart.Hours}, new MyDataObject(){Value = 12, TimePart = TimePart.Hours} }; }}Then just add it as component for our RadTimeSpanPicker:
<telerik:RadTimeSpanPicker > <telerik:RadTimeSpanPicker.TimeSpanComponents> <local:CompositeTimeSpanComponent ItemsSource="{Binding CompositeItemsSource}" Header="Choose interval"/> </telerik:RadTimeSpanPicker.TimeSpanComponents></telerik:RadTimeSpanPicker>
For more details about RadTimeSpanPicker you can visit our online documentation and take a look at our demos.
Go ahead and try it out, create your custom components and let us know what you think about it.
Polya Pelova
Software Developer, Telerik XAML Team
Related Posts
Comments
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required