Styling the RadDatePicker

14 posts, 0 answers
  1. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Dec 2012

    Posted 28 Dec 2012 Link to this post

    Hi,

    I am tring to change the default look of RadDatePicker. For instance, I need to change background color and Font.

    I tried to copy Style from RadDatePicker with Blend for VS 2012. (Object -> Edit Style -> Edit a Copy)
    But I've got an Error "Copy Style failed"... so after that I looked into the xaml and there was new style generated.
    Unfortunately there are syntax errors... For Instance, 
    There was generated,
    <Setter Property="HeaderStyle" Value="{StaticResource HeaderStyle}"/>
    But there are no style with the name HeaderStyle generated.

    Please advice how I could change the background color and Font for RadDatePicker.
    May be there is a better way how it can be done...

    Thanks in advance!
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 02 Jan 2013 Link to this post

    Hi Vladimir,

    We'll need a bit more time to handle your request. We'll provide you with an answer tomorrow the latest. Thank you for the patience and cooperation. 

    Kind regards,
    Kiril Stanoev
    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.
  3. DevCraft banner
  4. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 03 Jan 2013 Link to this post

    Hello Vladimir,

    I've created a sample project where I've extracted the style of RadListPicker. Please take a look at it and let me know if you find anything unclear. I'd be glad to assist you further. 

    Regards,
    Kiril Stanoev
    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.
  5. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Dec 2012

    Posted 03 Jan 2013 Link to this post

    Thanks for the upload. I did review the Solution. May be I missed something or didn't read it carefully but I've not found the way how I can do what I need with your code.

    That I've been trying to achieve.
    I have:

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <telerikInput:RadDatePicker FontSize="51.187" Background="Red" Foreground="Lime"/>
    </Grid>

    According to the app mockup we need to change color scheme of RadDatePicker.
    Namely, we have to change Background Color and Foreground Color only for initial button "Please select the date".(not for popup window)
    I've tried to set already Background and Foreground Properties... does  not work.
    The Issue that I have currently: I cannot make a copy of style of RadDatePicker. Blend throws exception...
    It would help me a lot you could make a copy of style for RadDatePicker or give me a hint how I can change the background of button of RadDatePicker control.

    PickerButtonStyle="{StaticResource ...}" also does not work...
    I am getting:
    Error HRESULT E_FAIL has been returned from a call to a COM component.
       at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
       at MS.Internal.XcpImports.FrameworkElement_MeasureOverride(FrameworkElement element, Size availableSize)
       at System.Windows.FrameworkElement.MeasureOverride(Size availableSize)
       at System.Windows.FrameworkElement.MeasureOverride(IntPtr nativeTarget, Double inWidth, Double inHeight, Double& outWidth, Double& outHeight)

    Thanks in advance!
  6. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 08 Jan 2013 Link to this post

    Hi Vladimir,

    Here's a copy of the style resources for RadDatePicker:

    <telerikCore:RadPlaneProjectionAnimation x:Key="OpenAnimation" Axes="X" StartAngleX="-90" EndAngleX="0" Duration="0:0:.2">
           <telerikCore:RadPlaneProjectionAnimation.Easing>
               <ExponentialEase Exponent="4" EasingMode="EaseOut"/>
           </telerikCore:RadPlaneProjectionAnimation.Easing>
       </telerikCore:RadPlaneProjectionAnimation>
     
       <telerikCore:RadPlaneProjectionAnimation x:Key="CloseAnimation" Axes="X" StartAngleX="0" EndAngleX="90" Duration="0:0:.2">
           <telerikCore:RadPlaneProjectionAnimation.Easing>
               <ExponentialEase Exponent="4" EasingMode="EaseIn"/>
           </telerikCore:RadPlaneProjectionAnimation.Easing>
       </telerikCore:RadPlaneProjectionAnimation>
     
      <telerikInput:EnumerableToCountConverter x:Key="countConverter"/>
     
       <Style x:Key="HeaderStyle" TargetType="ContentControl">
           <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
           <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
           <Setter Property="Margin" Value="12,12,12,-4"/>
           <Setter Property="HorizontalAlignment" Value="Left"/>
       </Style>
     
    <Style TargetType="telerikInput:RadDatePicker">
           <Setter Property="SelectorStyle">
               <Setter.Value>
                   <Style TargetType="telerikInput:RadDateSelector">
                       <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
                       <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"
                                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                       PopupOpenAnimation="{StaticResource OpenAnimation}"
                                                       PopupCloseAnimation="{StaticResource CloseAnimation}"
                                                       Header="{TemplateBinding Header}"
                                                       HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                       HeaderStyle="{TemplateBinding HeaderStyle}"
                                                       ContentTemplate="{TemplateBinding EmptyContentTemplate}"
                                                       PickerButtonStyle="{TemplateBinding PickerButtonStyle}">
                           <telerikPrimitives:RadPickerBox.PopupContent>
                               <Grid Background="{StaticResource PhoneChromeBrush}">
                                   <Grid.RowDefinitions>
                                       <RowDefinition Height="Auto"/>
                                       <RowDefinition/>
                                   </Grid.RowDefinitions>
                                   <ContentControl
                                       Margin="24, 55, 0, 24"
                                       FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                       FontWeight="SemiBold"
                                       FontSize="{StaticResource PhoneFontSizeMedium}"
                                       Grid.Row="0"
                                       x:Name="PART_PopupHeader"
                                       Content="{TemplateBinding PopupHeader}"
                                       ContentTemplate="{TemplateBinding PopupHeaderTemplate}"
                                       HorizontalContentAlignment="Left"
                                       />
                                   <telerikInput:RadDateSelector
                                       Grid.Row="1"
                                       x:Name="PART_Selector"
                                       Step="{TemplateBinding Step}"
                                       DayStepBehavior="{TemplateBinding DayStepBehavior}"
                                       MonthStepBehavior="{TemplateBinding MonthStepBehavior}"
                                       YearStepBehavior="{TemplateBinding YearStepBehavior}"
                                       ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                       AppointmentSource="{TemplateBinding AppointmentSource}"
                                       Style="{TemplateBinding SelectorStyle}"/>
                               </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>
           </Setter>
            
           <Setter Property="ItemTemplateSelector">
               <Setter.Value>
                   <telerikInput:AppointmentTemplateSelector>
                       <DataTemplate>
                           <Grid>
                               <Grid HorizontalAlignment="Right"
                               VerticalAlignment="Top"
                               Margin="2">
                                   <Ellipse Width="25"
                                       Height="25"
                                       Fill="{StaticResource PhoneAccentBrush}"/>
                                   <TextBlock Text="{Binding Path=Appointments, Converter={StaticResource countConverter}}"
                                       FontSize="16"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"/>
                               </Grid>
     
                               <StackPanel MinHeight="100" Margin="4"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Bottom">
                                   <TextBlock Text="{Binding Path=HeaderText}" FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="0,0,0,-8"/>
                                   <TextBlock Text="{Binding Path=ContentText}" FontSize="20"  Foreground="{StaticResource PhoneSubtleBrush}" FontFamily="{StaticResource PhoneFontFamilyNormal}"/>
                               </StackPanel>
                           </Grid>
                       </DataTemplate>
                   </telerikInput:AppointmentTemplateSelector>
               </Setter.Value>
           </Setter>
       </Style>

    Let me know should you need further assistance with using the styles.

    Kind regards,
    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.
  7. İlke
    İlke avatar
    1 posts
    Member since:
    Dec 2012

    Posted 05 Aug 2013 Link to this post

    Hello, 

    I have the same problem. Altough I apply the style you have provided, I still cannot edit the foreground and border brush properties in light theme. How can I set them to a certain color, while it is not selected, in light theme?

    Thanks in advance,

    Ilke
  8. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 08 Aug 2013 Link to this post

    Hi Vladimir,

    Thanks for writing back.

    Can you please clarify what do you mean with "edit the foreground and border brush in light theme"? These properties are always set to a value defined in the style. If you want them to have different colours when themes change, you should use resource dictionaries and change them accordingly when the theme changes. There is already such mechanism in the Windows Phone OS which defines a set of static resources which are updated according to the theme chosen by the user. For instance the {StaticResource PhoneContrastBackground} is such one.

    If you think that I do not understand you correctly, please open a new support ticket and attach your project with further details on how to reproduce the issue so that I can see how I can help.

    Regards,
    Deyan
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  9. Hung
    Hung avatar
    3 posts
    Member since:
    Jul 2013

    Posted 07 Nov 2013 Link to this post

    well I think people in this thread have the same issue with me and found no correct answer. The RadDatePicker when display in the screen it always have the transparent background with white text "Select date". All I want to change the "Select date" to black and make the control background as white but no matter what I try: foreground, background,.. no things change. When I say RadDatePicker I mean what appear in the screen which display the selected value.
    Thanks!
  10. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 12 Nov 2013 Link to this post

    Hello Hung,

    Thanks for writing.

    We have identified the reason for not being able to override the default appearance by just setting the corresponding properties. They are not template-bound in the default style.

    We will revisit the styles and address these issues but we will need some time to make sure no breaking changes are introduced in existing apps.

    For the time being, you can simply do this by using the PickerButtonStyle property and assign a style targeting the ToggleButton type which sets the needed properties.

    I hope this helps.

    Regards,
    Deyan
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  11. Binu
    Binu  avatar
    8 posts
    Member since:
    Apr 2012

    Posted 13 Dec 2013 Link to this post

    is that fixed?, i was not able to achieve by trying workaround. 
    please help
  12. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 17 Dec 2013 Link to this post

    Hi Binu,

    Thanks for writing.
    Please consider this XAML snippet:
    <input:RadDatePicker VerticalAlignment="Center">
        <input:RadDatePicker.PickerButtonStyle>
            <Style TargetType="ToggleButton">
                <Setter Property="Background"
                        Value="White"/>
                <Setter Property="Foreground"
                        Value="Black"/>
            </Style>
        </input:RadDatePicker.PickerButtonStyle>
    </input:RadDatePicker>


    Regards,
    Victor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  13. Binu
    Binu  avatar
    8 posts
    Member since:
    Apr 2012

    Posted 17 Dec 2013 Link to this post

    thanks it worked in preview, but when i build solution its gone!, what could be wrong?
  14. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 18 Dec 2013 Link to this post

    Hello Binu,

    I am afraid I can't be sure what is happening in your app. Can you please post a support ticket and attach your app in a zip file so that I can debug it?

    Regards,
    Victor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  15. Lalit
    Lalit avatar
    1 posts
    Member since:
    Sep 2014

    Posted 23 Jun 2015 Link to this post

    Better to change the application level default selection/accent brush. It will applied in all controls of app.

    Open App.xaml.cs inside constructor paste below code,

    (App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(255,119, 177,159); // Colors.Red;

Back to Top
DevCraft banner