Silverlight CheckBox -
i want change background color of checkbox when checked instead of show icon have no idea of how this. i've tried create new "rectangle" different background color , call him on visualstate "checked" didnt work.
my code :
<style targettype="checkbox"> <setter property="background" value="{staticresource checkboxbackgroundbrush}" /> <setter property="borderbrush" value="{staticresource checkboxborderbrush}" /> <setter property="foreground" value="{staticresource normalfontbrush}" /> <setter property="horizontalcontentalignment" value="left" /> <setter property="padding" value="6,1,0,0" /> <setter property="verticalcontentalignment" value="center" /> <setter property="template"> <setter.value> <controltemplate targettype="checkbox"> <grid> <grid.columndefinitions> <columndefinition width="13" /> <columndefinition width="*" /> </grid.columndefinitions> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" /> <visualstate x:name="mouseover"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="mouseoverborder"> <discreteobjectkeyframe keytime="0" value="visible" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="pressedborder"> <discreteobjectkeyframe keytime="0" value="visible" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <doubleanimation duration="0" to=".55" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="contentpresenter" /> <doubleanimation duration="0" to="0.55" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="disabledvisualelement" /> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="checkstates"> <visualstate x:name="checked"> <storyboard> <doubleanimation duration="0" to="1" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="checkicon" /> </storyboard> </visualstate> <visualstate x:name="unchecked" /> <visualstate x:name="indeterminate"> <storyboard> <doubleanimation duration="0" to="1" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="indeterminateicon" /> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"> <storyboard> <doubleanimation duration="0" storyboard.targetname="focusvisualelement" storyboard.targetproperty="(frameworkelement.opacity)" to="1" /> </storyboard> </visualstate> <visualstate x:name="unfocused" /> </visualstategroup> <visualstategroup x:name="validationstates"> <visualstate x:name="valid" /> <visualstate x:name="invalidunfocused"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="validationerrorelement"> <discreteobjectkeyframe keytime="0" value="visible" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="invalidfocused"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="validationerrorelement"> <discreteobjectkeyframe keytime="0" value="visible" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="isopen" storyboard.targetname="validationtooltip"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <system:boolean>true</system:boolean> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid height="12" horizontalalignment="left" verticalalignment="{templatebinding verticalcontentalignment}" width="12"> <rectangle x:name="background" fill="{templatebinding background}" height="12" stroke="{templatebinding borderbrush}" width="12" /> <border x:name="outerhighlight" borderbrush="{staticresource controlouterhighlightbrush}" borderthickness="0,0,1,1" cornerradius="1,0,1,0" margin="1,1,-1,-1" /> <border x:name="innershadow" borderbrush="{staticresource checkboxinnershadowbrush}" borderthickness="1,1,0,0" cornerradius="0.5" margin="1,1,0,0" /> <border x:name="mouseoverborder" borderbrush="{staticresource coloraccentbrush}" borderthickness="1" margin="1" visibility="collapsed" /> <border x:name="pressedborder" borderbrush="{staticresource coloraccentsubduedbrush}" borderthickness="1" margin="1" visibility="collapsed" /> <path x:name="checkicon" data="m0.5625,5.0625 l1.5,3.9375 l2.9575791,4.9549685 c2.9575791,4.9549685 5.75,1.125 5.75,1.125 c5.75,1.125 6.9375,2 6.9375,2 c6.9375,2 3.186887,7.0000076 3.186887,7.0000076 z" fill="{staticresource checkboxcoloraccenthighlightbrush}" flowdirection="lefttoright" margin="2,2,0,1" opacity="0"/> <rectangle x:name="indeterminateicon" fill="{staticresource coloraccenthighlightbrush}" height="2" opacity="0" width="6" /> <rectangle x:name="disabledvisualelement" fill="{staticresource disabledbrush}" height="12" opacity="0" width="12" /> <rectangle x:name="focusvisualelement" ishittestvisible="false" margin="2" opacity="0" stroke="{staticresource focusvisualbrush}" strokethickness="{staticresource focusvisualstrokethickness}" /> <border x:name="validationerrorelement" borderbrush="{staticresource errorbrush}" borderthickness="1" margin="1" tooltipservice.placementtarget="{binding relativesource={relativesource templatedparent}}" visibility="collapsed"> <tooltipservice.tooltip> <tooltip x:name="validationtooltip" datacontext="{binding relativesource={relativesource templatedparent}}" placement="right" placementtarget="{binding relativesource={relativesource templatedparent}}" template="{staticresource validationtooltiptemplate}"> <tooltip.triggers> <eventtrigger routedevent="canvas.loaded"> <beginstoryboard> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="ishittestvisible" storyboard.targetname="validationtooltip"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <system:boolean>true</system:boolean> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </beginstoryboard> </eventtrigger> </tooltip.triggers> </tooltip> </tooltipservice.tooltip> <grid background="transparent" horizontalalignment="right" height="10" margin="0,-4,-4,0" verticalalignment="top" width="10"> <path data="m 1,0 l5,0 2,2 90 0 1 7,2 l7,6 z" fill="{staticresource errorbrush}" margin="0,3,0,0" /> </grid> </border> </grid> <contentpresenter x:name="contentpresenter" content="{templatebinding content}" contenttemplate="{templatebinding contenttemplate}" grid.column="1" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalalignment="{templatebinding verticalcontentalignment}" /> </grid> </controltemplate> </setter.value> </setter> </style> thanks!
you on right track. create rectangle (or border) desired background color , opacity 0. in checked state, animate opacity 1. alternatively, set visibility collapsed , animate visibility similar how pressedborder element animated in pressed state.
under pressedborder
<border x:name="checkedborder" borderthickness="1" margin="1" background="green" visibility="collapsed" /> in vsm:
<visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="pressedborder"> <discreteobjectkeyframe keytime="0" value="visible" /> </objectanimationusingkeyframes> </storyboard> </visualstate>
Comments
Post a Comment