.net - Windows Phone - I want a `Grid` to do some animation when I tap on it -

i want grid animation when tap on it. includes adding tilt effect , chaning opacity. after release finger should go original states.

what's best way achieve this?

you can of course use mouseleftbuttonup & mouseleftbuttondown' or 'manipulationstarted & manipulationcompleted handle touch , release. not accurate.

another solution use button host encapsulate animations want within visual state group.

<phone:phoneapplicationpage.resources>     <style x:key="emptybuttonstyle" targettype="button">         <setter property="background" value="transparent"/>         <setter property="borderbrush" value="{staticresource phoneforegroundbrush}"/>         <setter property="foreground" value="{staticresource phoneforegroundbrush}"/>         <setter property="borderthickness" value="{staticresource phoneborderthickness}"/>         <setter property="fontfamily" value="{staticresource phonefontfamilysemibold}"/>         <setter property="fontsize" value="{staticresource phonefontsizemedium}"/>         <setter property="padding" value="10,5,10,6"/>         <setter property="template">             <setter.value>                 <controltemplate targettype="button">                     <grid x:name="root" background="transparent">                         <grid.projection>                             <planeprojection/>                         </grid.projection>                         <visualstatemanager.visualstategroups>                             <visualstategroup x:name="commonstates">                                 <visualstategroup.transitions>                                     <visualtransition generatedduration="0:0:0.4"/>                                 </visualstategroup.transitions>                                 <visualstate x:name="normal"/>                                 <visualstate x:name="mouseover"/>                                 <visualstate x:name="pressed">                                     <storyboard>                                         <doubleanimation duration="0" to="1" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="backgroundvisual" d:isoptimized="true"/>                                         <doubleanimation duration="0" to="3" storyboard.targetproperty="(uielement.projection).(planeprojection.rotationy)" storyboard.targetname="root" d:isoptimized="true"/>                                         <doubleanimation duration="0" to="3" storyboard.targetproperty="(uielement.projection).(planeprojection.rotationx)" storyboard.targetname="root" d:isoptimized="true"/>                                     </storyboard>                                 </visualstate>                                 <visualstate x:name="disabled">                                     <storyboard>                                         <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentcontainer">                                             <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/>                                         </objectanimationusingkeyframes>                                     </storyboard>                                 </visualstate>                             </visualstategroup>                         </visualstatemanager.visualstategroups>                         <rectangle x:name="backgroundvisual" fill="{templatebinding background}" opacity="0.4"/>                         <contentcontrol x:name="contentcontainer" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}"/>                     </grid>                 </controltemplate>             </setter.value>         </setter>     </style> </phone:phoneapplicationpage.resources>  <grid x:name="layoutroot" background="transparent">     <button style="{staticresource emptybuttonstyle}" background="{staticresource phoneaccentbrush}" width="360" height="480"/> </grid> 

in button style above, have backgroundvisual (a rectangle) background of button , set initial opacity 0.2. when pressed, change opacity 1.

also gave whole root planeprojection animations when pressed, create tilt effect need. way use tilt effect wptoolkit, that's assuming working on wp8 project.

hope helps!