New to Telerik UI for WPFStart a free 30-day trial

Show ScrollViewer for the Time Display Items of RadDateTimePicker

Updated on Sep 15, 2025

Environment

Product Version2019.1.116
ProductRadDateTimePicker for WPF

Description

How to show a vertical scrollbar in the time section of the drop down.

Solution

  1. Extract the ControlTemplate of RadClock.
  2. Wrap the ItemsPresenter control of the template in a ScrollViewer control.
  3. Create a Style targeting RadClock and define a Setter that sets the Template property to the customized ControlTemplate.
  4. Apply the Style via the ClockStyle property of RadDateTimePicker.
XAML
	<Window.Resources>
		<ControlTemplate TargetType="{x:Type telerik:RadClock}" x:Key="CustomClockTemplate">	  
			<Grid>
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="*"/>
				</Grid.RowDefinitions>
				<Border x:Name="BackgroundVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
						Background="{TemplateBinding Background}" CornerRadius="0" Grid.RowSpan="2">
					<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0"/>
				</Border>
				<Border x:Name="Header" BorderBrush="Black" BorderThickness="1" CornerRadius="0" MinHeight="32">
					<Border.Background>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF5B5B5B" Offset="1"/>
							<GradientStop Color="#FF868686"/>
							<GradientStop Color="#FF4F4F4F" Offset="0.42"/>
							<GradientStop Color="#FF0E0E0E" Offset="0.43"/>
						</LinearGradientBrush>
					</Border.Background>
					<Border BorderBrush="#FFB5B5B5" BorderThickness="1" CornerRadius="0" Padding="{TemplateBinding Padding}">
						<ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" 
										Foreground="White" FontWeight="Bold" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
					</Border>
				</Border>
				<!-- THE NEWLY ADDED SCROLLVIEWER -->
				<ScrollViewer Grid.Row="1">
					<ItemsPresenter Margin="1,0,1,1" />
				</ScrollViewer>
			</Grid>
		</ControlTemplate>
	</Window.Resources>
    <Grid>
        <telerik:RadDateTimePicker>
            <telerik:RadDateTimePicker.ClockStyle>
                <Style TargetType="telerik:RadClock">
                    <Setter Property="Template" Value="{StaticResource CustomClockTemplate}" />
                </Style>
            </telerik:RadDateTimePicker.ClockStyle>
        </telerik:RadDateTimePicker>
    </Grid>    

This template is extracted from the OfficeBlack theme.

WPF RadDateTimePicker Show ScrollViewer for the Time Display Items

In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support