This is a migrated thread and some comments may be shown as answers.

Styling the datepicker

22 Answers 217 Views
DatePicker for XAML
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Iris
Top achievements
Rank 1
Iris asked on 13 Jul 2012, 03:10 PM
How do I change the look of the DatePicker (XAML) ? 

22 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 16 Jul 2012, 11:07 AM
Hi Iris,

Thank you for using RadControls for Metro and for your question.

The RadDatePicker control is a composite one and it aggregates several other controls in it. For example the inline picker button is represented by the DateTimePickerButton control, residing in Telerik.UI.Xaml.Controls.Input. You can create a Style object targeting this type and specify how the control should look like. If you want to change appearance of the items in the Selector (Popup) part you can override the implicit (default) style of the DateTimeList control that represents each spin list. Additionally, you can override the default Style of the DatePicker itself.

Could you please send me some more details on what your scenario is so that I can give you more detailed hints.

I am looking forward to your reply.

Regards,
Georgi
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Iris
Top achievements
Rank 1
answered on 16 Jul 2012, 12:03 PM
When using blend to edit a copy of the template it generates an empty template, so I have no idea how the control looks like, in other words what control and what style to override. 

I would like to change the colors and font of the DatePicker :)

Now, how do I do this?

"aggregates several other controls in it" - which ones? And how do I know which one to style?

Sorry if my questions seem silly, but I just can't figure this one out.
0
Georgi
Telerik team
answered on 17 Jul 2012, 08:39 AM
Hi Iris,

Sorry for the confusion. The Empty Control Template is probably a bug with the current version of VS/Blend. I have submitted a report to MS and I am still waiting for their response on the matter.

You can take a look at the control's structure at the Generic.xaml of the Telerik.UI.Xaml.Input  assembly:

C:\Program Files (x86)\Telerik\RadControls for Metro XAML Q1 2012 BETA\Binaries\Input\Themes\Generic.xaml

The control internally uses DateTimeList instances that inherit from the LoopingList control, residing in Telerik.UI.Xaml.Primitives assembly. The style of the items in the Popup part is declared here:

C:\Program Files (x86)\Telerik\RadControls for Metro XAML Q1 2012 BETA\Binaries\Primitives\Themes\Generic.xaml

The controls completely support implicit styles, so you can create new styles in the Application's resources and these styles should replace the default ones.

Please find attached a simple project that alters some visual parts of the control.

I hope this information is useful. Let me know if I can assist you further.

All the best,
Georgi
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Iris
Top achievements
Rank 1
answered on 17 Jul 2012, 10:21 AM
Thank you so much for the answer!

On more question :) How do I change the text and style of the buttons? I can't override the style?
0
Georgi
Telerik team
answered on 17 Jul 2012, 04:54 PM
Hi Iris,

Thanks for getting back to me.

I guess you mean the OK and Cancel buttons in the Selector part of the control. These are a bit tricky to style and you will need to specify a new control template for the picker. I have updated the sample app with how this can be achieved.

We have plans to extend the theming support for our controls and to provide set of named resources that one can easily change and alter the appearance without the need to write so much XAML. We will do our best to extend the components for the official release.

I would like to thank you for your feedback - I have added 1000 Telerik points to your account as a token of our gratitude.

Regards,
Georgi
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Michael
Top achievements
Rank 1
answered on 14 Aug 2012, 04:26 AM
This example is tremendously helpful. It works (mostly) for the TimePicker as well. It would be great if you could share the RadTimePicker specific styling as well. The internal controls PART_MonthList, PART_DayList, etc... don't exist in the TimePIcker.

Thanks

Michael
0
Georgi
Telerik team
answered on 15 Aug 2012, 02:08 PM
Hi Michael,

Thank you for contacting us.

I am happy to inform you that we will be releasing a BETA 2 update of our RadControls for Metro suite later today. In this update we have added an additional level of theming extensibility for our controls. This new routine follows the pattern of the framework controls and uses named resources (brushes) that can be easily modified by the user to apply completely new look-and-feel.

For example you will be able to specify the following XAML in the Application's resources:

<SolidColorBrush x:Key="TelerikDateTimePickerSelectorItemSelectedBackgroundBrush" Color="Red"/>

We will soon provide additional information about all the predefined names so that you can easily achieve the desired appearance.

I hope this helps, let me know if I can help you in some other way.

All the best,
Georgi
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Michael
Top achievements
Rank 1
answered on 18 Aug 2012, 10:28 PM
Hi Georgi,

I have the latest version (Beta 2) of the controls involved and changing the TelerikDateTimePickerSelectorItemSelectedBackgroundBrush property works perfectly. There is one additional property I wish to change. I an hoping you can supply me with the name of the property that specifies the background color of a closed control that is focused.

Thanks!

Michael
0
Tsvyatko
Telerik team
answered on 20 Aug 2012, 12:21 PM
Hi Michael,

 you can take advantage of these two brushes to style the picker and its respective item background:

<SolidColorBrush x:Key="TelerikDateTimePickerFocusedBackgroundBrush"
                     Color="OrangeRed"/>
             
<SolidColorBrush x:Key="TelerikDateTimePickerItemFocusedBackgroundBrush"
                     Color="Orange"/>

If you have any further questions, do not hesitate to contact us.Regards,
Tsvyatko
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Michael
Top achievements
Rank 1
answered on 24 Aug 2012, 11:06 PM
Hi, Tsvyatko

Works as advertised - thanks.

Do you have a full set of these constants available? I also want to set the color of an unfocused control. I also need the focused foreground color because I want the focused background color to be white, and it appears that the focused foreground color is also white.

BTW.... there appears to be a misalignment of the control layers. If you set the background color of the control to say green and then set there control has a transparency layer on top of the background that makes the control background light green, except for a solid green bar across the top that is a few pixels high.

Michael
0
Tsvyatko
Telerik team
answered on 30 Aug 2012, 10:57 AM
Hello Michael,

 you can control the focused states using the following brushes:

<!--Focused state-->
<SolidColorBrush x:Key="TelerikDateTimePickerFocusedBackgroundBrush"
                 Color="..."/>
<SolidColorBrush x:Key="TelerikDateTimePickerFocusedBorderBrush"
                 Color="..."/>
<SolidColorBrush x:Key="TelerikDateTimePickerFocusedForegroundBrush"
                 Color="..."/>   
<SolidColorBrush x:Key="TelerikDateTimePickerItemFocusedBackgroundBrush"
                 Color="..."/>

In order to get better idea of the full set of the brushes that can be predefined you can use blend to extract the DatePicker and its selector control template (define control in the xaml and use "edit template/edit copy" option to extract the template). We are also planning to include help articles describing the full set of brushes available for each control.

Let us know if you have any further questions.Greetings,
Tsvyatko
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Daryl
Top achievements
Rank 1
answered on 11 Oct 2012, 05:21 PM
Hi, I'm having a problem getting the sample provided in the zip file to run with the current version of the controls and was wondering if you could repost?  There appears to be a property that has changed in this version and I'm not clear on how to get it to run.

Thanks
0
Ivaylo Gergov
Telerik team
answered on 12 Oct 2012, 01:41 PM
Hello, Daryl

Thank you for using RadControls for Windows 8.

In the current version we have improved the styling of RadDatePicker and RadTimePicker.Please find the attached project as reference. 
For more detailed information you can check our online help.

I hope this helps. Let me know if I can assist you in some other way.

 

Kind regards,
Ivaylo Gergov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Daryl
Top achievements
Rank 1
answered on 12 Oct 2012, 02:59 PM
This was just what I was looking for!

Thanks
0
Cybil
Top achievements
Rank 1
answered on 18 Mar 2013, 02:56 PM

Hi, carrying on this thread, I'd like to know the following:

1) If there are any other keyed resources other than brushes to exploit in order to style the RadDatePicker control. I mentioned keyed resources because I need to build keyed styles and apply them individually to different RadDatePickers. I'm already aware of the implicit styles but they don't fit my scenario because I need to apply different styles to different instances of RadDatePicker control

2) In order to achieve point 1), I also tried to completely re-style and re-template the RadDatePicker. That seemed a viable solution, but then I found out that the extracted XAML (right click->Edit Template->Edit a copy... both in VS and Blend) was missing many resource references, namely brushes, so they have to be fixed/amended by hand.

My specific scenario is that I need to have several RadDatePicker controls in my app and to apply them different styles. These styles have to deal not only with brushes, but also with font family, font size, margins, paddings and so on.

Thank you in advance

0
Ivaylo Gergov
Telerik team
answered on 21 Mar 2013, 11:01 AM
Hi Alessandro,

Thank you for your interest.

There are no additional keyed resources besides the Telerik brushes but it is possible to create different implicit styles for different instances of RadDatePicker, too -- you just need to make sure the styles are defined in the proper scope e.g. the following xaml produces two datepickers with different background -- one red, and the other -- yellow:
<telerik:RadDatePicker>
    <telerik:RadDatePicker.Resources>
        <Style TargetType="telerik:RadDatePicker">
            <Setter Property="Background" Value="Red" />
        </Style>
    </telerik:RadDatePicker.Resources>
</telerik:RadDatePicker>
 
<telerik:RadDatePicker HorizontalAlignment="Right">
    <telerik:RadDatePicker.Resources>
        <Style TargetType="telerik:RadDatePicker">
            <Setter Property="Background" Value="Yellow" />
        </Style>
    </telerik:RadDatePicker.Resources>
</telerik:RadDatePicker>

Still, if you are customizing the default control template you will also need to create an instance of the PaletteInitializer class in your application resources and place this instance before the custom control template. The control template of RadDatePicker contains references to Telerik named brushes which are loaded dynamically and this class is used to ensure their proper resolution. It is placed in the Telerik.UI.Xaml.Controls.Input.Theming namespace. Here's an example:
<theming:PaletteInitializer x:Key="PaletteInitializer"/>
where : 
xmlns:theming="using:Telerik.UI.Xaml.Controls.Input.Theming"

I hope this help. Let me know if you need further assistance.

 

Greetings,
Ivaylo Gergov
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Cybil
Top achievements
Rank 1
answered on 27 Mar 2013, 12:00 AM
Hi Ivaylo,
thank you for pointing me out that I can use implicit styles within the right scope to style different instances of RadDatePicker: that solved my first issue.

However, as for my second issue about re-templating the control, I followed your indications but was not successful. Following are some details:

1) I added a PaletteInitializer instance along with its required XAML namespace declarations to my page resources (tried also to app.xaml resources)
2) I extracted a copy of the RadDatePicker control template by right-clicking it and selecting "Edit template->Edit a copy..."
3) The issue is that the keyed resources

TelerikDateTimePickerSelectorButtonBackgroundBrush

TelerikDateTimePickerSelectorButtonForegroundBrush

TelerikDateTimePickerSelectorButtonBorderBrush

TelerikDateTimePickerSelectorButtonPointerOverBackgroundBrush

TelerikDateTimePickerSelectorButtonPressedBackgroundBrush

TelerikDateTimePickerSelectorButtonPressedForegroundBrush


are still not resolved by the XAML designer at design-time and cause the following exception at run time:

An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in RadDatePickerStyleTest.exe but was not handled in user code

WinRT information: Cannot find a Resource with the Name/Key TelerikDateTimePickerSelectorButtonBackgroundBrush



Following is an excerpt of the control template XAML generated in my page by the designer (sorry for the un-indented markup, but you should be able to paste it in Visual Studio and obtain back the correct indentation).

Can you take a look at it?
Thanks in advance

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="using:RadDatePickerStyleTest"

xmlns:Input="using:Telerik.UI.Xaml.Controls.Input"

xmlns:telerikDateTimePickers="using:Telerik.UI.Xaml.Controls.Input.DateTimePickers"

xmlns:theming="using:Telerik.UI.Xaml.Controls.Input.Theming"

x:Class="RadDatePickerStyleTest.MainPage"

mc:Ignorable="d"

>

<Page.Resources>

<ResourceDictionary>

<theming:PaletteInitializer x:Key="PaletteInitializer"/>

<telerikDateTimePickers:DisplayModeToVisibilityConverter x:Key="DisplayModeConverter" VisibleDisplayMode="Standard"/>

<Style TargetType="Button" x:Key="SelectorButtonStyle">

<Setter Property="Background" Value="{StaticResource TelerikDateTimePickerSelectorButtonBackgroundBrush}" />

<Setter Property="Foreground" Value="{StaticResource TelerikDateTimePickerSelectorButtonForegroundBrush}"/>

<Setter Property="BorderBrush" Value="{StaticResource TelerikDateTimePickerSelectorButtonBorderBrush}"/>

...

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Button">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="PointerOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TelerikDateTimePickerSelectorButtonPointerOverBackgroundBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TelerikDateTimePickerSelectorButtonPressedBackgroundBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TelerikDateTimePickerSelectorButtonPressedForegroundBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

...

</VisualStateManager.VisualStateGroups>

...

</Grid>

</ControlTemplate>

</Setter>

</Style>

<ControlTemplate x:Key="RadDatePickerControlTemplate1" TargetType="Input:RadDatePicker">

...

<//ControlTemplate>

</ResourceDictionary>

</Page.Resources>

<Grid>

<Input:RadDatePicker Template="{StaticResource RadDatePickerControlTemplate1}"/>

</Grid>

</Page>

0
Ivaylo Gergov
Telerik team
answered on 29 Mar 2013, 05:01 PM
Hello Alessandro,

Thank you for getting back to us.

In the provided code snippet I am not sure if there is any content in the defined control template. I have attached a project where I have extracted the control template of RadDatePicker using Blend. Can you please clarify if it is running on your side and what are the differences with your current scenario?

I am looking forward to your reply.

 

All the best,
Ivaylo Gergov
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Cybil
Top achievements
Rank 1
answered on 02 Apr 2013, 02:05 PM

Hi Ivaylo,
thank you for your answer.

I checked your project against mine and the the only difference is that I had my PaletteInitializer class declared in App.xaml while you had yours in MainPage.xaml: that was enough to make my App crash at runtime and yours not.
Actually I was confident that the resource resolution fallback system would allow me to place the PaletteInitializer instantiation in App.xaml as well, but this doesn't seem the case.

Anyway, issue solved for me, thanks

0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 15 May 2019, 05:12 AM
On smaller resolution the TimePicker's PopUp is showing wrong....need your help
0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 20 May 2019, 08:32 AM
its been 5 days and still there is no reply from your side....such a bad experience
0
Yana
Telerik team
answered on 20 May 2019, 11:26 AM
Hello Raneesras,

We have just replied to the other forum thread regarding the same question, I am pasting the reply for your convenience:

This happens when there is less space for the popup that shows the times. It is a restriction with the Windows native popups behavior. In this situation a possible way to go is to show a scrollviewer. You can see how to do this in the following knowledge base article. I hope it helps.

Regards,
Yana
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
DatePicker for XAML
Asked by
Iris
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Iris
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Tsvyatko
Telerik team
Daryl
Top achievements
Rank 1
Ivaylo Gergov
Telerik team
Cybil
Top achievements
Rank 1
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
Yana
Telerik team
Share this question
or