22 Answers, 1 is accepted
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.
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.
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.
On more question :) How do I change the text and style of the buttons? I can't override the style?
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.
Thanks
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.
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
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.
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
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.
Thanks
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.
Thanks
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
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"
/>
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
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>
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
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
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