.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Customize Calendar Control In Silverlight Using Blend 3

Posted By:Diptimaya Patra       Posted Date: April 10, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Customize Calendar Control In Silverlight Using Blend. 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.
 

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.

You can also download the sample code used in above example.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend