Customizing Check Box Control In Silverlight 3 Using Blend 3


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.

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:

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

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

Delete the CheckIcon Path from the structure.

Now add three Text Blocks to the Second Grid.

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:

The design of the Checkbox will look like the following:

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:

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:

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


Now run your application and see your customized Check Box.

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.