Every aspect of a Silverlight application is customizable.  This customizability runs deep, even the check in a standard checkbox control can be modified.  In this demo I will show you how to customize a visual element of a standard checkbox to make the check bigger.

chkbox-big-check

Below is a functioning Silverlight example:

Achieving this is surprisingly easy.

1) Place a checkbox on your design surface and right click on it.  You will see the following menu:

chkbox-editcopy 

2) Choose Edit Template | Edit a Copy.  What does this mean?  This feature of Blend 3 is really cool.  It lets you create a copy of the built in system style / XAML of an object.  In the next several steps you will see that you have complete control of the visual rendering of the control.  You can break it down all the way to the XAML path used to draw the check!

3) You are creating a copy of the template for the checkbox and you must name it and tell Blend where to place the XAML.

chkbox-create-resource

I named mine CheckBoxStyleBigCheck and placed it in the Application.

4) You now have the checkbox control broken down to its base components.

chkbox-style-editor

chkbox-layers

Check out the layers on the left of the screen.  There are a lot of components in the list.  I found it very useful to click the eye ball button to temporarily hide the part from the visual display.  This lets you quickly see what component the layer affects.

5) We will be increasing the size of the checkbox.

chkbox-blownup

Increase the size of the checkbox by dragging the points on it larger.  You can actually resize it easily with the bounding box which will keep the height and width proportional.

chkbox-resize

I had to add 4 pixels to the top margin of each of the components because my checkmark extends 4 pixels beyond the top of the box.

6) After you do this you will also need to reorder the checkmark path to the top of the stack of visual elements.  Since the check is larger than some of the other visual elements now you want to make sure a box border does not cut off you fancy new checkmark.

chkbox-order

There are several ways to do this.  The easiest is to right click on the checkmark path and choose Bring to Front.  Alternatively you can drag the CheckIcon path layer to the bottom of the containing grid.  These layers are rendered from top to bottom so anything further down the list is rendered after the previous, hence the layering effect.

Download the full Blend 3 project file below.