c# - Binding Shape FillColor to Button BackgroundBrush -
i wanna create close/maximize/minimize buttons app. wrote piece of style:
<style x:key="closebutton" targettype="button"> <setter property="template"> <setter.value> <controltemplate> <grid background="transparent"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" /> <visualstate x:name="mouseover"> <storyboard> <coloranimation storyboard.targetname="backgroundcolor1" storyboard.targetproperty="(shape.fill).(gradientbrush.gradientstops)[0].(gradientstop.color)" duration="0" to="#ffff1111"/> <coloranimation storyboard.targetname="backgroundcolor2" storyboard.targetproperty="(shape.stroke).(gradientbrush.gradientstops)[0].(gradientstop.color)" duration="0" to="#ffff1111"/> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <ellipse name="backgroundcolor1" margin="4,0,0,0" width="18" height="18"> <ellipse.fill> <lineargradientbrush startpoint="0,0" endpoint="1,1"> <gradientstop color="{staticresource colorborder}" offset="0.2"/> <gradientstop color="whitesmoke" offset=".9"/> </lineargradientbrush> </ellipse.fill> </ellipse> <ellipse name="backgroundcolor2" margin="4,0,0,0" width="18" height="18"> <ellipse.stroke> <lineargradientbrush startpoint="0,0" endpoint="1,1"> <gradientstop color="{staticresource colorborder}" offset="1"/> <gradientstop color="whitesmoke" offset="0"/> </lineargradientbrush> </ellipse.stroke> </ellipse> <ellipse margin="4,0,0,8" width="7" height="7"> <ellipse.fill> <lineargradientbrush startpoint="1,0" endpoint="0,1"> <gradientstop color="whitesmoke" offset="0"/> <gradientstop color="transparent" offset="0.7"/> </lineargradientbrush> </ellipse.fill> </ellipse> <ellipse margin="4,0,0,0" width="18" height="18" strokethickness="2" strokelinejoin="round"> <ellipse.stroke> <lineargradientbrush startpoint="1,0" endpoint="1,1"> <gradientstop color="black" offset="0"/> <gradientstop color="transparent" offset="1"/> </lineargradientbrush> </ellipse.stroke> </ellipse> <ellipse margin="4,0,0,0" width="18" height="18" strokethickness="1" strokelinejoin="round"> <ellipse.stroke> <lineargradientbrush startpoint="1,0" endpoint="1,1"> <gradientstop color="#ff333333" offset="1"/> <gradientstop color="transparent" offset="0.5"/> </lineargradientbrush> </ellipse.stroke> </ellipse> </grid> </controltemplate> </setter.value> </setter> </style> right have 3 duplicate of style, changes in mouseover color, this:
<coloranimation storyboard.targetname="backgroundcolor1" storyboard.targetproperty="(shape.fill).(gradientbrush.gradientstops)[0].(gradientstop.color)" <!-- "to" color changes each button --> to="#ffff1111"/> but wanna bind color button background color, don't have have 3 duplicate style. did relativesource binding didn't work.
q1: how can bind gradient button background?
q2: there other type of controller and have color properties?
thanks in advance.
edit: transition code:
<visualstategroup.transitions> <visualtransition to="mouseover" generatedduration="0:0:0.2"/> <visualtransition from="mouseover" generatedduration="0:0:0.2"/> </visualstategroup.transitions>
if me more below pass in brush, color, colorname etc easier instead of swap out gradientstop's , deal 1 whole object @ time. since fill accept color. brush , fill different beasts. ;)
something like;
style;
<style x:key="closebutton2" targettype="{x:type button}"> <setter property="background" value="red"/> <setter property="horizontalcontentalignment" value="center"/> <setter property="verticalcontentalignment" value="center"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type button}"> <grid> <!-- left here in case want use later something. set visibility. --> <border x:name="border" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" snapstodevicepixels="true" visibility="collapsed"> <contentpresenter x:name="contentpresenter" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{templatebinding verticalcontentalignment}"/> </border> <!-- new magic. --> <border x:name="buttonlight" opacity="0" background="{templatebinding background}" cornerradius="50" width="18" height="18" margin="4,0,0,0"/> <ellipse name="backgroundcolor1" margin="4,0,0,0" width="18" height="18"> <ellipse.fill> <lineargradientbrush startpoint="0,0" endpoint="1,1"> <gradientstop color="transparent" offset="0.2"/> <gradientstop color="whitesmoke" offset=".9"/> </lineargradientbrush> </ellipse.fill> </ellipse> <ellipse name="backgroundcolor2" margin="4,0,0,0" width="18" height="18"> <ellipse.stroke> <lineargradientbrush startpoint="0,0" endpoint="1,1"> <gradientstop color="transparent" offset="1"/> <gradientstop color="whitesmoke" offset="0"/> </lineargradientbrush> </ellipse.stroke> </ellipse> <ellipse margin="4,0,0,8" width="7" height="7"> <ellipse.fill> <lineargradientbrush startpoint="1,0" endpoint="0,1"> <gradientstop color="whitesmoke" offset="0"/> <gradientstop color="transparent" offset="0.7"/> </lineargradientbrush> </ellipse.fill> </ellipse> <ellipse margin="4,0,0,0" width="18" height="18" strokethickness="2" strokelinejoin="round"> <ellipse.stroke> <lineargradientbrush startpoint="1,0" endpoint="1,1"> <gradientstop color="black" offset="0"/> <gradientstop color="transparent" offset="1"/> </lineargradientbrush> </ellipse.stroke> </ellipse> <ellipse margin="4,0,0,0" width="18" height="18" strokethickness="1" strokelinejoin="round"> <ellipse.stroke> <lineargradientbrush startpoint="1,0" endpoint="1,1"> <gradientstop color="#ff333333" offset="1"/> <gradientstop color="transparent" offset="0.5"/> </lineargradientbrush> </ellipse.stroke> </ellipse> </grid> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="opacity" targetname="buttonlight" value="1"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> then, instance examples;
<stackpanel verticalalignment="center" horizontalalignment="center"> <button style="{dynamicresource closebutton2}"/> <button background="green" style="{dynamicresource closebutton2}" margin="0,10"/> <button background="blue" style="{dynamicresource closebutton2}"/> </stackpanel> hope helps, cheers.
more information;
you can absolutely still apply transition, this; delete triggers (this part in previous example);
<!-- delete part --> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="opacity" targetname="buttonlight" value="1"/> </trigger> </controltemplate.triggers> then plop in visualstatemanager somewhere inside of grid prefer @ top right under <grid> tag;
<!-- invoke visualstatemanager handle instead of trigger requested. --> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstategroup.transitions> <visualtransition to="mouseover" generatedduration="0:0:0.2"/> <visualtransition from="mouseover" generatedduration="0:0:0.2"/> </visualstategroup.transitions> <visualstate x:name="normal"/> <visualstate x:name="mouseover"> <storyboard> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="buttonlight" duration="0:0:1"> <easingdoublekeyframe keytime="0" value="1"/> </doubleanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="pressed"/> <visualstate x:name="disabled"/> </visualstategroup> </visualstatemanager.visualstategroups> ...and that's it, you're done, , still have color functionalities etc. :)
Comments
Post a Comment