Customizing Check Box Control In Silverlight 3 Using Blend 3

No.of Views2124
Bookmarked0 times
Downloads 
Votes0
By  dpatra   On  16 Feb 2010 00:02:01
Tag : Silver Light and XAML , How to
Customizing Check Box Control In Silverlight 3 Using Blend 3
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 Introduction
In this article we will customize the Check Box.

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

Image Loading....



Go ahead and add a Check Box into your application. Give the Content Mails.
Here is a basic idea what we are going to do. We will add three Text Displays such as:
• Select All
• None
• Select Some

Right Click on the Check Box and select Edit Template and then Edit a Copy:

Image Loading....


Now give a Style Name when it asks for Create Style Resource:

Image Loading...

Here is the Hierarchical Control Structure, how a Check Box is constructed:

Image Loading...

Delete the CheckIcon Path from the structure.
Now add three Text Blocks to the Second Grid.

Image loading...

Assign the Content property of Text Block as Select All, None and Select Some.

For all the rectangles design according to the TextBlocks width.
Now If you could see the Object and Timeline Pane you will see like the following:

Image Loading...

The design of the Checkbox will look like the following:

Image loading....

Now we will do the Animation for different States. Go ahead and find the States Pane; if it is not opened open it and you will see the following:

Image Loading...

We will change the CheckStates animations:
Here is the idea; we will display the value None when it is unchecked and give the value All when Checked and for InDeterminate we will use Some.


Unchecked Animation


First select the Unchecked; now your recording will be on for the particular animation. As discussed above we will display “None” here. So change the alpha of other two TextBlocks to value 0.


Checked Animation


Display the TextBlock “All” and change the alpha of the other two TextBlocks to value 0.


Indeterminate Animation


Display the TextBlock “Some” and change the alpha of the other two TextBlocks to value 0.

Now go ahead and test your application. You will see both Checked and Unchecked States but the InDeterminate State is missing.
To activate Indeterminate you need to set true to the Property IsThreeState as follows:

Image Loading...

Now add two more CheckBoxes and apply the Style as follows:

Image Loading...

Now run your application and see your customized Check Box.

Image Loading....

That’s it we are done with customizing the Check Box. Now you can do customization of your Check Box based on your requirements.Enjoy Coding.

Thank you


About the Author


Diptimaya Patra

Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.

Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra


 
Sign Up to vote for this article
 
About Author
 
dpatra
Occupation-Not Provided
Company-Not Provided
Member Type-Expert
Location-Not Provided
Joined date-13 Jul 2009
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top