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
Open up Blend 3 and create a Silverlight 3
Application. Name it as MyCalendarInSL3P1.
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.
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.
will proceed with the Edit Calendar Item Style in this article. Select Edit
Calendar Item Style and Edit a copy.
soon as you select Edit a Copy, a dialog pops up saying the Style Resource. Name
it as MyCalendarItemStyle.
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.
you don't want the Next and Previous Button.
Delete the NextButton and
the PreviousButton. Your calendar will look like below.
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.
the Style as MyCalendarDayButtonStyle when the dialog pops up.
if you see in your Objects and Timeline Pane you will find the following
hierarchy of controls.
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:
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
Reset and now you can change any color you want. I have made it to light red.
Looks something similar to the following:
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.
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
That's it you are customized a lot for your own style. We will see
some more customizations in the next article.
the attached zip for the generated XAML code for your reference.
You can also download the sample code used in above example.