RadDatePicker & Light theme

[Efthymios]

Hello,

I have a small problem that I must somehow solve.
I have a Page that contains a dark background image.
When I insert a RadDatePicker into that page and the theme of the phone is Dark, then the button is getting displayed well (white button, white text, etc).
But, when I change the Theme on the phone to the Light one, then the RadDatePicker changes the color of the button and the text to black one. This is correct if you don't have a background image on the application, but if you have, you can not see nothing (please look attached image - inside the circle is a RadDatePicker).

Is it possible that I can somehow change the color of the datepicker?

Thank you very much.

Efthymios Kalyviotis

[Todor]

Hi Efthymios,

Thank you for contacting us.

To edit the color of the text inside RadDatePicker, you can use the PickerButtonStyle property. As the name implies, the style that you set will be used for the PickerButton which is of type ToggleButton. For example, here is the style that you should use if you want to set the color of the text to be Red and keep everything else as it is:

<Style TargetType="ToggleButton">
    <Setter Property="telerikCore: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.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
                                    </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="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </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>

I hope this information helps. Let me know if you need additional assistance.


Greetings,
Todor
the Telerik team

[Efthymios]

Perfect!!!
I just deleted the below line and worked like a charm:
<Setter Property="telerikCore:InteractionEffectManager.IsInteractionEnabled" Value="True"/>

It was giving me the following error:
Failed to create a 'System.Windows.DependencyProperty' from the text 'telerikCore:InteractionEffectManager.IsInteractionEnabled'. [Line: 34 Position: 21]

Now, I have 2 small questions and the 2nd one is the most critical one:
1) I imagine that the color of the Header must be changed inside the HeaderStyle property as I understand. How do I?
2) Is there any kind of tutorial or an article that explains how these styles are handled (for all controls)? I need to learn how to change them by myself. Perhaps, the day after, I will need to do the same for an other telerik control and I don't want to continuously ask on the forums (like a dummy).

Thank you very much.

Efthymios Kalyviotis

[Todor]

Hi Efthymios,

The message that you received is most likely caused because telerikCore was not a recognized prefix, so you can add it to your page:

xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"

As to your questions, yes, to change the color of the header, you need the HeaderStyle property:

<Style TargetType="ContentControl">
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
    <Setter Property="Margin" Value="12,0,0,-4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

As a customer you have full access to our source code. It is located in the Downloads section of your account. Once you have it, you can easily find the styles for each of the controls. In the Themes folder, there is a file for each of the controls, containing all styles that they use.


Regards,
Todor
the Telerik team