wpf-a custom checkbox

The original checkbox style in WPF is simple and sometimes does not apply to the awesome interface of WPF.

This section describes how to design a good-looking checkbox that matches your business needs (following the checkbox style in the wpf-custom listbox)

The checkbox style is as follows:

<style x:key= "Checkboxstyle" targettype= "{x:type CheckBox}" >

<setter property= "Snapstodevicepixels"
value= "true"/>
<setter property= "Overridesdefaultstyle"
value= "False"/>
<setter property= "FocusVisualStyle"
value= "{DynamicResource checkboxfocusvisual}"/>

<setter property= "Template" >
<Setter.Value>
<ControlTemplate>
<BulletDecorator>
<BulletDecorator.Bullet>
<grid height= "{TemplateBinding Height}" width= "{TemplateBinding Width}" >
<border x:name= "Border" >
<rectangle fill= "DodgerBlue" radiusy= "5" radiusx= "5" ></Rectangle>
</Border>
<grid x:name= "Checkedmark" >
<path visibility= "Visible" width= "height=" "snapstodevicepixels=" False "
strokethickness= "2" data= "m1,6 l7,12" >
<Path.Stroke>
<solidcolorbrush color= "white"/>
</Path.Stroke>
</Path>
<path visibility= "Visible" width= "height="
snapstodevicepixels= "False" strokethickness= "2" data= "m6,12 l14,2" >
<Path.Stroke>
<solidcolorbrush color= "white"/>
</Path.Stroke>
</Path>
</Grid>
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<visualstategroup x:name= "Checkstates" >
<visualstate x:name= "Checked" >
<Storyboard>
<objectanimationusingkeyframes storyboard.targetproperty= "Visibility"
storyboard.targetname= "Checkedmark" >
<discreteobjectkeyframe keytime= "0"
value= "{x:static visibility.visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<visualstate x:name= "Unchecked" >
<Storyboard>
<objectanimationusingkeyframes storyboard.targetproperty= "Visibility"
storyboard.targetname= "Checkedmark" >
<discreteobjectkeyframe keytime= "0"
value= "{x:static visibility.collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<visualstate x:name= "indeterminate" >
<Storyboard>
<objectanimationusingkeyframes storyboard.targetproperty= "Visibility"
storyboard.targetname= "Checkedmark" >
<discreteobjectkeyframe keytime= "0"
value= "{x:static visibility.collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

The pattern mainly involves a checkbox template, the specific design ideas are as follows:

1, with a decorative control bulletdecorator as the root node

2, then the concrete content, uses the retangle to draw the square box with the rounded angle, sets the background

3, draw two lines, assembled into a √

4, add visual display, here with VisualStateManager to control. Of course, it's also possible to use common trigger trigger.

This style is well designed. Then apply to the actual checkbox:

<IsChecked= "True"  Height= "  Width= " Style =" {StaticResource Checkboxstyle} " ></ CheckBox >

Is it very simple ~ haha

wpf-a custom checkbox