Is it possible to hide the TimePicker header?

[Geoff Hardy]

By default, when you use the RadTimePicker control, it has a header showing "TimePicker" at the top of the drop-down list of items. This header is not particularly useful and I would like to hide it. If I set the HeaderContent property to an empty string, or null, the header control still appears with no text but is approximately 6 pixels high.

Is there a simple way to get rid of this header?

[Konstantina]

Hi Geoff,

Thank you for contacting us.

You can easily edit the template of the TimePicker in Expression Blend. Just drop a TimePicker control in the design surface, right-click it and choose from the menu Edit Template->Edti a Copy. Blend will generate for you all the styles and templates of the TimePicker. Then find the ClockElement right-click it and again choose from the menu Edit Template->Edti a Copy. Now you have the template of the ClockElement and you will be able to remove the Header.
Please find the attached project in which the above mentioned steps are performed. Please mind for the "NOTE:" comment which indicate the place where changes have been made.

If you need further assistance please do not hesitate to contact us again.

All the best,
Konstantina
the Telerik team

[Geoff Hardy]

I was trying to change the header using version 2011.1 and so I went to look at the project that was attached, and strangely, it was blank. There didn't seem to be any RadTimePickers at all!

[Konstantina]

Hello Geoff,

Sorry about the missing TimePicker into the project.

Attached I am sending you new project with removed header from the template of the TimePicker. However, you have a second option for removing only the text from the header, by setting the ClockStyle of the TimePicker, for example:

<telerik:RadTimePicker HorizontalAlignment="Center" VerticalAlignment="Center">
                <telerik:RadTimePicker.ClockStyle>
                    <Style TargetType="telerik:RadClock">
                        <Setter Property="telerik:LocalizationManager.ResourceKey" Value="{x:Null}" />
                        <Setter Property="Header" Value="{x:Null}" />
                    </Style>
                </telerik:RadTimePicker.ClockStyle>
            </telerik:RadTimePicker>

Hope this information helps. Please let us know if you have further questions.

All the best,
Konstantina
the Telerik team

[James]

Thanks,

Here is the code if you just want to change the header text (with custom styles for RadTimePicker and RadClock):

<InputControls:RadTimePicker Style="{StaticResource RadTimePickerStyle}">
    <InputControls:RadTimePicker.ClockStyle>
        <Style TargetType="telerik:RadClock" BasedOn="{StaticResource RadClockStyle}">
            <Setter Property="telerik:LocalizationManager.ResourceKey" Value="{x:Null}" />
            <Setter Property="Header" Value="My custom header text" />
        </Style>
    </InputControls:RadTimePicker.ClockStyle>
</InputControls:RadTimePicker>

Rgds,

James

[Kaloyan]

Hi James,

This is the correct solution.

Kind regards,
Kaloyan
the Telerik team