wpf - Change BackGround Image of button for a few seconds only -
i have wpf app uses buttons (surprise)
i have styled when user clicks on button background image changed red color.
what want happen after few seconds background reverts original background.
i not sure how this.
this code far:
<style x:key="roundbuttontemplate" targettype="button"> <setter property="template"> <setter.value> <controltemplate targettype="button"> <border cornerradius="5" background="{templatebinding background}" borderthickness="1"> <contentpresenter horizontalalignment="center" verticalalignment="center"> </contentpresenter> </border> <controltemplate.triggers> <trigger property="isfocused" value="true"> <setter property="background"> <setter.value> <imagebrush imagesource="{staticresource redbuttonbackground}"/> </setter.value> </setter> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <setter property="width" value="74"/> <setter property="foreground" value="white"/> <setter property="height" value="27"></setter> <setter property="background"> <setter.value> <imagebrush imagesource="{staticresource buttonbackground}"/> </setter.value> </setter> </style>
here solution how animate background image based on doubleanimationusingkeyframes , opacity.
update - 2 button style code (put resource section)
<imagebrush x:key="koalaimagebrushkey" imagesource="images/koala.jpg"/> <imagebrush x:key="redbuttonbackground" imagesource="images/redbuttonbackground.jpg"/> <style x:key="roundbuttontemplate" targettype="button"> <setter property="template"> <setter.value> <controltemplate targettype="button"> <grid> <border x:name="myborder" cornerradius="5" background="{templatebinding background}" borderthickness="1"> <contentpresenter horizontalalignment="center" verticalalignment="center"> </contentpresenter> </border> <border x:name="rectanglevisibleoncklick" opacity="0" cornerradius="5" background="{staticresource redbuttonbackground}" borderthickness="1"> </border> </grid> <controltemplate.triggers> <eventtrigger routedevent="button.click"> <beginstoryboard> <storyboard> <doubleanimationusingkeyframes storyboard.targetname="rectanglevisibleoncklick" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0.5" value="1" /> <easingdoublekeyframe keytime="0:0:1" value="0.5" /> <easingdoublekeyframe keytime="0:0:1.5" value="0.25" /> <easingdoublekeyframe keytime="0:0:2" value="0.0" /> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetname="myborder" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0.5" value="0" /> <easingdoublekeyframe keytime="0:0:1" value="0.25" /> <easingdoublekeyframe keytime="0:0:1.5" value="0.5" /> <easingdoublekeyframe keytime="0:0:2" value="1.0" /> </doubleanimationusingkeyframes> </storyboard> </beginstoryboard> </eventtrigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <setter property="width" value="50"/> <setter property="foreground" value="white"/> <setter property="height" value="50"></setter> <setter property="background" value="{staticresource koalaimagebrushkey}"/> </style> - first doubleanimationusingkeyframes section changes rectanglevisibleoncklick's opacity 1 0. in 2 sec.
- second doubleanimationusingkeyframes section changes myborder's opacity 0 1. in 2 sec.
- to make animation faster change keytime parameters of both doubleanimationusingkeyframes sections:
options
<doubleanimationusingkeyframes storyboard.targetname="rectanglevisibleoncklick" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0.25" value="1" /> <easingdoublekeyframe keytime="0:0:0.5" value="0.5" /> <easingdoublekeyframe keytime="0:0:0.75" value="0.25" /> <easingdoublekeyframe keytime="0:0:1" value="0.0" /> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetname="myborder" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0.25" value="0" /> <easingdoublekeyframe keytime="0:0:0.5" value="0.25" /> <easingdoublekeyframe keytime="0:0:0.75" value="0.5" /> <easingdoublekeyframe keytime="0:0:1" value="1.0" /> </doubleanimationusingkeyframes> or
<doubleanimationusingkeyframes storyboard.targetname="rectanglevisibleoncklick" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0" value="1" /> <easingdoublekeyframe keytime="0:0:1" value="0.0" /> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetname="myborder" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0" value="0" /> <easingdoublekeyframe keytime="0:0:1" value="1.0" /> </doubleanimationusingkeyframes> elliptic button elliptic content
<imagebrush x:key="koalaimagebrushkey" imagesource="images/koala.jpg"/> <imagebrush x:key="pinguinsimagebrushkey" imagesource="images/penguins.jpg"/> <style x:key="roundbuttontemplate" targettype="button"> <setter property="template"> <setter.value> <controltemplate targettype="button"> <grid> <ellipse x:name="myborder" fill="{templatebinding background}"></ellipse> <contentpresenter horizontalalignment="center" verticalalignment="center"> <contentpresenter.opacitymask> <visualbrush visual="{binding elementname=myborder}"></visualbrush> </contentpresenter.opacitymask> </contentpresenter> <ellipse x:name="rectanglevisibleoncklick" fill="{staticresource pinguinsimagebrushkey}" opacity="0"></ellipse> </grid> <controltemplate.triggers> <eventtrigger routedevent="button.click"> <beginstoryboard> <storyboard> <doubleanimationusingkeyframes storyboard.targetname="rectanglevisibleoncklick" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0.5" value="1" /> <easingdoublekeyframe keytime="0:0:1" value="0.5" /> <easingdoublekeyframe keytime="0:0:1.5" value="0.25" /> <easingdoublekeyframe keytime="0:0:2" value="0.0" /> </doubleanimationusingkeyframes> </storyboard> </beginstoryboard> </eventtrigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <setter property="width" value="50"/> <setter property="foreground" value="white"/> <setter property="height" value="50"></setter> <setter property="background" value="{staticresource koalaimagebrushkey}"/> </style> rectangle button elliptic content (is elliptic when clicked due keyframes animation using)
<imagebrush x:key="koalaimagebrushkey" imagesource="images/koala.jpg"/> <imagebrush x:key="pinguinsimagebrushkey" imagesource="images/penguins.jpg"/> <style x:key="roundbuttontemplate" targettype="button"> <setter property="template"> <setter.value> <controltemplate targettype="button"> <grid> <rectangle x:name="myborder" fill="{templatebinding background}"></rectangle> <contentpresenter horizontalalignment="center" verticalalignment="center"> <contentpresenter.opacitymask> <visualbrush visual="{binding elementname=myborder}"></visualbrush> </contentpresenter.opacitymask> </contentpresenter> <ellipse x:name="rectanglevisibleoncklick" fill="{staticresource pinguinsimagebrushkey}" opacity="0"></ellipse> </grid> <controltemplate.triggers> <eventtrigger routedevent="button.click"> <beginstoryboard> <storyboard> <doubleanimationusingkeyframes storyboard.targetname="rectanglevisibleoncklick" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0.5" value="1" /> <easingdoublekeyframe keytime="0:0:1" value="0.5" /> <easingdoublekeyframe keytime="0:0:1.5" value="0.25" /> <easingdoublekeyframe keytime="0:0:2" value="0.0" /> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetname="myborder" storyboard.targetproperty="(frameworkelement.opacity)"> <easingdoublekeyframe keytime="0:0:0.5" value="0" /> <easingdoublekeyframe keytime="0:0:1" value="0.25" /> <easingdoublekeyframe keytime="0:0:1.5" value="0.5" /> <easingdoublekeyframe keytime="0:0:2" value="1.0" /> </doubleanimationusingkeyframes> </storyboard> </beginstoryboard> </eventtrigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <setter property="width" value="50"/> <setter property="foreground" value="white"/> <setter property="height" value="50"></setter> <setter property="background" value="{staticresource koalaimagebrushkey}"/> </style> regards.
Comments
Post a Comment