xaml - Change button background color when mouse over Windows phone 8 -
i using custom style buttons in windows 8 application this:
<style x:key="buttondefaultstyle" targettype="button"> <setter property="foreground" value="red"/> <setter property="background" value="green"/> <setter property="minwidth" value="0"/> <setter property="minheight" value="0" /> </style>
what's best way change background color when mouse on button, without adding custom images backgrounds?
this solution change background color when mouse over:
<setter property="template"> <setter.value> <controltemplate targettype="button"> <grid x:name="grid"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" > </visualstate> <visualstate x:name="pointerover"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="(border.borderbrush)" storyboard.targetname="border"> <discreteobjectkeyframe keytime="0" value="{x:null}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(border.borderthickness)" storyboard.targetname="border"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <thickness>0</thickness> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="border"> <discreteobjectkeyframe keytime="0" value="{themeresource greenapplecolorbrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"> <storyboard> <doubleanimation duration="0" to="1" storyboard.targetproperty="opacity" storyboard.targetname="focusvisualwhite" /> <doubleanimation duration="0" to="1" storyboard.targetproperty="opacity" storyboard.targetname="focusvisualblack" /> </storyboard> </visualstate> <visualstate x:name="unfocused" /> <visualstate x:name="pointerfocused" /> </visualstategroup> </visualstatemanager.visualstategroups> <border x:name="border" background="{templatebinding background}" margin="3"> <contentpresenter x:name="contentpresenter" contenttemplate="{templatebinding contenttemplate}" contenttransitions="{templatebinding contenttransitions}" content="{templatebinding content}" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalalignment="{templatebinding verticalcontentalignment}" /> </border> <rectangle x:name="focusvisualwhite" ishittestvisible="false" opacity="0" strokedashoffset="1.5" strokeendlinecap="square" stroke="{staticresource focusvisualwhitestrokethemebrush}" strokedasharray="1,1" /> <rectangle x:name="focusvisualblack" ishittestvisible="false" opacity="0" strokedashoffset="0.5" strokeendlinecap="square" stroke="{staticresource focusvisualblackstrokethemebrush}" strokedasharray="1,1" /> </grid> </controltemplate> </setter.value> </setter>
Comments
Post a Comment