RadDatePicker break when copying the default style

[Louis]

Hi,

I want to be able to redefine the default style of the RadDatePicker to make it look like the rest of our components.

To do so, I put a RadDatePicker in my application, I clicked on it via the 'Document Outline' and chose Edit template -> Edit a copy. I then noticed that the RadDatePicker was now experiencing an issue when I "zoom out" to the "Decade" view : If I click on the left arrow (-10 years) or the right arrow (+10 years), the header text correctly changes (2000 -> 1990 / 2000 -> 2010) but the displayed years in the "calendar" section of the date picker aren't affected by the change. I get the same problems if you zoom out to the "hundred years" view.

Here is the simplest project I could put together to show the issue : https://drive.google.com/open?id=1d_GcDKeUfdmifYbo6KedukOIKtyHSiVo

Here are some screenshots of the problem : https://drive.google.com/open?id=182PK161CCZc_1k4m9rogxl_lSXIF8Lc1

Here are the repro steps :

1. Create a new project

2. Add 2 RadDatePicker

3. Select one of the two RadDatePicker, Edit template -> Edit a copy

4. Notice described issue

I hope this is enough for you to help me with this issue, I guess it must be something missing in the copied style that breaks this mecanism.

Thank you for your time :)

Louis

 

 

[Stefan]

Hi Louis,

Thanks for the detailed description of the issue you are experiencing.

Indeed, not all needed elements seem to be copied with such an approach. I have modified the provided sample with the default template of the control and it seems to be working as expected. Can you please check it out?

Feel free to approach me in case further assistance is needed.

Regards,
Stefan
Progress Telerik

[Louis]

Hi Stefan,

Thank you for the very rapid answer.

It works like a charm with the added missing parts. :)

Thank again, have a good day!

Louis

[Louis]

Hi Stefan,

If i use the provided template in your project I do get a working dropdown, but I don't get to style it the way I want. The concept is, when I use the "Edit a copy" function it breaks the RadDatePicker but it also exploses the style of every component so that I can fully style the component.

The code sample you provided to me does que the RadDatePicker in a functional state but doesn't explose all component, it let's them behind a Télérik template that I can't seem to find the source code for.

For instance, in the "navigation" part of the "RadCalendarStyle", instead of having the complete style for both left and right repeat button and the header central button, I have this :

<RepeatButton x:Name="MoveLeft" Grid.Column="0" Style="{StaticResource MoveLeftButtonStyle}"/>
<Button x:Name="Header" Grid.Column="1" Style="{StaticResource CalendarHeaderButton}"/>
<RepeatButton x:Name="MoveRight" Grid.Column="2" Style="{StaticResource MoveRightButtonStyle}"/>

Now I don't know how to get a valid version of the StaticResource "CalendarHeaderButton" that won't break the RadDatePicker and this is a part of what I'm trying to re-style in the RadDatePicker.

Can you please explain to me how to get the CalendarHeaderButton proper style? F12 doesn't do the job to find this resource :/

Thank you for your time!

Louis

[Louis]

After testing it to see that it worked, I tried styling it and got some issues. See next post.

[Stefan]

Hi Louis,

Thanks for the update.

A possible approach to check the default Style defined for a given element would be to check it out in the relevant theme file located in the Themes folder in your local installation. The topic is covered in details in the Editing Control Templates, Styling the Controls and Setting a Theme help articles. Can you please check them out? Also, can you please clarify what specific issues are you experiencing when styling the control?

Regards,
Stefan
Progress Telerik

[Louis]

Hi Stefan,

Sorry, i'll try to be more specific in my questions.

Thank you for pointing me to the "Editing control templates" link. I did manage to find the style that had the key "CalendarHeaderButton" in one of the office black theme files.

So here's a recap of my problem.

What I want to do : Style the RadDatePicker to fit with the style of other compenent in my application.

The issue i am having : I can't modify the "CalendarHeaderButton" style witouth getting the issue mentioned in my first question, beeing that when I change the decade, the calendar section doesn't update (see first post for more details).

What I tryied so far :

1. Making the style file using the "Edit a copy" technique I mentionned in post 1. It resulted in the RadDatePicker not working properly.

2. Using the template you provided to me. The RadDatePicker was behaving properly, but when I try to modify the header of the date picker (x:name="Header" in border x:name = Navigation), I saw that the "exploded" style of this header button was not there. Instead, it was pointing to a static ressource named "CalendarHeaderButton". I then asked you how to get the content of this static resource so I could copy/paste it instead of using this static resource in order to take it appart and modify it to my taste.

3. You pointed me to the correct file, so I took the "CalendarHeaderButton" exploded style code from the file "Telerik.Windows.Control.Input.xaml" and copied it inside the style of the header button. Just to make sure i'm clear, instead of this :

<Button x:Name="Header" Grid.Column="1" Style="{StaticResource CalendarHeaderButton}"/>

I instead have this now :

<Button x:Name="Header" Grid.Column="1">
   <Button.Style>
      <Style TargetType="Button">
        <Setter Property="Height" Value="22"/>
        <Setter Property="Margin" Value="3"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>

                .............(here is the full code but I feel like you don't need it all copied in this post).....
            </Setter.Value>
        </Setter>
    </Style>
 </Button.Style>
</Button>

With this copied directly from the static resource I found in the theme file, the RadDatePicker now has the same issue described in post 1; changing the decade doesn't affect the calendar section.

There is clearly something missing in the template of the style of the CalendarHeaderButton that the RadDatePicker needs, but there is no way for me of knowing what it is.

So my solutions are :

1. Ask you to provide me with a version of the exploded style of the RadDatePicker that doesn't break it.

2. Use the WPF standard datepicker. Which would be acceptable if there is no way of styling the RadDatePicker to this extent witouth breaking it.

Again, thank you for your time, it's very appreciated! :)

Louis

 

 

[Stefan]

Hello Louis,

Thank you for the detailed explanation of the used approach and your inquiry in general.

I modified the previous sample as per your description and again, on my end the control behaves as expected. Attached to my reply you can find the modified project. As you can see, the copied Style from the theme file is placed directly in the Button with x:Name="Header". Can you please check it out and let me know in case I am missing something?

Regards,
Stefan
Progress Telerik