Extended WPF Toolkit DateTimePicker Drop-Down Interval

Question

I have installed the Extended WPF Toolkit and I am trying to change the interval in the DateTimePicker time picker (so it is half an hour instead of an hour). I've tried using the TimeInterval property as shown here, but no such property exists. What am I doing wrong?

xmlns:wpfTool="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"

<wpfTool:DateTimePicker TimeInterval="00:30:00" Name="dateTimePicker1" HorizontalContentAlignment = "Center" VerticalContentAlignment="Center"  HorizontalAlignment="Center" Height="50" Width="250" VerticalAlignment="Center" Margin="20,60,0,0"/>

Answer 1

DateTimePicker and TimePicker are different controls that do not expose the same properties.

• DateTimePicker properties documentation
• TimePicker properties documentation

The DateTimePicker does not have a property for customizing the time interval. Internally it contains a TimePicker in its control template, but it does not actually assign or expose its TimeInterval property, as you can see from the default style on GitHub.

<local:TimePicker x:Name="PART_TimeUpDown"
                  Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                  Foreground="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"
                  Format="{TemplateBinding TimeFormat}"
                  FormatString="{TemplateBinding TimeFormatString}"
                  Kind="{Binding Kind, RelativeSource={RelativeSource TemplatedParent}}"
                  Value="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"
                  Minimum="{Binding Minimum, RelativeSource={RelativeSource TemplatedParent}}"
                  Maximum="{Binding Maximum, RelativeSource={RelativeSource TemplatedParent}}"
                  ClipValueToMinMax="{Binding ClipValueToMinMax, RelativeSource={RelativeSource TemplatedParent}}"
                  IsUndoEnabled="{Binding IsUndoEnabled, RelativeSource={RelativeSource TemplatedParent}}"
                  AllowSpin="{TemplateBinding TimePickerAllowSpin}"
                  Step="{TemplateBinding Step}"
                  ShowButtonSpinner="{TemplateBinding TimePickerShowButtonSpinner}"
                  Watermark="{TemplateBinding TimeWatermark}"
                  WatermarkTemplate="{TemplateBinding TimeWatermarkTemplate}"
                  Visibility="{TemplateBinding TimePickerVisibility}" />

What you could do is copy and change this default style and add a value for the TimeInterval property. However, there are lots of dependencies to resources in this style, so the easiest way is to copy the whole resource dictionary and adapt it, e.g.:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:themes1="clr-namespace:Xceed.Wpf.Toolkit.Themes;assembly=Xceed.Wpf.Toolkit"
                    xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit">

   <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="pack://application:,,,/Xceed.Wpf.Toolkit;component/Themes/Aero2/Common.xaml" />
      <ResourceDictionary Source="pack://application:,,,/Xceed.Wpf.Toolkit;component/Themes/Aero2/Glyphs.xaml" />
   </ResourceDictionary.MergedDictionaries>

   <xctk:InverseBoolConverter x:Key="InverseBoolConverter" />
   <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
   <xctk:BorderThicknessConverter x:Key="BorderThicknessConverter" />

   <DataTemplate x:Key="DefaultWatermarkTemplate">
      <ContentControl Margin="0,0,3,0"
                      Content="{Binding}"
                      Focusable="False"
                      Foreground="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
   </DataTemplate>

   <Style x:Key="DateTimePickerToggleButtonStyle" TargetType="ToggleButton">
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
               <Grid SnapsToDevicePixels="True">
                  <xctk:ButtonChrome x:Name="ToggleButtonChrome"
                                     CornerRadius="0"
                                     RenderChecked="{Binding IsOpen, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:DateTimePicker}}"
                                     RenderEnabled="{Binding IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:DateTimePicker}}"
                                     RenderMouseOver="{TemplateBinding IsMouseOver}"
                                     RenderPressed="{TemplateBinding IsPressed}">

                     <Grid>
                        <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="*" />
                           <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <ContentPresenter HorizontalAlignment="Stretch"
                                          VerticalAlignment="Stretch"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

                        <Grid x:Name="arrowGlyph"
                              Grid.Column="1"
                              Margin="5"
                              IsHitTestVisible="False">
                           <Path x:Name="Arrow"
                                 Width="9"
                                 Height="5"
                                 Margin="0,1,0,0"
                                 Data="{StaticResource DownArrowGeometry}"
                                 Fill="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                        </Grid>
                     </Grid>
                  </xctk:ButtonChrome>
               </Grid>
               <ControlTemplate.Triggers>
                  <Trigger Property="IsEnabled" Value="False">
                     <Setter TargetName="Arrow" Property="Fill" Value="#AFAFAF" />
                  </Trigger>
               </ControlTemplate.Triggers>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>


   <!--  ===============================================================================  -->
   <!--  DateTimePicker  -->
   <!--  ===============================================================================  -->

   <Style TargetType="{x:Type xctk:DateTimePicker}">
      <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
      <Setter Property="BorderBrush" Value="{DynamicResource {x:Static themes1:ResourceKeys.ControlNormalBorderKey}}" />
      <Setter Property="BorderThickness" Value="1,1,0,1" />
      <Setter Property="IsTabStop" Value="False" />
      <Setter Property="HorizontalContentAlignment" Value="Right" />
      <Setter Property="TextAlignment" Value="Right" />
      <Setter Property="TimeWatermarkTemplate" Value="{StaticResource DefaultWatermarkTemplate}" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="WatermarkTemplate" Value="{StaticResource DefaultWatermarkTemplate}" />
      <Setter Property="CalendarWidth" Value="178" />
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="{x:Type xctk:DateTimePicker}">
               <Border>
                  <Grid>
                     <Grid>
                        <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="*" />
                           <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <xctk:ButtonSpinner x:Name="PART_Spinner"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Stretch"
                                            AllowSpin="{TemplateBinding AllowSpin}"
                                            Background="{TemplateBinding Background}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
                                            IsTabStop="False"
                                            ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
                           <xctk:WatermarkTextBox x:Name="PART_TextBox"
                                                  MinWidth="20"
                                                  Padding="{TemplateBinding Padding}"
                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  AcceptsReturn="False"
                                                  Background="Transparent"
                                                  BorderThickness="0"
                                                  FontFamily="{TemplateBinding FontFamily}"
                                                  FontSize="{TemplateBinding FontSize}"
                                                  FontStretch="{TemplateBinding FontStretch}"
                                                  FontStyle="{TemplateBinding FontStyle}"
                                                  FontWeight="{TemplateBinding FontWeight}"
                                                  Foreground="{TemplateBinding Foreground}"
                                                  IsTabStop="True"
                                                  IsUndoEnabled="{Binding IsUndoEnabled, RelativeSource={RelativeSource TemplatedParent}}"
                                                  TabIndex="{TemplateBinding TabIndex}"
                                                  Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}"
                                                  TextAlignment="{TemplateBinding TextAlignment}"
                                                  TextWrapping="NoWrap"
                                                  Watermark="{TemplateBinding Watermark}"
                                                  WatermarkTemplate="{TemplateBinding WatermarkTemplate}" />
                        </xctk:ButtonSpinner>
                        <ToggleButton x:Name="_calendarToggleButton"
                                      Grid.Column="1"
                                      Background="White"
                                      Focusable="False"
                                      IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                      IsEnabled="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}"
                                      IsHitTestVisible="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}"
                                      Style="{StaticResource DateTimePickerToggleButtonStyle}"
                                      Visibility="{TemplateBinding ShowDropDownButton,
                                                                   Converter={StaticResource BooleanToVisibilityConverter}}" />
                     </Grid>
                     <Popup x:Name="PART_Popup"
                            IsOpen="{Binding IsChecked, ElementName=_calendarToggleButton}"
                            StaysOpen="False"
                            ToolTip="{x:Static sys:String.Empty}">
                        <Popup.Resources>
                           <Style TargetType="ToolTip">
                              <Style.Triggers>
                                 <Trigger Property="Content" Value="{x:Static sys:String.Empty}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                 </Trigger>
                              </Style.Triggers>
                           </Style>
                        </Popup.Resources>
                        <Border Padding="3"
                                Background="{StaticResource PanelBackgroundBrush}"
                                BorderBrush="{StaticResource PopupDarkBorderBrush}"
                                BorderThickness="1">
                           <StackPanel>
                              <Calendar x:Name="PART_Calendar"
                                        BorderThickness="0"
                                        DisplayMode="{Binding CalendarDisplayMode, RelativeSource={RelativeSource TemplatedParent}}">
                                 <Calendar.Template>
                                    <ControlTemplate TargetType="{x:Type Calendar}">
                                       <Viewbox Width="{Binding CalendarWidth, RelativeSource={RelativeSource AncestorType={x:Type xctk:DateTimePicker}}}">
                                          <StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
                                             <CalendarItem x:Name="PART_CalendarItem"
                                                           Background="{TemplateBinding Background}"
                                                           BorderBrush="{TemplateBinding BorderBrush}"
                                                           BorderThickness="{TemplateBinding BorderThickness}"
                                                           Style="{TemplateBinding CalendarItemStyle}" />
                                          </StackPanel>
                                       </Viewbox>
                                    </ControlTemplate>
                                 </Calendar.Template>
                              </Calendar>
                              <xctk:TimePicker x:Name="PART_TimeUpDown"
                                               AllowSpin="{TemplateBinding TimePickerAllowSpin}"
                                               Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                                               ClipValueToMinMax="{Binding ClipValueToMinMax, RelativeSource={RelativeSource TemplatedParent}}"
                                               Foreground="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"
                                               Format="{TemplateBinding TimeFormat}"
                                               FormatString="{TemplateBinding TimeFormatString}"
                                               IsUndoEnabled="{Binding IsUndoEnabled, RelativeSource={RelativeSource TemplatedParent}}"
                                               Kind="{Binding Kind, RelativeSource={RelativeSource TemplatedParent}}"
                                               Maximum="{Binding Maximum, RelativeSource={RelativeSource TemplatedParent}}"
                                               Minimum="{Binding Minimum, RelativeSource={RelativeSource TemplatedParent}}"
                                               ShowButtonSpinner="{TemplateBinding TimePickerShowButtonSpinner}"
                                               Step="{TemplateBinding Step}"
                                               TimeInterval="00:30:00"
                                               Visibility="{TemplateBinding TimePickerVisibility}"
                                               Watermark="{TemplateBinding TimeWatermark}"
                                               WatermarkTemplate="{TemplateBinding TimeWatermarkTemplate}"
                                               Value="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" />
                           </StackPanel>
                        </Border>
                     </Popup>
                  </Grid>
               </Border>
               <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="True">
                     <Setter Property="BorderBrush" Value="{DynamicResource {x:Static themes1:ResourceKeys.ControlMouseOverBorderKey}}" />
                  </Trigger>
                  <MultiDataTrigger>
                     <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="False" />
                        <Condition Binding="{Binding AllowTextInput, RelativeSource={RelativeSource Self}}" Value="False" />
                     </MultiDataTrigger.Conditions>
                     <Setter TargetName="PART_TextBox" Property="IsReadOnly" Value="True" />
                  </MultiDataTrigger>
                  <DataTrigger Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="True">
                     <Setter TargetName="PART_TextBox" Property="IsReadOnly" Value="True" />
                  </DataTrigger>
                  <Trigger Property="IsKeyboardFocusWithin" Value="True">
                     <Setter Property="BorderBrush" Value="{DynamicResource {x:Static themes1:ResourceKeys.ControlSelectedBorderKey}}" />
                  </Trigger>
                  <Trigger Property="IsEnabled" Value="False">
                     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                  </Trigger>
                  <Trigger Property="IsFocused" Value="True">
                     <Setter TargetName="PART_TextBox" Property="FocusManager.FocusedElement" Value="{Binding ElementName=PART_TextBox}" />
                  </Trigger>
                  <MultiTrigger>
                     <MultiTrigger.Conditions>
                        <Condition Property="ShowButtonSpinner" Value="False" />
                        <Condition Property="ShowDropDownButton" Value="False" />
                     </MultiTrigger.Conditions>
                     <Setter TargetName="PART_Spinner" Property="BorderThickness" Value="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BorderThicknessConverter}}" />
                  </MultiTrigger>
               </ControlTemplate.Triggers>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>

</ResourceDictionary>

Include this resource dictionary in your application resources or another resources section, e.g.:

<ResourceDictionary Source="DateTimePickerResources.xaml"/>

As you can see, this brings in lots of code for a simple change, so please consider if this effort is is feasible for you, or if it might be better to live with this limitation of the DateTimePicker control.

Answer 2

In code you can set the interval to show in the DateTimePicker. For example

TPSalida.TimeInterval = TimeSpan.FromMinutes(30);