Styling the RadDatePicker

[Vladimir]

Hi,

I am tring to change the default look of RadDatePicker. For instance, I need to change background color and Font.

I tried to copy Style from RadDatePicker with Blend for VS 2012. (Object -> Edit Style -> Edit a Copy)
But I've got an Error "Copy Style failed"... so after that I looked into the xaml and there was new style generated.
Unfortunately there are syntax errors... For Instance, 
There was generated,
<Setter Property="HeaderStyle" Value="{StaticResource HeaderStyle}"/>
But there are no style with the name HeaderStyle generated.

Please advice how I could change the background color and Font for RadDatePicker.
May be there is a better way how it can be done...

Thanks in advance!

[Kiril Stanoev]

Hi Vladimir,

We'll need a bit more time to handle your request. We'll provide you with an answer tomorrow the latest. Thank you for the patience and cooperation. 

Kind regards,
Kiril Stanoev
the Telerik team

[Kiril Stanoev]

Hello Vladimir,

I've created a sample project where I've extracted the style of RadListPicker. Please take a look at it and let me know if you find anything unclear. I'd be glad to assist you further. 

Regards,
Kiril Stanoev
the Telerik team

[Vladimir]

Thanks for the upload. I did review the Solution. May be I missed something or didn't read it carefully but I've not found the way how I can do what I need with your code.

That I've been trying to achieve.
I have:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <telerikInput:RadDatePicker FontSize="51.187" Background="Red" Foreground="Lime"/>
</Grid>

According to the app mockup we need to change color scheme of RadDatePicker.
Namely, we have to change Background Color and Foreground Color only for initial button "Please select the date".(not for popup window)
I've tried to set already Background and Foreground Properties... does  not work.
The Issue that I have currently: I cannot make a copy of style of RadDatePicker. Blend throws exception...
It would help me a lot you could make a copy of style for RadDatePicker or give me a hint how I can change the background of button of RadDatePicker control.

PickerButtonStyle="{StaticResource ...}" also does not work...
I am getting:
Error HRESULT E_FAIL has been returned from a call to a COM component.
   at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
   at MS.Internal.XcpImports.FrameworkElement_MeasureOverride(FrameworkElement element, Size availableSize)
   at System.Windows.FrameworkElement.MeasureOverride(Size availableSize)
   at System.Windows.FrameworkElement.MeasureOverride(IntPtr nativeTarget, Double inWidth, Double inHeight, Double& outWidth, Double& outHeight)

Thanks in advance!

[Deyan]

Hi Vladimir,

Here's a copy of the style resources for RadDatePicker:

<telerikCore:RadPlaneProjectionAnimation x:Key="OpenAnimation" Axes="X" StartAngleX="-90" EndAngleX="0" Duration="0:0:.2">
       <telerikCore:RadPlaneProjectionAnimation.Easing>
           <ExponentialEase Exponent="4" EasingMode="EaseOut"/>
       </telerikCore:RadPlaneProjectionAnimation.Easing>
   </telerikCore:RadPlaneProjectionAnimation>

   <telerikCore:RadPlaneProjectionAnimation x:Key="CloseAnimation" Axes="X" StartAngleX="0" EndAngleX="90" Duration="0:0:.2">
       <telerikCore:RadPlaneProjectionAnimation.Easing>
           <ExponentialEase Exponent="4" EasingMode="EaseIn"/>
       </telerikCore:RadPlaneProjectionAnimation.Easing>
   </telerikCore:RadPlaneProjectionAnimation>

  <telerikInput:EnumerableToCountConverter x:Key="countConverter"/>

   <Style x:Key="HeaderStyle" TargetType="ContentControl">
       <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
       <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
       <Setter Property="Margin" Value="12,12,12,-4"/>
       <Setter Property="HorizontalAlignment" Value="Left"/>
   </Style>

<Style TargetType="telerikInput:RadDatePicker">
       <Setter Property="SelectorStyle">
           <Setter.Value>
               <Style TargetType="telerikInput:RadDateSelector">
                   <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
                   <Setter Property="HorizontalAlignment" Value="Stretch"/>
               </Style>
           </Setter.Value>
       </Setter>
       <Setter Property="HorizontalAlignment" Value="Stretch"/>
       <Setter Property="VerticalAlignment" Value="Top"/>
       <Setter Property="HeaderStyle" Value="{StaticResource HeaderStyle}"/>
       <Setter Property="HorizontalContentAlignment" Value="Left"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="telerikInput:RadDatePicker">
                   <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                                                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                   PopupOpenAnimation="{StaticResource OpenAnimation}"
                                                   PopupCloseAnimation="{StaticResource CloseAnimation}"
                                                   Header="{TemplateBinding Header}"
                                                   HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                   HeaderStyle="{TemplateBinding HeaderStyle}"
                                                   ContentTemplate="{TemplateBinding EmptyContentTemplate}"
                                                   PickerButtonStyle="{TemplateBinding PickerButtonStyle}">
                       <telerikPrimitives:RadPickerBox.PopupContent>
                           <Grid Background="{StaticResource PhoneChromeBrush}">
                               <Grid.RowDefinitions>
                                   <RowDefinition Height="Auto"/>
                                   <RowDefinition/>
                               </Grid.RowDefinitions>
                               <ContentControl
                                   Margin="24, 55, 0, 24"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                   FontWeight="SemiBold"
                                   FontSize="{StaticResource PhoneFontSizeMedium}"
                                   Grid.Row="0"
                                   x:Name="PART_PopupHeader"
                                   Content="{TemplateBinding PopupHeader}"
                                   ContentTemplate="{TemplateBinding PopupHeaderTemplate}"
                                   HorizontalContentAlignment="Left"
                                   />
                               <telerikInput:RadDateSelector
                                   Grid.Row="1"
                                   x:Name="PART_Selector"
                                   Step="{TemplateBinding Step}"
                                   DayStepBehavior="{TemplateBinding DayStepBehavior}"
                                   MonthStepBehavior="{TemplateBinding MonthStepBehavior}"
                                   YearStepBehavior="{TemplateBinding YearStepBehavior}"
                                   ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                   AppointmentSource="{TemplateBinding AppointmentSource}"
                                   Style="{TemplateBinding SelectorStyle}"/>
                           </Grid>
                       </telerikPrimitives:RadPickerBox.PopupContent>

                       <telerikPrimitives:RadPickerBox.ApplicationBarInfo>
                           <telerikPrimitives:ApplicationBarInfo x:Name="PART_AppBarInfo">
                               <telerikPrimitives:ApplicationBarButton x:Name="PART_OKButton" />
                               <telerikPrimitives:ApplicationBarButton x:Name="PART_CancelButton" />
                           </telerikPrimitives:ApplicationBarInfo>
                       </telerikPrimitives:RadPickerBox.ApplicationBarInfo>
                   </telerikPrimitives:RadPickerBox>
               </ControlTemplate>
           </Setter.Value>
       </Setter>

       <Setter Property="ItemTemplateSelector">
           <Setter.Value>
               <telerikInput:AppointmentTemplateSelector>
                   <DataTemplate>
                       <Grid>
                           <Grid HorizontalAlignment="Right"
                           VerticalAlignment="Top"
                           Margin="2">
                               <Ellipse Width="25"
                                   Height="25"
                                   Fill="{StaticResource PhoneAccentBrush}"/>
                               <TextBlock Text="{Binding Path=Appointments, Converter={StaticResource countConverter}}"
                                   FontSize="16"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"/>
                           </Grid>

                           <StackPanel MinHeight="100" Margin="4"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom">
                               <TextBlock Text="{Binding Path=HeaderText}" FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="0,0,0,-8"/>
                               <TextBlock Text="{Binding Path=ContentText}" FontSize="20"  Foreground="{StaticResource PhoneSubtleBrush}" FontFamily="{StaticResource PhoneFontFamilyNormal}"/>
                           </StackPanel>
                       </Grid>
                   </DataTemplate>
               </telerikInput:AppointmentTemplateSelector>
           </Setter.Value>
       </Setter>
   </Style>

Let me know should you need further assistance with using the styles.

Kind regards,
Deyan
the Telerik team

[İlke]

Hello, 

I have the same problem. Altough I apply the style you have provided, I still cannot edit the foreground and border brush properties in light theme. How can I set them to a certain color, while it is not selected, in light theme?

Thanks in advance,

Ilke

[Deyan]

Hi Vladimir,

Thanks for writing back.

Can you please clarify what do you mean with "edit the foreground and border brush in light theme"? These properties are always set to a value defined in the style. If you want them to have different colours when themes change, you should use resource dictionaries and change them accordingly when the theme changes. There is already such mechanism in the Windows Phone OS which defines a set of static resources which are updated according to the theme chosen by the user. For instance the {StaticResource PhoneContrastBackground} is such one.

If you think that I do not understand you correctly, please open a new support ticket and attach your project with further details on how to reproduce the issue so that I can see how I can help.

Regards,
Deyan
Telerik

[Hung]

well I think people in this thread have the same issue with me and found no correct answer. The RadDatePicker when display in the screen it always have the transparent background with white text "Select date". All I want to change the "Select date" to black and make the control background as white but no matter what I try: foreground, background,.. no things change. When I say RadDatePicker I mean what appear in the screen which display the selected value.
Thanks!

[Deyan]

Hello Hung,

Thanks for writing.

We have identified the reason for not being able to override the default appearance by just setting the corresponding properties. They are not template-bound in the default style.

We will revisit the styles and address these issues but we will need some time to make sure no breaking changes are introduced in existing apps.

For the time being, you can simply do this by using the PickerButtonStyle property and assign a style targeting the ToggleButton type which sets the needed properties.

I hope this helps.

Regards,
Deyan
Telerik

[Binu]

is that fixed?, i was not able to achieve by trying workaround. 
please help

[Victor]

Hi Binu,

Thanks for writing.
Please consider this XAML snippet:

<input:RadDatePicker VerticalAlignment="Center">
    <input:RadDatePicker.PickerButtonStyle>
        <Style TargetType="ToggleButton">
            <Setter Property="Background"
                    Value="White"/>
            <Setter Property="Foreground"
                    Value="Black"/>
        </Style>
    </input:RadDatePicker.PickerButtonStyle>
</input:RadDatePicker>

Regards,
Victor
Telerik

[Binu]

thanks it worked in preview, but when i build solution its gone!, what could be wrong?

[Victor]

Hello Binu,

I am afraid I can't be sure what is happening in your app. Can you please post a support ticket and attach your app in a zip file so that I can debug it?

Regards,
Victor
Telerik

[Lalit]

Better to change the application level default selection/accent brush. It will applied in all controls of app.

Open App.xaml.cs inside constructor paste below code,

(App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(255,119, 177,159); // Colors.Red;