Customizing the DatePicker template

[GJ Kuz]

Hi,

I am kind of new to silverlight and telerik controls. I am trying to change the DatePicker's default template at runtime. Based on the help on datepicker, I edited the template in Blend. It added the following to the App.xaml.  The intent is to change the control BackGround and ForeGround at runtime based on the selection from the settings page.

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

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


       <ControlTemplate x:Key="RadDatePickerControlTemplateWhiteTheme" TargetType="telerikInput:RadDatePicker">
           <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
               HorizontalContentAlignment="Left"
               PopupOpenAnimation="{StaticResource OpenAnimation}"
               PopupCloseAnimation="{StaticResource CloseAnimation}"
               Header="{TemplateBinding Header}"
               HeaderTemplate="{TemplateBinding HeaderTemplate}"
               HeaderStyle="{TemplateBinding HeaderStyle}"
               ContentTemplate="{TemplateBinding EmptyContentTemplate}"
               PickerButtonStyle="{TemplateBinding PickerButtonStyle}" Background="#BFFFFFFF" Foreground="Black">

               <telerikPrimitives:RadPickerBox.ApplicationBarInfo>
                   <telerikPrimitives:ApplicationBarInfo x:Name="PART_AppBarInfo">
                       <telerikPrimitives:ApplicationBarButton x:Name="PART_OKButton" Text="OK" IconUri="/Toolkit.Content/ApplicationBar.Check.png"/>
                       <telerikPrimitives:ApplicationBarButton x:Name="PART_CancelButton" Text="Cancel" IconUri="/Toolkit.Content/ApplicationBar.Cancel.png"/>
                   </telerikPrimitives:ApplicationBarInfo>
               </telerikPrimitives:RadPickerBox.ApplicationBarInfo>
               <Grid Background="{StaticResource PhoneChromeBrush}">
                   <telerikInput:RadDateSelector x:Name="PART_Selector"/>
               </Grid>
           </telerikPrimitives:RadPickerBox>
       </ControlTemplate>

       <ControlTemplate x:Key="RadDatePickerControlTemplateDarkTheme" TargetType="telerikInput:RadDatePicker">
           <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
               HorizontalContentAlignment="Left"
               PopupOpenAnimation="{StaticResource OpenAnimation}"
               PopupCloseAnimation="{StaticResource CloseAnimation}"
               Header="{TemplateBinding Header}"
               HeaderTemplate="{TemplateBinding HeaderTemplate}"
               HeaderStyle="{TemplateBinding HeaderStyle}"
               ContentTemplate="{TemplateBinding EmptyContentTemplate}"
               PickerButtonStyle="{TemplateBinding PickerButtonStyle}" Background="#2D000000" Foreground="Black">

               <telerikPrimitives:RadPickerBox.ApplicationBarInfo>
                   <telerikPrimitives:ApplicationBarInfo x:Name="PART_AppBarInfo">
                       <telerikPrimitives:ApplicationBarButton x:Name="PART_OKButton" Text="OK" IconUri="/Toolkit.Content/ApplicationBar.Check.png"/>
                       <telerikPrimitives:ApplicationBarButton x:Name="PART_CancelButton" Text="Cancel" IconUri="/Toolkit.Content/ApplicationBar.Cancel.png"/>
                   </telerikPrimitives:ApplicationBarInfo>
               </telerikPrimitives:RadPickerBox.ApplicationBarInfo>
               <Grid Background="{StaticResource PhoneChromeBrush}">
                   <telerikInput:RadDateSelector x:Name="PART_Selector"/>
               </Grid>
           </telerikPrimitives:RadPickerBox>
       </ControlTemplate>

Then I have the following code in the PhoneApplicationPage_LayoutUpdated event

radDatePicker1.Template = App.Current.Resources["RadDatePickerControlTemplateWhiteTheme"] as ControlTemplate;

But the changes are not working. Could you please help me out here? I have a sample project, but couldn't figure out how to attach a zip file.

thanks,
Gilles

[Deyan]

Hi Gilles,

You can create a Style with TargetType=ToggleButton and with the appropriate settings and set it to the PickerButtonStyle property of the DateTimePicker control when you need. This will be enough for you to change the background color according to your requirements.

Take a look at the response to your support ticket regarding the same topic.

Best wishes,
Deyan
the Telerik team

[GJ Kuz]

Hi Deyan,

That worked like a charm. Thank you.

thanks,
Gilles

[Deyan]

Hello Gilles,

I am happy that my tips are useful. For now, I will consider this thread closed.

You can write back anytime you need further assistance or have feedback to share.

Greetings,
Deyan
the Telerik team

[Vikas]

Hi,
I need to give a background and Foreground color to Rad date Picker and TimePicker. But the Background and Foreground property is not making any change of color. I even tried it in Expression Blend , but the template is only for Expanded mode and not for default mode on page. 

[Deyan]

Hello Vikas,

In my previous post here I explain to Gilles that this should be done via a Style.

There is a property called PickerButtonStyle which accepts Style object targeting the ToggleButton type.

<Style TargetType="telerikPickerBox:PickerBoxToggleButton">
    <Setter Property="telerikCore:InteractionEffectManager.IsInteractionEnabled" Value="True"/>
    <Setter Property="Padding" Value="8, 8, 8, 7"/>
    <Setter Property="BorderThickness" Value="3"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikPickerBox:PickerBoxToggleButton">
                <Grid Background="Transparent" >
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Unchecked" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="EnabledBackground" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <ContentControl x:Name="EnabledContent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </Border>
                    <Border x:Name="DisabledBackground" IsHitTestVisible="False" Background="Transparent" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                        <ContentControl x:Name="DisabledContent" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The telerikPickerBox XAML prefix targets the Telerik.Windows.Controls.PickerBox namespace.

I hope this helps.

Kind regards,
Deyan
the Telerik team

[Vikas]

Thanks,
But I have already used a similar code, and it was working fine till the Trial version, Last week after installing the licensed version ,all my styling got affected and I had to re-do it. Now I am able to change background in EmptyContentTemplate but not when value is provided for both Telerik Datepicker and TimePicker.
My current styling code
 <telerikInput:RadDatePicker x:Name="dp_Date" PopupHeader="Date of booking"  Margin="3,0,0,0"
                                                Background="Blue" Foreground="Red"
                                                Width="280" Style="{StaticResource RadDatePickerStyleBlue}"  Value="12/02/2013"
                                                PopupHeaderTemplate="{StaticResource DataTemplate_DatePopupHeader}"
                                                EmptyContentTemplate="{StaticResource DataTemplate_EmptyDate_Blue}"
PickerButtonStyle="{StaticResource PickerButtonStyle}"   >

# the Background and Foreground Properties here make no changes.
# Following is the styling used in this control.

   <Style x:Key="RadDatePickerStyleBlue" TargetType="telerikInput:RadDatePicker">

                <Setter Property="SelectorStyle">
                    <Setter.Value>
                        <Style TargetType="telerikInput:RadDateSelector">
                            <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
                            <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" 
                                                        HeaderTemplate="{TemplateBinding HeaderTemplate}" 
                                                        HeaderStyle="{TemplateBinding HeaderStyle}" 
                                                        Header="{TemplateBinding Header}" 
                                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                        PopupCloseAnimation="{StaticResource CloseAnimation}" 
                                                        PopupOpenAnimation="{StaticResource OpenAnimation}" 
                                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                <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>
                                <Grid Background="#FF1F1F1F">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <ContentControl x:Name="PART_PopupHeader" ContentTemplate="{TemplateBinding PopupHeaderTemplate}" Content="{TemplateBinding PopupHeader}" FontWeight="SemiBold" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalContentAlignment="Left" Margin="24, 55, 0, 24" Grid.Row="0"/>
                                    <telerikInput:RadDateSelector x:Name="PART_Selector" AppointmentSource="{TemplateBinding AppointmentSource}" 
                                                              DayStepBehavior="{TemplateBinding DayStepBehavior}" ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                                              MonthStepBehavior="{TemplateBinding MonthStepBehavior}" Grid.Row="1"
                                                              Style="{TemplateBinding SelectorStyle}" Step="{TemplateBinding Step}" 
                                                              YearStepBehavior="{TemplateBinding YearStepBehavior}"/>
                                </Grid>
                            </telerikPrimitives:RadPickerBox>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplateSelector">
                    <Setter.Value>
                        <telerikInput:AppointmentTemplateSelector>
                            <DataTemplate>
                                <Grid>
                                    <Grid HorizontalAlignment="Right" Margin="2" VerticalAlignment="Top">
                                        <Ellipse Fill="{StaticResource PhoneAccentBrush}" Height="25" Width="25"/>
                                        <TextBlock FontSize="16" HorizontalAlignment="Center" Text="{Binding Appointments, Converter={StaticResource countConverter}}" VerticalAlignment="Center"/>
                                    </Grid>
                                    <StackPanel HorizontalAlignment="Left" Margin="4" MinHeight="100" VerticalAlignment="Bottom">
                                        <TextBlock FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="0,0,0,-8" Text="{Binding HeaderText}"/>
                                        <TextBlock Foreground="{StaticResource PhoneSubtleBrush}" FontSize="20" FontFamily="{StaticResource PhoneFontFamilyNormal}" Text="{Binding ContentText}"/>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </telerikInput:AppointmentTemplateSelector>
                    </Setter.Value>
                </Setter>

            </Style>
            <Style x:Key="PickerButtonStyle" TargetType="ToggleButton">
                <Setter Property="telerik:InteractionEffectManager.IsInteractionEnabled" Value="True"/>
                <Setter Property="Padding" Value="8, 8, 8, 7"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
                <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Unchecked"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Blue" Margin="{StaticResource PhoneTouchTargetOverhang}">
                                    <ContentControl x:Name="EnabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="White" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                                <Border x:Name="DisabledBackground" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" IsHitTestVisible="False" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                                    <ContentControl x:Name="DisabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="RadPickerBoxStyleBlue" TargetType="telerikPrimitives:RadPickerBox">
                <Setter Property="PopupOpenAnimation">
                    <Setter.Value>
                        <telerik:RadPlaneProjectionAnimation FillBehavior="Stop">
                            <telerik:RadPlaneProjectionAnimation.Easing>
                                <CubicEase EasingMode="EaseInOut"/>
                            </telerik:RadPlaneProjectionAnimation.Easing>
                        </telerik:RadPlaneProjectionAnimation>
                    </Setter.Value>
                </Setter>
                <Setter Property="PickerButtonStyle" Value="{StaticResource PickerButtonStyle}"/>
                <Setter Property="PopupHorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="PopupVerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerikPrimitives:RadPickerBox">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Row="0"  Style="{TemplateBinding HeaderStyle}"/>
                                <ToggleButton x:Name="PART_ActionButton" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          IsChecked="{Binding IsPopupOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                          telerik:InteractionEffectManager.IsInteractionEnabled="True" Grid.Row="1" Style="{TemplateBinding PickerButtonStyle}" 
                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                </ToggleButton>
                                <telerikPrimitives:RadWindow x:Name="PART_Popup" ApplicationBarInfo="{TemplateBinding ApplicationBarInfo}"
                                                             CloseAnimation="{TemplateBinding PopupCloseAnimation}" ContentTemplate="{TemplateBinding PopupContentTemplate}"
                                                             Content="{TemplateBinding PopupContent}" HorizontalOffset="{TemplateBinding HorizontalPopupOffset}"
                                                             HorizontalContentAlignment="{TemplateBinding PopupHorizontalContentAlignment}"
                                                             IsClosedOnBackButton="{TemplateBinding IsPopupClosedOnBackButton}" 
                                                             IsFullScreen="{TemplateBinding IsFullScreen}" 
                                                             IsOpen="{Binding IsPopupOpen, Mode=TwoWay,
                                                             RelativeSource={RelativeSource TemplatedParent}}" 
                                                             IsAnimationEnabled="{TemplateBinding IsPopupAnimationEnabled}"
                                                             OpenAnimation="{TemplateBinding PopupOpenAnimation}" 
                                                             Placement="{TemplateBinding PopupPlacement}" 
                                                             PlacementTarget="{TemplateBinding PopupPlacementTarget}" 
                                                             VerticalOffset="{TemplateBinding VerticalPopupOffset}" 
                                                             VerticalContentAlignment="{TemplateBinding PopupVerticalContentAlignment}"
                                                             WindowSizeMode="{TemplateBinding PopupSizeMode}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <!--Template used for date, Time and List Picker  Background="#FF1F1F1F"-->
            <DataTemplate x:Key="DataTemplate_DatePopupHeader">
                <Grid Background="#FF1F1F1F">
                    <TextBlock Text="{Binding}" Foreground="White" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="DataTemplate_EmptyDate_Blue">
                <Grid Background="#FF65BEED" Margin="-8" Height="50" Width="280">
                    <TextBlock Text="{Binding}" Foreground="White" Margin="5" />
                </Grid>
            </DataTemplate>

[Deyan]

Hi Vikas,

Thanks for writing back.

There is no difference between the Trial and the Dev versions in terms of functionality so you should not experience any difference in the behavior of your app when swapping between versions.

I have tried to implement your scenario with the styles you provided here and I do not seem to be able to reproduce any issues.

I am attaching the sample project I have used to implement the scenario. Feel free to modify it accordingly to demonstrate your case.

Regards,
Deyan
the Telerik team

[Vikas]

Hi Deyan,
Thanks for your support and the attached project sample. As mentioned in my earlier post , I can give background color when its Empty - 'Select time' is shown ; (By providing EmptyContentTemplate)
But I am not able to give its background color when value is provided to the control.

The attached image is of your code, just added value="00:00"  
 <telerikInput:RadTimePicker Value="00:00">
This makes the control no longer empty and removes the styling.

Sorry to trouble you again. But I am still at same problem as I need to change the background even when value is given.

[Deyan]

Hi Vikas,

In this case you should not use the EmptyContentTemplate to give the background of the control since, as you already saw, it is not visible when there is Value set on the control. You should restyle the entire control to apply a single background for its normal state, either with value or not, to achieve the behavior you want.

So to summarize,

use the EmptyContentTemplate to only define what you want to see when there's no value in the control in terms of text and use the Style I gave you here to define the background of the control. You should simply modify the visual states which set the background property. This works as expected on my side.

All the best,
Deyan
the Telerik team

[m0rg0t]

Have same problem like author of this topic.

But also when running example project from this theme, all works fine.

But in my wp7.1 project, when i copy code from sample project to page - background and foreground styling don't work.

[m0rg0t]

Control example with styling, which don't affect to control

<telerikInput:RadTimePicker x:Name="Time"
    Width="200" Margin="0,-8,0,0"
    Value="2013-01-01">
    <telerikInput:RadTimePicker.PickerButtonStyle>
        <Style TargetType="ToggleButton">
            <Setter Property="interactionEffects:InteractionEffectManager.IsInteractionEnabled" Value="True"/>
            <Setter Property="Padding" Value="8, 8, 8, 7"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid Background="Red">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Unchecked"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Blue" Margin="{StaticResource PhoneTouchTargetOverhang}">
                                <ContentControl x:Name="EnabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="White" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                            <Border x:Name="DisabledBackground" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" IsHitTestVisible="False" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                                <ContentControl x:Name="DisabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerikInput:RadTimePicker.PickerButtonStyle>
</telerikInput:RadTimePicker>

[Deyan]

Hello,

Check the TargetType for the Style and the ControlTemplate. It should be

TargetType="telerikPickerBox:PickerBoxToggleButton"

All the best,
Deyan
the Telerik team

[m0rg0t]

After changing to telerikPickerBox:PickerBoxToggleButton

<Style TargetType="telerikPickerBox:PickerBoxToggleButton" x:Key="PickerBoxToggle">
    <Setter Property="telerik:InteractionEffectManager.IsInteractionEnabled" Value="True"/>
    <Setter Property="Padding" Value="8, 8, 8, 7"/>
    <Setter Property="BorderThickness" Value="3"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikPickerBox:PickerBoxToggleButton">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Unchecked" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="EnabledBackground" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <ContentControl x:Name="EnabledContent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </Border>
                    <Border x:Name="DisabledBackground" IsHitTestVisible="False" Background="Transparent" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                        <ContentControl x:Name="DisabledContent" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and applying this style:

<telerikInput:RadTimePicker x:Name="Time"
    Width="200" Margin="0,-8,0,0"
    Value="2013-01-01"
    PickerButtonStyle="{StaticResource PickerBoxToggle}">

don't get any changes in control appearance (example in attach).

[Deyan]

Hello,

It seems that there is something specific to your project that prevents you from achieving the desired behavior. Can you please send us a working sample which we can use to reproduce the behavior on our side and see how we can assist you further?

Note that you will have to open a new support ticket in order to be able to attach your project.

Kind regards,
Deyan
the Telerik team

[m0rg0t]

Thank's.

In support ticket I attached sample project with this issue (just empty windows phone 7.1 app with control and style for it).

So it seems it's possible to reproduce this bug.

Also if i copy XAML code from sample app in this theme, style don't work on it too, for example:

<telerikInput:RadTimePicker>
    <!--<telerikInput:RadTimePicker.EmptyContentTemplate>
        <DataTemplate>
            <Grid Background="#FF65BEED" Margin="-8" Height="50" Width="280">
                <TextBlock Text="{Binding}" Foreground="White" Margin="5" />
            </Grid>
        </DataTemplate>
    </telerikInput:RadTimePicker.EmptyContentTemplate>-->
    <telerikInput:RadTimePicker.PickerButtonStyle>
        <Style TargetType="ToggleButton">
            <Setter Property="interactionEffects:InteractionEffectManager.IsInteractionEnabled" Value="True"/>
            <Setter Property="Padding" Value="8, 8, 8, 7"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Unchecked"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Blue" Margin="{StaticResource PhoneTouchTargetOverhang}">
                                <ContentControl x:Name="EnabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="White" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                            <Border x:Name="DisabledBackground" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" IsHitTestVisible="False" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                                <ContentControl x:Name="DisabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerikInput:RadTimePicker.PickerButtonStyle>
</telerikInput:RadTimePicker>

In empty wp7.1 app looks like in attached image (first control).

[Deyan]

Hi,

Please refer to the support ticket you have sent us regarding the same topic.

Thanks for your time.

Greetings,
Deyan
the Telerik team

[m0rg0t]

Support ticket 678054

Seems problem find:
styling for control works, after I update dll's using RadControls_for_WindowsPhone7_2013_1_0322_DEV_hotfix_Nokia.zip