creating style fo RadDateTime picker

[Ravi]

Hi there,

I am trying to create style for RadDateTimePicker control, i am able to create the RadCalender style which is a part of it. but i am unable to create the style for Radclock.

Please look at attached screenshot which i have done some styling, and if you can notice there i have marked three areas on clock, which needs to style, i am not able to find them in expression blend.

Can you please tell me how i can do the styling for those marked part.
Let me know if you need any more details.

Thanks in advance,
Srinivas. 

[Masha]

Hello Srinivas,

RadClock  and Close button of RadDateTimePicker  are part of ButtonChrome control.  If you generate the style for the ButtonChrome (you can do it in Blend, selecting ButtonChrome button ang generate template for it), you will be able to find and modify the Brushes responsible for any visual state of the control.

In your scenario, to change CloseButton background you should modify the MouseOverVisual Border in ButtonChromeStyleTemplate.

To Change MouseOver of RadClockItems you need modify this MultiTrigger in ButtonChromeStyleTemplate  :

<MultiTrigger>
                               <MultiTrigger.Conditions>
                                   <Condition Property="Orientation" Value="Horizontal"/>
                                   <Condition Property="RenderEnabled" Value="True"/>
                                   <Condition Property="RenderChecked" Value="False"/>
                                   <Condition Property="RenderHighlighted" Value="True"/>
                                   <Condition Property="RenderMouseOver" Value="False"/>
                                   <Condition Property="RenderPressed" Value="False"/>
                               </MultiTrigger.Conditions>
                               <Setter Property="BorderBrush" TargetName="OuterBorder" Value="#FFFFC92B"/>
                               <Setter Property="BorderBrush" TargetName="InnerBorder" Value="White"/>
                               <Setter Property="Background" TargetName="OuterBorder">
                                   <Setter.Value>
                                       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                           <GradientStop Color="Pink" Offset="0"/>
                                           <GradientStop Color="#FFFFFBA3" Offset="1"/>
                                       </LinearGradientBrush>
                                   </Setter.Value>
                               </Setter>
                           </MultiTrigger>

And Hover State of RadClockStyle is controlled by following MultipleTrigger:

<MultiTrigger.Conditions>
                                  <Condition Property="Orientation" Value="Horizontal"/>
                                  <Condition Property="RenderEnabled" Value="True"/>
                                  <Condition Property="RenderChecked" Value="False"/>
                                  <Condition Property="RenderHighlighted" Value="False"/>
                                  <Condition Property="RenderSelected" Value="True"/>
                                  <Condition Property="RenderMouseOver" Value="False"/>
                                  <Condition Property="RenderPressed" Value="False"/>
                              </MultiTrigger.Conditions>

I hope this will be helpful.


Regards,
Maria
the Telerik team

[Ravi]

Hi Maria,
Thank you so much for your help,

I will try this and let you know if i need any help.

Thanks again,
Srinivas.