Category / Section
How to replace Analog clock with TimeSelector in DateTimeEdit
7 mins read
This article describes about how to replace Analog clock with SfTimeSelector in DateTimeEdit control. SfTimeSelector will provide friendly environment compare to analog clock to select time from DateTimeEdit. It can be achieved by customizing the template of DateTimeEdit. Find the code example which demonstrate replacing analog clock with SfTimeSelector.
DateTimeEdit Style:
<Style x:Key="DefaultDateTimeEditStyle" TargetType="{x:Type syncfusion:DateTimeEdit}">
<Setter Property="Background" Value="{StaticResource TextboxBackground}" />
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource TextboxForeground}" />
<Setter Property="FocusedBorderBrush" Value="{StaticResource TextboxFocusedBorderBrush}" />
<Setter Property="RepeatButtonBackground" Value="{StaticResource ToggleButtonBackground}" />
<Setter Property="RepeatButtonBorderBrush" Value="{StaticResource ButtonBorderBrush.Blue}" />
<Setter Property="DropDownButtonTemplate" Value="{StaticResource ToggleButtonTemplate}" />
<Setter Property="UpRepeatButtonTemplate" Value="{StaticResource RepeatButtonTemplate}" />
<Setter Property="DownRepeatButtonTemplate" Value="{StaticResource RepeatButtonTemplate}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CalendarStyle" Value="{StaticResource CalendarStyle1}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="1" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="24" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:DateTimeEdit}">
<Grid>
<Border x:Name="Border" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<ScrollViewer VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
x:Name="PART_ContentHost"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="{TemplateBinding ContentElementVisibility}" />
<ContentControl x:Name="PART_EmptyContent"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Visibility="{TemplateBinding WatermarkVisibility}" Content="{TemplateBinding NoneDateText}"
IsTabStop="False" IsHitTestVisible="False"
FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}"
Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Opacity="0.5" />
<ToggleButton x:Name="PART_DropDown" IsTabStop="False" Grid.Column="2" BorderThickness="1" Padding="1"
Template="{TemplateBinding DropDownButtonTemplate}" Style="{StaticResource ToggleButtonStyle}"
BorderBrush="{StaticResource TextBoxBorderBrush}" Width="20" HorizontalAlignment="Stretch"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsButtonPopUpEnabled,
Converter={StaticResource BooleanToVisibilityConverter}}">
<ToggleButton.IsEnabled>
<MultiBinding Converter="{StaticResource enablemultivalueConverter}">
<Binding Path="IsWatchEnabled" RelativeSource="{RelativeSource TemplatedParent}"></Binding>
<Binding Path="IsCalendarEnabled" RelativeSource="{RelativeSource TemplatedParent}"></Binding>
<Binding Path="IsEmptyDateEnabled" RelativeSource="{RelativeSource TemplatedParent}"></Binding>
<Binding Path="EnableClassicStyle" RelativeSource="{RelativeSource TemplatedParent}"></Binding>
</MultiBinding>
</ToggleButton.IsEnabled>
<ToggleButton.Content>
<Path Stretch="Uniform" Fill="{StaticResource GlyphBrushKey1}" Height="4" Width="7"
Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z "
HorizontalAlignment="Center" VerticalAlignment="Center">
</Path>
</ToggleButton.Content>
</ToggleButton>
<Grid Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<RepeatButton x:Name="PART_UpArrow" IsTabStop="False" Template="{TemplateBinding UpRepeatButtonTemplate}"
Style="{StaticResource RepeatButtonStyle}"
BorderThickness="{TemplateBinding RepeatButtonBorderThickness}"
Margin="{TemplateBinding UpRepeatButtonMargin}"
BorderBrush="{StaticResource TextBoxBorderBrush}"
Background="{TemplateBinding RepeatButtonBackground}"
IsEnabled="{TemplateBinding IsEnabledRepeatButton}"
Grid.Row="0" Grid.Column="1" Width="20" Padding="1"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsVisibleRepeatButton,
Converter={StaticResource BooleanToVisibilityConverter}}">
<RepeatButton.Content>
<Path Stretch="Uniform" Height="4" Width="7" Fill="{StaticResource GlyphBrushKey1}"
Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z "
HorizontalAlignment="Center" VerticalAlignment="Center">
</Path>
</RepeatButton.Content>
</RepeatButton>
<RepeatButton x:Name="PART_DownArrow" Template="{TemplateBinding DownRepeatButtonTemplate}" IsTabStop="False"
Style="{StaticResource RepeatButtonStyle}"
BorderThickness="{TemplateBinding RepeatButtonBorderThickness}"
Margin="{TemplateBinding DownRepeatButtonMargin}"
BorderBrush="{StaticResource TextBoxBorderBrush}"
Background="{TemplateBinding RepeatButtonBackground}"
IsEnabled="{TemplateBinding IsEnabledRepeatButton}"
Grid.Row="1" Grid.Column="1" Width="20" Padding="1"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsVisibleRepeatButton,
Converter={StaticResource BooleanToVisibilityConverter}}">
<RepeatButton.Content>
<Path Stretch="Uniform" Fill="{StaticResource GlyphBrushKey1}" Height="4" Width="7"
Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z " HorizontalAlignment="Center"
VerticalAlignment="Center">
</Path>
</RepeatButton.Content>
</RepeatButton>
</Grid>
<Popup x:Name="PART_Popup" Grid.Row="1" IsOpen="False" StaysOpen="False">
<Grid Background="Transparent">
<Grid x:Name="PART_PopupGrid" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<ToggleButton Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=AccessCalendarText}"
Style="{StaticResource ToggleButtonStyle}" Width="60" FontSize="12" Grid.Row="0" Grid.Column="0" x:Name="Button_Calender"
Margin="0,0,0,0" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsCalendarEnabled,
Converter={StaticResource BooleanToVisibilityConverter}}" />
<ToggleButton Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=AccessClockText}"
Style="{StaticResource ToggleButtonStyle}" Width="60" FontSize="12" Grid.Row="0" Grid.Column="1" x:Name="Button_Clock"
Margin="0,0,0,0" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsWatchEnabled,
Converter={StaticResource BooleanToVisibilityConverter}}" />
<ToggleButton Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=AccessEmptyDateText}"
Style="{StaticResource ToggleButtonStyle}" Width="60" FontSize="12" Grid.Row="0" Grid.Column="2"
x:Name="Button_NoDate"
Margin="0,0,0,0" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsEmptyDateEnabled,
Converter={StaticResource BooleanToVisibilityConverter}}" />
<Popup x:Name="PART_CalenderPopup" IsOpen="False" StaysOpen="False" Grid.ColumnSpan="3" Grid.Row="1">
<StackPanel Visibility="Visible">
<Syncfusion_Windows_Controls:Calendar ShortestDayNames="{TemplateBinding syncfusion:DateTimeEdit.ShortestDayNames}"
AbbreviatedMonthNames="{TemplateBinding syncfusion:DateTimeEdit.AbbreviatedMonthNames}"
Culture="{TemplateBinding syncfusion:DateTimeEdit.CultureInfo}" FormatCalendar="{TemplateBinding
syncfusion:DateTimeBase.FormatCalendar}" x:Name="Calendar" Margin="0,-3,0,0" Style="{TemplateBinding
syncfusion:DateTimeEdit.CalendarStyle}" />
<ToggleButton x:Name="Button_Today" Style="{StaticResource ToggleButtonStyle}" Content="{Binding
Source={StaticResource ResourceWrapperKey}, Path=TodayLabel}" Margin="0,-4,0,0" FontSize="12" />
</StackPanel>
</Popup>
<Popup x:Name="PART_WatchPopup" IsOpen="False" Grid.ColumnSpan="3" Grid.Row="1" StaysOpen="False" >
<syncfusion:SfTimeSelector BorderThickness="{TemplateBinding BorderThickness}" FlowDirection="{TemplateBinding
FlowDirection}" AccentBrush="Gray" BorderBrush="{TemplateBinding BorderBrush}" Height="300" Width="{Binding Width,
RelativeSource={RelativeSource TemplatedParent}}" x:Name="Clock" local:TimeSelectorExtension.DateTimeValue="{Binding
DateTime ,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
</Popup>
</Grid>
<Grid x:Name="PART_PopupGrid_Classic" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Syncfusion_Windows_Controls:Calendar ShortestDayNames="{TemplateBinding syncfusion:DateTimeEdit.ShortestDayNames}"
AbbreviatedMonthNames="{TemplateBinding syncfusion:DateTimeEdit.AbbreviatedMonthNames}" Culture="{TemplateBinding
syncfusion:DateTimeEdit.CultureInfo}" FormatCalendar="{TemplateBinding syncfusion:DateTimeBase.FormatCalendar}"
x:Name="Calendar_Classic" Margin="0,-2.5,0,0" Grid.ColumnSpan="2" Style="{TemplateBinding
syncfusion:DateTimeEdit.CalendarStyle}" />
<ToggleButton x:Name="Button_Today_Classic" Style="{StaticResource ToggleButtonStyle}" Content="{Binding
Source={StaticResource ResourceWrapperKey}, Path=TodayLabel}" Margin="0,-4,0,0"
FontSize="12" Grid.Column="0" Grid.Row="1" />
<ToggleButton Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=AccessEmptyDateText}"
Style="{StaticResource ToggleButtonStyle}" FontSize="12" x:Name="Button_NoDate_Classic" Margin="0,-4,0,0"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsEmptyDateEnabled, Converter={StaticResource
BooleanToVisibilityConverter}}"
Grid.Row="1" Grid.Column="1" />
</Grid>
</Grid>
</Popup>
</Grid>
</Grid>
</Border>
<Border x:Name="MouseOverBorder" CornerRadius="1" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed" Opacity="1"
BorderBrush="{TemplateBinding BorderBrush}" />
<Border x:Name="FocusBorder" CornerRadius="1" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed" Opacity="1"
BorderBrush="{TemplateBinding FocusedBorderBrush}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MouseOverBorder" Property="Visibility" Value="Visible" />
<Setter TargetName="FocusBorder" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="MouseOverBorder" Property="Visibility" Value="Collapsed" />
<Setter TargetName="FocusBorder" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="{StaticResource ReadOnlyBackground}" />
<Setter Property="BorderBrush" Value="{StaticResource ReadOnlyBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource ReadOnlyForeground}" />
<Setter Property="IsEnabled" TargetName="PART_UpArrow" Value="False"></Setter>
<Setter Property="IsEnabled" TargetName="PART_DownArrow" Value="False"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#FFABADB3" />
<Setter Property="BorderBrush" Value="#FFABADB3" />
<Setter Property="Opacity" Value="0.8"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="EnableCombinedStyle" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:DateTimeEdit}">
<Grid>
<Border x:Name="Border" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="PART_ContentHost"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Visibility="{TemplateBinding ContentElementVisibility}"/>
<ContentControl x:Name="PART_EmptyContent"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Visibility="{TemplateBinding WatermarkVisibility}" Content="{TemplateBinding NoneDateText}"
IsTabStop="False" IsHitTestVisible="False"
FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}"
Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Opacity="0.5" />
<ToggleButton x:Name="PART_DropDown" IsTabStop="False" Grid.Column="2" BorderThickness="1" Padding="1"
Template="{TemplateBinding DropDownButtonTemplate}" Style="{StaticResource ToggleButtonStyle}"
BorderBrush="Black" Width="20" HorizontalAlignment="Stretch"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsButtonPopUpEnabled,
Converter={StaticResource BooleanToVisibilityConverter}}">
<ToggleButton.Content>
<Path Stretch="Uniform" Fill="Transparent" Height="5" Width="8" Data="M 1,0 L 4.5,5 L 8,0"
HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="White" StrokeThickness="2">
</Path>
</ToggleButton.Content>
</ToggleButton>
<Grid Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<RepeatButton x:Name="PART_UpArrow" BorderThickness="{TemplateBinding RepeatButtonBorderThickness}" IsTabStop="False"
Margin="{TemplateBinding UpRepeatButtonMargin}"
BorderBrush="{StaticResource TextBoxBorderBrush}"
Background="{TemplateBinding RepeatButtonBackground}"
IsEnabled="{TemplateBinding IsEnabledRepeatButton}"
Grid.Row="0" Grid.Column="1" Width="20" Padding="1"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsVisibleRepeatButton,
Converter={StaticResource BooleanToVisibilityConverter}}">
<Path Stretch="Uniform" Height="4" Width="7" Fill="{StaticResource GlyphBrushKey1}"
Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z " HorizontalAlignment="Center"
VerticalAlignment="Center">
</Path>
</RepeatButton>
<RepeatButton x:Name="PART_DownArrow" BorderThickness="{TemplateBinding RepeatButtonBorderThickness}" IsTabStop="False"
Margin="{TemplateBinding DownRepeatButtonMargin}"
BorderBrush="{StaticResource TextBoxBorderBrush}"
Background="{TemplateBinding RepeatButtonBackground}"
IsEnabled="{TemplateBinding IsEnabledRepeatButton}"
Grid.Row="1" Grid.Column="1" Width="20" Padding="1"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsVisibleRepeatButton,
Converter={StaticResource BooleanToVisibilityConverter}}">
<Path Stretch="Uniform" Fill="{StaticResource GlyphBrushKey1}" Height="4" Width="7"
Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z "
HorizontalAlignment="Center" VerticalAlignment="Center">
</Path>
</RepeatButton>
</Grid>
<Popup x:Name="PART_Popup" Grid.Row="1" IsOpen="False" StaysOpen="False" Placement="Right">
<Grid Background="Transparent">
<Grid x:Name="PART_PopupGrid" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" x:Name="CalendarBorder" Grid.Column="0" Height="190" Background="Transparent">
<StackPanel Visibility="Visible">
<Syncfusion_Windows_Controls:Calendar ShortestDayNames="{TemplateBinding
syncfusion:DateTimeEdit.ShortestDayNames}" AbbreviatedMonthNames="{TemplateBinding
syncfusion:DateTimeEdit.AbbreviatedMonthNames}"
Culture="{TemplateBinding syncfusion:DateTimeEdit.CultureInfo}"
FormatCalendar="{TemplateBinding syncfusion:DateTimeBase.FormatCalendar}"
Style="{TemplateBinding CalendarStyle}" x:Name="Calendar" />
<ToggleButton x:Name="Button_Today" Style="{StaticResource ToggleButtonStyle}"
Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=TodayLabel}" FontSize="12" />
</StackPanel>
</Border>
<Border x:Name="ClockBorder" Grid.Row="0" Grid.Column="1" Height="190" Margin="2,2,2,2"
Background="Transparent">
<syncfusion:SfTimeSelector BorderThickness="{TemplateBinding BorderThickness}"
FlowDirection="{TemplateBinding FlowDirection}" AccentBrush="Gray"
BorderBrush="{TemplateBinding BorderBrush}" Height="300"
Width="{Binding Width, RelativeSource={RelativeSource TemplatedParent}}" x:Name="Clock"
local:TimeSelectorExtension.DateTimeValue="{Binding DateTime ,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
</Border>
</Grid>
<Grid Grid.Row="1" Margin="4,4,0,0" Background="{TemplateBinding Background}"
x:Name="PART_OptionGrid" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<CheckBox Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=AccessCalendarText}" Width="70"
FontSize="12" Grid.Column="0" x:Name="Button_Calender" Margin="0,0,0,2"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsCalendarEnabled}"
Foreground="{StaticResource ForegroundBrush.Blue}" />
<CheckBox Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=AccessClockText}" Width="50"
FontSize="12" Grid.Column="1" x:Name="Button_Clock" Margin="0,0,0,2"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsWatchEnabled}"
Foreground="{StaticResource ForegroundBrush.Blue}" />
<ToggleButton Content="{Binding Source={StaticResource ResourceWrapperKey}, Path=AccessEmptyDateText}"
Style="{StaticResource ToggleButtonStyle}" Width="50" FontSize="12" Grid.Column="2" x:Name="Button_NoDate"
Margin="0,0,2,4"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsEmptyDateEnabled,
Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</Grid>
</Grid>
</Popup>
</Grid>
</Grid>
</Border>
<Border x:Name="MouseOverBorder" CornerRadius="1" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed" Opacity="1"
BorderBrush="{StaticResource TextboxMouseOverBorderBrush}" />
<Border x:Name="FocusBorder" CornerRadius="1" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed" Opacity="1"
BorderBrush="{StaticResource TextboxFocusedBorderBrush}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MouseOverBorder" Property="Visibility" Value="Visible" />
<Setter TargetName="FocusBorder" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="MouseOverBorder" Property="Visibility" Value="Collapsed" />
<Setter TargetName="FocusBorder" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="{StaticResource ReadOnlyBackground}" />
<Setter Property="BorderBrush" Value="{StaticResource ReadOnlyBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource ReadOnlyForeground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
MainWindow.xaml:
<Grid>
<syncfusion:DateTimeEdit Grid.Row="0" IsCalendarEnabled="False" Style="{StaticResource DefaultDateTimeEditStyle}" Pattern="ShortTime" IsWatchEnabled="True"
EnableClassicStyle="True" CanEdit="True" Width="250" IsScrollingOnCircle="False" x:Name="date1" Height="23"/>
</Grid>
TimeSelectorExtension.cs:
public class TimeSelectorExtension : DependencyObject
{
public static DateTime GetDateTimeValue(DependencyObject obj)
{
return (DateTime)obj.GetValue(DateTimeValueProperty);
}
public static void SetDateTimeValue(DependencyObject obj, DateTime value)
{
obj.SetValue(DateTimeValueProperty, value);
}
// Using a DependencyProperty as the backing store for DateTimeValue. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DateTimeValueProperty =
DependencyProperty.RegisterAttached("DateTimeValue", typeof(DateTime), typeof(TimeSelectorExtension), new PropertyMetadata(DateTime.Now, new PropertyChangedCallback(OnDateTimeValueChanged)));
private static void OnDateTimeValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (e.OldValue != null)
{
(d as SfTimeSelector).SetValue(SfTimeSelector.SelectedTimeProperty, e.NewValue);
}
}
}
MainWindow.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
date1.DateTime = DateTime.Now;
date1.Loaded += Date1_Loaded;
}
SfTimeSelector TimeSelector = null;
Popup TimeSelector_Popup = null;
private void Date1_Loaded(object sender, RoutedEventArgs e)
{
TimeSelector = (date1.Template.FindName("Clock", date1)) as SfTimeSelector;
TimeSelector_Popup = (date1.Template.FindName("PART_Popup", date1)) as Popup;
if (TimeSelector != null)
{
TimeSelector.Cancel += TimeSelector_Cancel;
TimeSelector.Select += TimeSelector_Select;
}
}
private void TimeSelector_Select(object sender, RoutedEventArgs e)
{
if(TimeSelector_Popup != null)
{
TimeSelector.SetValue(TimeSelectorExtension.DateTimeValueProperty, TimeSelector.SelectedTime);
TimeSelector_Popup.IsOpen = false;
}
}
private void TimeSelector_Cancel(object sender, RoutedEventArgs e)
{
if (TimeSelector_Popup != null)
{
TimeSelector_Popup.IsOpen = false;
}
}
}
DateTimeEdit with analog clock:
DateTimeEdit with TimeSelector:
DateTimeEdit style: https://www.syncfusion.com/downloads/support/directtrac/general/txt/DateTimeEditStyle-1175675712.txt
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateTimeEdit_with_TimeSelector-1915051842.zip
