Drupal

The following are the steps for creating images that act like the check boxes in the figure above. The images do not look like check boxes, but they act like them, since they have different appearances for when they are checked or not. Download the .exe file. Download the project file. View the XAML.
For those who have the Blend Bible, these steps should replace the steps on page 463 of the Microsoft Blend Bible. (The steps on page 463 are a duplicate of what’s on page 465.)
1) Click the CheckBox button in the Toolbox, and click and drag in the artboard to position a check box there.
2) Choose Object -> Edit Control Parts (Template) -> Create Empty.
3) Choose Project -> Add Existing Item or Project -> Link To Existing Item to add or link three images to your project.
4) Right-click on an image in the Project panel and choose Insert.
5) Because the image stretches to fill the CheckBox control, use the Layout palette to shrink its Width. (Don’t worry about changing the Width property from Auto.) As you can see in the Figure below, the control parts consist of just an image and nothing else. Click the up arrow next to CheckBoxControlTemplate.

The check box control has an image in it and nothing else.
6) To assign your property trigger and animation timelines, you want to edit the Style of your checkbox rather than your template, because the animation affects the entire control and not just a part of the control. Select your checkbox (image) and choose Object -> Edit Style -> Edit Style. (Because you already created a control template, a custom style already exists for your control and you don’t need to create a new one.)
7) Click the Create New Timeline button in the Objects and Timeline palette. Accept the default Timeline1 name and click OK. Drag the playhead to half a second. In the Scale tab of the RenderTransform pane of the Transform palette, change X to 2 and Y to 2.
8) Click the Create New Timeline button in the Objects and Timeline palette. Accept the default Timeline2 name and click OK. Drag the playhead to half a second. In the Scale tab of the RenderTransform pane of the Transform palette, change X to 1.00001 and Y to 1.00001 to add the property and keyframe.
9) In the Triggers palette, click the +Property button and in the Activated When pane, click the down arrow beside the default property and choose IsChecked.
10) In the Actions When Activating pane, choose the defaults, which are Timeline1 and Begin.
11) In the Actions When Deactivating pane, choose Timeline2 and Begin.
12) Click the up arrow beside the name of the style, and test your check box by pressing F5.