Style/template for raddatepicker and radtimepicker

[rh]

I would like to change the height, border color, and background color of the date picker and time picker. Probably change the mouse over and focus animations as well. Something to match the Office2007 skin of the asp.net controls.

In blend, I right clicked on the control, selected template parts, and then Edit copy...

When it created the control template in my app.xaml it was an empty control template. I sort of expected something like when you do this for a button control where you get the built in template for the button that you can then edit.

Because I didn't get a template to edit, is there a better way to go about customizing the border, height (the default height seems big), and background color?

[Miroslav]

Hello Roy,

Since I expect that the office style will be often requested I created the style for you and for anyone that needs it, here is the result:

I realize that the skin might not be perfect but at least it will be a good starting point.

We will release all the skins in a single project where you will be able to edit them (like the one that was available for download before RC0). Unfortunately Blend does not support third-party controls the same way it does with the default controls. The best we can do now is give you the styles so that you can edit them yourself.

I am attaching a project with the DatePicker and Calendar Office skin as well as the two files with the Clock and TimePicker skin which you can copy and edit.

Partly the appearance of the controls can be changed by the properties but editing the template is how you can entirely change the look of the control.

Do come back to us if you need help editing the controls.

Greetings,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[James]

Can I specify the column number of the time panel to 1, thus it would be more like a normal dropdown?

[Bobi]

Hello James,
In RadTimePicker there is ClockPanel property that is used for panel customization.
You can find a working demo here:
http://demos.telerik.com/silverlight/#TimePicker/FirstLook

If you want to have a single column then you can set:
<telerik:RadTimePicker.ClockPanel>
                        <ItemsPanelTemplate>
                            <panels:RadUniformGrid Columns="1" />
                        </ItemsPanelTemplate>
                    </telerik:RadTimePicker.ClockPanel>
                </telerik:RadTimePicker>
or
<telerik:RadTimePicker.ClockPanel>
                        <ItemsPanelTemplate>
                            <StackPanel/>
                        </ItemsPanelTemplate>
                    </telerik:RadTimePicker.ClockPanel>
                </telerik:RadTimePicker>

I hope that this will help you.

Greetings,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[James]

thanks Boryana. it works!
another question or problem: I found the background color for selected time of time picker works in the demo. While in my application, I have the SelectedTime bind to my object. After data binding completed, the first time I clicked the time picker, there's not background color for the time in the dropdown. the background color only worked after I selected a time item and reopened the dropdown. Is this a bug?

[Kaloyan]

Hello James,

Thank you for letting us know about the issue. The problem you are getting is a bug, indeed. We are working to resolve it and hope we will have a working version for the upcoming release.

Sincerely yours,
Kaloyan
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.