Continue to talk about WPF-customize the appearance of the checkbox control

 

PreviousArticleThe bulletdecorator control is used to prepare the template of the custom checkbox control. Because the checkbox requires a strict layout, the bulletdecorator control is suitable, the layout of the control is a project list, which can be easily arranged. The first step is to create a resource, that is, the focus style of the control, that is, the style when you constantly press the tab key in the form to get the focus of the control, which will be used later.

 
<! -- Style when the control obtains the keyboard focus --> <style X: Key = "focusstyle"> <setter property = "control. template "> <setter. value> <controltemplate> <rectangle stroke = "red" strokethickness = "1"/> </controltemplate> </setter. value> </setter> </style>
 

Step 2: Write the checkbox style.

<! -- Checkbox style --> <style targettype = "{X: type checkbox} "> <setter property =" overridesdefaultstyle "value =" true "/> <setter property =" focusvisualstyle "value =" {staticresource focusstyle} "/> <setter property = "snapstodevicepixels" value = "true"/> <setter property = "foreground" value = "white"/> <setter property = "fontsize" value = "16"/> <setter property = "template"> <setter. value> <controltemplate targettype = "{X: Type checkbox}"> <bulletdecorator flowdirection = "lefttoright" verticalignment = "center"> <bulletdecorator. bullet> <border X: Name = "BD" borderthickness = "1" borderbrush = "red" minheight = "15" minwidth = "15" verticalalignment = "center"> <border. background> <lineargradientbrush startpoint = "0.2" endpoint = ""> <gradientstop color = "lightgray" offset = ""/> <gradientstop color = "white" offset = "1 "/> </Li Neargradientbrush> </border. background> <path X: name = "CP" width = "12" Height = "12" stroke = "blue" strokethickness = "3"/> </Border> </bulletdecorator. bullet> <contentpresenter margin = "2, 0"/> </bulletdecorator> <! -- Control trigger --> <controltemplate. triggers> <trigger property = "ischecked" value = "true"> <! -- Draw a check --> <setter targetname = "CP" property = "data" value = "m L 6, 12"/> <setter property = "foreground" value =" lightgreen "/> </trigger> <trigger property =" ismouseover "value =" true "> <setter targetname =" BD "property =" background "> <setter. value> <lineargradientbrush startpoint = "0.12" endpoint = "0.92"> <gradientstop color = "orange" offset = ""/> <gradientstop color = "yellow" offset = ""/> </lineargradientbrush> </setter. value> </setter> </trigger> </controltemplate. triggers> </controltemplate> </setter. value> </setter> </style>

 

Step 3: remove the default Grid Control of the form. For better layout, use the statcpanel control.

 
<Stackpanel orientation = "vertical" margin = "20, 20, 20, 20 "> <checkbox content =" apple "/> <checkbox content =" eggs "/> <checkbox content =" cabbage "/> <checkbox content =" radish "/> <checkbox content = "Soy Milk"/> <checkbox content = "Pickles"/> <checkbox content = "fried rice"/> <checkbox content = "roast duck rice"/> <checkbox content = "Barbecued pork"/> </stackpanel>
 

 

Okay. Let's take a look at the effect.

When the project is selected, the font color automatically turns green. See the above XAMLCode.

How are you doing?