Change foreground and background colour of DatePicker

3 posts, 1 answers
  1. Gian Paolo Santopaolo
    Gian Paolo Santopaolo avatar
    13 posts
    Member since:
    Mar 2010

    Posted 08 Mar 2013 Link to this post

    HI
    I'm having some trouble trying changing the default foreground of a DatePicker?
    I followed the instructions of this thread but nothing happens http://www.telerik.com/community/forums/windows-phone-8/datepicker-and-dateselector/how-to-change-the-foreground-colour-of-datepicker-control-in-windows-phone-8-app.aspx

    I also edited the whole style of the control thanks to this post http://www.telerik.com/community/forums/windows-phone-8/datepicker-and-dateselector/styling-the-raddatepicker.aspx  another time unsuccessfully?

    Please can someone tell how to change foreground and background color of this control?????

    Here is a sample to reproduce the issue:

    <
    telerikInput:RadDatePicker HorizontalAlignment="Left" Margin="150,66,0,0" Grid.Row="8" VerticalAlignment="Top" PickerButtonStyle="{StaticResource TestPickerBoxStyle}"/>

    <Style TargetType="telerikPickerBox:PickerBoxToggleButton" x:Key="TestPickerBoxStyle">

    <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}">-->

    <Border x:Name="EnabledBackground" Background="Green" BorderBrush="Red" 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}"/>-->

    <ContentControl x:Name="EnabledContent" Foreground="Yellow" 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>

    <Setter Property="BorderBrush" Value="#FFF03232"/>

    <Setter Property="Foreground" Value="#FF4FEE2C"/>

    <Setter Property="Background" Value="#FFF2FD0E"/>

    </Style>

  2. Gian Paolo Santopaolo
    Gian Paolo Santopaolo avatar
    13 posts
    Member since:
    Mar 2010

    Posted 08 Mar 2013 Link to this post

    Solution is in the VisualStates!
  3. DevCraft banner
  4. Answer
    Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 11 Mar 2013 Link to this post

    Hello Gian,

    Yes, the foreground and the background are defined by the VisualStates so you will need to update them in order to change these properties.

    Greetings,
    Deyan
    the Telerik team
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top