Customizing Calendar Control in Silverlight 3 Application: Part I



Introduction

In this article we will customize the Calendar control, this is going to be a long documents so I decided customizing some parts at a time.

Creating Silverlight 3 Application

Open up Blend 3 and create a Silverlight 3 Application. Name it as MyCalendarInSL3P1.

1.gif

Go ahead and draw a Calendar into your application.

To customize it, right click on it and you will see a menu item called Edit Template.

2.gif
 
Now there is another option called Edit Additional Templates. If you select it you will find three Styles to be edited. Such as: Calendar Button Style, Calendar Day Button Style and Calendar Item Style.

3.gif
 
We will proceed with the Edit Calendar Item Style in this article. Select Edit Calendar Item Style and Edit a copy.

4.gif
 
As soon as you select Edit a Copy, a dialog pops up saying the Style Resource. Name it as MyCalendarItemStyle.

5.gif
 
After you press OK, you are in Edit Template mode of the Calendar Item. See the Object and Timeline Pane to see the hierarchy of controls.

6.gif
 
Suppose you don't want the Next and Previous Button.

Delete the NextButton and the PreviousButton. Your calendar will look like below.

7.gif
 
Now we will change the Day Button Style to look something good.

Go ahead and exit from this edit template mode and again right click on Calendar and select Edit Calendar Day Button Style and select Edit a copy.

8.gif
 
Name the Style as MyCalendarDayButtonStyle when the dialog pops up.

9.gif
 
Now if you see in your Objects and Timeline Pane you will find the following hierarchy of controls.

10.gif
 
First, we will change the Focus Visual. By default the Stroke is LightBlue. We will change it to Red. So that when you select the day the border of your day will be Red. Similar to the following:

11.gif
 
Now we will change the Background. Notice that when you select the Background Rectangle you are not allowed to change the Brushes. You can override it by selecting the small yellow mark and a new set of options will pop up.

12.gif
 
Select Reset and now you can change any color you want. I have made it to light red. Looks something similar to the following:

13.gif
 
Now if you want to change the Selected Background Color then go ahead follow the above steps and change it. I have changed it to yellow. 

14.gif
 
Now we change today's background. By default it's gray in color. I have changed it to Violate. This time you are allowed to change it. So go ahead and change it.
 
That's it you are customized a lot for your own style. We will see some more customizations in the next article.

Enjoy Coding.

15.gif
See the attached zip for the generated XAML code for your reference.