Styling a WPF Toolkit Calendar control

Mar 20, 2009 at 10:37 AM
Has anyone been able to style the calendar control? Ive been going round in circles trying to achieve this. suggests this is easy by using blend to edit the control templates but I have not been able to do this successfully. Ultimately Im trying to achieve a similar look to the Expresion Dark style for the calendar used in the silverlight toolkit.

Mar 24, 2009 at 11:26 AM
Still no one any ideas?

Ive tried to fully style the calendar using blend but I recieve an exception when trying to edit the control part PART_CalendarItem.  When i take the generic style from the toolkit an modify it, the changes are not shown in the control itself. If i add an x:Key to the Calendar and CalendarItem styles i can modifiy these but i am struggling to get anything to work with CalendarDayButton and CalendarButton styles.

Any help whatsoever would be appreciated.
Mar 24, 2009 at 3:35 PM
I'm having exactly the same problem. I have worked out how to change the Calendar itself (the background color and border), but not any of the internal elements. I've been trying in VS mainly, but had a go at doing it in Blend. I have copied the generic style into my resources and added the various xml name spaces to both that and my window, but still no luck. Like you say WindowsClient shows an example, and just brushes over the fact that there is a designer for VS and Blend. I cannot find anywhere on the web about how to style the calendar control, or how to integrate the designer Dales to use them.

I just thought I'd show a little solidarity rather than just waiting for someone to reply to your thread. Also hopefully the more people who are having this problem, the more likely its going to get answered.
Mar 24, 2009 at 4:07 PM
Cheers for the support dpgregory. Fingers crossed on someone being able to give some insight into this.

If you add a front end to the WPFToolkit source and change the generic.xaml theme you can get a peek of what your calendar control could look like. How frustrating!
Mar 24, 2009 at 11:32 PM
Hi devman81 & dpgregory -

I would be more than happy to help you both with your Styling issues. First off, Blend will not get you as far as you would like in this instance because of how the Control was designed. You will have to use the Style Properties exposed by the Controls rather applying implicit Styles. If you copy all the Styles from the Toolkit source (in generic.xaml) and modify them however you please then assign them each an  x:key, you can assign the Styles to the Style Properties of the Control.
For example:  

Style="{StaticResource BlueCal}"
CalendarItemStyle="{StaticResource RedCalItem}"
CalendarDayButtonStyle="{StaticResource GreenCalDayButton}"
CalendarButtonStyle="{StaticResource PurpleCalButton}"/> 

Hopefully this response proves helpfull. Please let us know if you have any further difficulties - we want to make you can Style these Controls :-)

-Eric, MSFT
Mar 25, 2009 at 9:12 AM
Edited Mar 25, 2009 at 9:25 AM
I had figured this out after emailing Samantha which i guess is sods law, then codeplex was down so i couldn't post. I am delighted to receive such quick response from Samanth and yourself Eric, much appreciated. 

I achieved the same result with something similar which would be applied to all calendar controls with the following

   <Style TargetType="Toolkit:Calendar">  
        <Setter Property="CalendarDayButtonStyle" Value="{StaticResource DayButtonStyle}"/> 
        <Setter Property="CalendarButtonStyle" Value="{StaticResource ButtonStyle}"/>



I just couldnt find a way of hooking in the button styles as these style properties are not set in calendar style in generic.xaml

Once again many thanks for your assistance.

Mar 4, 2010 at 9:29 PM

I was able to copy the styles over but in Blend I get an exception when I try to view the style template:

The animation(s) applied to the 'Visibility' property calculate a current value of 'Collapsed', which is not a valid value of the property.

(also why can't I copy and paste an error message in Blend, am I missing something or is it just a UI limitation?)

Funny enough the link below seems to imply styling the datepicker is a piece of cake (though without actually explaining it):

                        <VisualState x:Name="CalendarButtonUnfocused">
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
Mar 5, 2010 at 5:10 PM

I was finally able to get this working.  It was a bit tricky but as long as you are just applying the CalendarStyle template it works without too much problem.  I still can't edit any of the other templates in a WPF project, but that is ok I only wanted to specify the default template.  The reason for that is when using the datepicker in XP, by default the calendar popup looks different depending on the user's theme, with the Classic and Standard themes the date button along the top is exceptionally hard to read.  By bringing in the default style for the calendar and setting it explicitly it forces it to look the same in all situations.


Apr 28, 2010 at 4:08 PM

Does anyone have a full working example of this?  I try to pull in the default style of the calendar in a ResourceDictionary but get all types of errors regarding the VisualStateManager when I go to run it.