Appearance in WPF DateTimePicker (DateTimeEdit)

The DateTimeEdit provides built-in themes which can be applied using SkinStorage and SfSkinManager. Also provides support to create custom theme using theme studio. You can customize the appearance of calendar, clock, up-down and drop-down buttons in the DateTimeEdit.

Customize up-down appearance

The visibility of the Repeat Button can be enabled by setting the IsVisibleRepeatButton property to true. The RepeatButtonBackground, RepeatButtonBorderThickness, UpRepeatButtonTemplate, DownRepeatButtonTemplate, UpRepeatButtonMargin, and DownRepeatButtonMargin properties are used to customize the appearance of the Repeat Buttons.

<syncfusion:DateTimeEdit x:Name="dateTimeEdit" Height="25" Width="200" IsVisibleRepeatButton="True" RepeatButtonBackground="Violet" RepeatButtonBorderBrush="Red"/>
dateTimeEdit.RepeatButtonBackground = Brushes.Violet;
dateTimeEdit.RepeatButtonBorderBrush = Brushes.Red;

WPF DateTimeEdit up-down button customization

Custom calendar and clock

You can host your own calendar and clock control in DateTimeEdit by using DateTimeCalender and Clock properties to enhance its appearance.

Custom calendar

You can host a custom calendar by using DateTimeCalender property of DateTimeEdit.

<syncfusion:DateTimeEdit Width="250" Height="25" x:Name="dateTimeEdit">
    <syncfusion:DateTimeEdit.DateTimeCalender>
        <syncfusion:SfDateSelector Width="250" ShowCancelButton="False" ShowDoneButton="False" SelectorItemWidth="75" Foreground="#333333" SelectorItemHeight="75" SelectorItemSpacing="4.5" Height="430" Margin="0, 2, 0 ,0" SelectedDateTime="{Binding ElementName=dateTimeEdit,Path=DateTime,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
        </syncfusion:SfDateSelector>
    </syncfusion:DateTimeEdit.DateTimeCalender>
</syncfusion:DateTimeEdit>
ToggleButton todayButton;
public MainWindow()
{
    InitializeComponent();
    dateTimeEdit.IsDropDownOpenChanged += DateTimeEdit_IsDropDownOpenChanged;
}

private void DateTimeEdit_IsDropDownOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    if (dateTimeEdit.IsDropDownOpen)
    {
        todayButton = dateTimeEdit.Template.FindName("Button_Today_Classic", dateTimeEdit) as ToggleButton;
        if (todayButton != null)
        {
            todayButton.Visibility = Visibility.Collapsed;
        }
    }
}

Custom calendar in WPF DateTimeEdit

Custom clock

You can host a custom clock using the Clock property of DateTimeEdit. You can enable or disable the clock by setting EnableClassicStyle and IsWatchEnabled properties to true.

<syncfusion:DateTimeEdit Width="250" Height="25" EnableClassicStyle="True" IsCalendarEnabled="False" x:Name="dateTimeEdit">
    <syncfusion:DateTimeEdit.Clock>
        <syncfusion:SfTimeSelector Width="248" ShowCancelButton="False" ShowDoneButton="False" SelectorItemWidth="75" Foreground="#333333" SelectorItemHeight="75" SelectorItemSpacing="4.5" BorderThickness="1" Height="430" Margin="0, 0, 0 ,0" SelectedTime="{Binding ElementName=dateTimeEdit,Path=DateTime,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
        </syncfusion:SfTimeSelector>
    </syncfusion:DateTimeEdit.Clock>
</syncfusion:DateTimeEdit>

Customize the Clock in DateTimeEdit

NOTE

Download demo application from GitHub

Built-in themes

The appearance of DateTimeEdit control can be customized by VisualStyle attached property of the SfSkinManager and SkinStorage. You can find the list of available built-in themes and the assemblies needs to be referred in the following documentation SfSkinManager and SkinStorage.

Below example explains how to apply blend theme for DateTimeEdit using SfSkinManager in an existing application.

  • Add reference Syncfusion.SfSkinManager.Wpf.dll and Syncfusion.Themes.Blend.Wpf.dll assembly.
  • Now add reference to SfSkinManager namespace and set SfSkinManager.VisualStyle attached property to window or DateTimeEdit. Setting VisualStyle property to window will apply blend theme for all controls in Windows.
<Window x:Class="DateTimeEdit_sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                          
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:local="clr-namespace:DateTimeEdit_sample"
        xmlns:skinManager="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
        Title="Visual Styles Demo"  Icon="App.ico"
        Width="1200" Height="720"
        WindowStartupLocation="CenterScreen">

    <Grid>             
       <syncfusion:DateTimeEdit skinManager:SfSkinManager.VisualStyle="Blend" x:Name="datetimeedit" Width="200" Height="25" />
   </Grid>

</Window>
using Syncfusion.SfSkinManager;

SfSkinManager.SetVisualStyle(datetimeedit, VisualStyles.Blend);
  • Now run the application, you can see blend theme applied for DateTimeEdit.

WPF DateTimeEdit blend visual style of SfSkinManager

Custom Theme using Theme Studio

DateTimeEdit themes can be customized using theme studio. Refer the documentation link for more information.

Flow direction

The DateTimeEdit control elements can be aligned in right-to-left direction by using FlowDirection property. The default value is LeftToRight.

<syncfusion:DateTimeEdit x:Name="dateTimeEdit" FlowDirection="RightToLeft" Width="200" Height="25" />
dateTimeEdit.FlowDirection = FlowDirection.RightToLeft;

WPF DateTimeEdit aligned in right-to-left direction