Setting Style without Blend

[Erik]

Is there an easy way to set the background color without setting the style templates of the control inside the TimePicker (Or using Blend)? I was reading the API reference and it said to set the background color of the TimePickerBox. Is there an example of the XAML that should be used?

[Georgi]

Hi Erik,

Thank you for contacting us.

The background of the popup RadTimeSelector control is set to an absolute value in the control template. So, you will need to specify a custom template in order to modify the background of the selector:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="telerikInput:RadTimePicker">
            <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}"
                                            PickerButtonStyle="{TemplateBinding PickerButtonStyle}">
                <telerikPrimitives:RadPickerBox.PopupContent>
                    <Grid Background="{StaticResource PhoneChromeBrush}">
                        <telerikInput:RadTimeSelector x:Name="PART_Selector"
                                                        ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                                        AppointmentSource="{TemplateBinding AppointmentSource}"/>
                    </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>

This behavior however is not very intuitive and we will expose an additional SelectorStyle property which may be used to specify the desired look-and-feel of the picker's popup part.

I would like to thank you for your feedback and for bringing our attention to this issue - I have updated your Telerik points for your time.

Do not hesitate to write us back should you have any question/problem with our tools.

Regards,
Georgi
the Telerik team

[Erik]

I think I was a little light on the details, but what I was looking for was the color of the control before it's clicked. Seems no matter what i set it as, it's always white. This is the default color at rest before any click. The other time controls seem to adhere to the color I set in the background property, but timepicker is always white. Any thoughts?

[Victor]

Hello Erik,

 Thank you for the questions.
You can use the PickerButtonsStyle property. For example:

<telerikInput:RadTimePicker>
    <telerikInput:RadTimePicker.PickerButtonStyle>
        <Style TargetType="ToggleButton">
            <Setter Property="Background"
                    Value="Red"/>
        </Style>
    </telerikInput:RadTimePicker.PickerButtonStyle>
</telerikInput:RadTimePicker>

Please write again if need further assistance.

Best wishes,
Victor
the Telerik team

[Erik]

Perfection, thanks!