Expression blend custom radiobutton Template

You can use a template in WPF or Silverlight to modify the structure of controls that apply the template. You can modify the control template to rearrange, add, or delete elements (or widgets) in the control ).

The following uses a demo to demonstrate how to use expression blend to edit a shape template.

 

Create a Silverlight project named radiobuttontemplate and add a radiobutton to the grid named rbred, as shown in figure

 

Right-click rbred and choose edit template> Create empty... Create an empty template, as shown in figure

 

Apply it to rbred, as shown in figure

 

Click OK to edit the template and add a rectangle of 30*30, as shown in figure

 

Rename the rectangle as uncheck, and adjust its rounded corner to drag it into a circle, as shown in

 

Select uncheck, modify its stroke, and set the garden to borderless, as shown in figure

 

Select, uncheck, use Ctrl + C, CTRL + V to copy, and name the copied rectangle as check, as shown in figure

 

Navigate to the State panel, edit the template, select checked, and record the radiobutton style when radiobutton is selected.

 

Set the background color of the check rectangle. Here, select the gradient brush, for example:

 

Switch to unchecked, select the uncheck rectangle, and set its background color to solid solor, pure red (# ff000000), as shown in figure

 

Click the following button to exit template editing, as shown in figure

 

Select rbred and set its background color to red.

 

Copy rbred and name it rbgreen and rbblue respectively. Repeat the preceding steps to edit the template.

Add a rectangle to the grid named showcolor to display the background color of the selected radiobutton, for example:

 

CompileCodePreviously, we had to set rbred, rbgreen, and rbblue as a group and set their groupnames to showcolor.

 

And set the checked events of the three radiobutton to colorchanged.

 

Write the following code in code-behind:

Press F5 to runProgram, The final effect is as follows:

How about it? A beautiful radiobutton will soon be implemented. You can also define other behaviors, such as an animation when moving to radiobutton. Please act on your own!

 

Source codeDownload