c# - XAML - Simple animation for simple custom control -

i'm working on windows store app c# , ran can't imagine it's difficult, can't find out how it.

on mainpage.xaml created user control: stackpanel horizontal orientation, image , textblock inside. this:

<!-- language: lang-xml --> <stackpanel width="300" height="100" orientation="horizontal" margin="0,0,0,20" tapped="loremipsum_tapped">     <image source="/assets/pic.jpg" margin="20"/>     <textblock fontfamily="segoe ui" fontsize="30" verticalalignment="center">         lorem ipsum     </textblock> </stackpanel> 

which looks this:

i use custom kind of button sub-page. thing is, there no animations. wanted have typical animations listitems have in splitview: shrink when pressed, grow normal when either released or when pointer exits virtual borders of control. couldn't find animation declaration/definition associated listitems (common.standardstyles.xaml standard130itemtemplate). found out (here) there predefined animations that: pointerdownthemeanimation , pointerupthemeanimation. took me quite while find out how apply them control. might think sample mentioned on this site pointer theme animations (about c#) should help, leads sample html/javascript animations. found solutions here, here , here.

so needed storyboards in control resources, name control can targeted , event handlers in code-behind.

applied on xaml becomes this:

<!-- language: lang-xml --> <stackpanel x:name="loremipsum" width="300" height="100" orientation="horizontal" margin="0,0,0,20" tapped="loremipsum_tapped" pointerpressed="loremipsum_animdown" pointerreleased="loremipsum_animup" pointerexited="loremipsum_animup">     <image source="/assets/pic.jpg" margin="20"/>     <textblock fontfamily="segoe ui" fontsize="30" verticalalignment="center">         lorem ipsum     </textblock>     <stackpanel.resources>         <storyboard x:name="pointerdownstoryboard">             <pointerdownthemeanimation targetname="loremipsum" />         </storyboard>         <storyboard x:name="pointerupstoryboard">             <pointerupthemeanimation targetname="loremipsum" />         </storyboard>     </stackpanel.resources> </stackpanel> 

plus additional event handlers in code-behind:

<!-- language: lang-cs --> private void latest_animdown(object sender, pointerroutedeventargs e) {     pointerdownstoryboard.begin(); } private void latest_animup(object sender, pointerroutedeventargs e) {     pointerupstoryboard.begin(); } 

this worked. but... have lots of kind of user controls, don't want add every control. mentioned before standard130itemtemplate didn't help. thought custom controls. hoping define mystackpanel that's nothing stackpanel + storyboards, , targeting x:name work , maybe put event handlers in layoutawarepage code-behind, others inherit it.

i started looking how , found sample of how create custom controls: xaml user , custom controls sample.

there's custom control in generic.xml:

<!-- language: lang-xml --> xmlns:local="using:userandcustomcontrols"> <style targettype="local:basiccustomcontrol">     <setter property="template">         <setter.value>             <controltemplate targettype="local:basiccustomcontrol">                 <border                     background="{templatebinding background}"                     borderbrush="{templatebinding borderbrush}"                     borderthickness="{templatebinding borderthickness}">                 </border>             </controltemplate>         </setter.value>     </setter> </style> 

and code file, not code-behind:

<!-- language: lang-cs --> namespace userandcustomcontrols {     public sealed class basiccustomcontrol : control     {         public basiccustomcontrol()         {             this.defaultstylekey = typeof(basiccustomcontrol);         }     } } 

but sample didn't contain animations. played around example, trying add storyboards border or controltemplate, adding event handlers self created generic.xaml.cs code-behind. nothing worked.

then found this, wasn't sure how , why put event handler basiccustomcontrol class. tried anyway:

in generic.xaml:

<!-- language: lang-xml --> xmlns:local="using:userandcustomcontrols"> <style targettype="local:basiccustomcontrol">     <setter property="template">         <setter.value>             <controltemplate targettype="local:basiccustomcontrol">                 <border x:name="border"                     background="{templatebinding background}"                     borderbrush="{templatebinding borderbrush}"                     borderthickness="{templatebinding borderthickness}">                     <border.resources>                         <storyboard x:name="pointerdownstoryboard">                             <pointerdownthemeanimation targetname="border" />                         </storyboard>                         <storyboard x:name="pointerupstoryboard">                             <pointerupthemeanimation targetname="border" />                         </storyboard>                     </border.resources>                 </border>             </controltemplate>         </setter.value>     </setter> </style> 

and in basiccustomcontrol.cs:

<!-- language: lang-cs --> protected override void onpointerpressed(pointerroutedeventargs e) {     ((storyboard)this.resources["pointerdownthemeanimation"]).begin(this); } 

that didn't work. begin() method doesn't take arguments , without argument build succeeded, got system.runtime.interopservices.comexception when clicking on control.

then found on so: how add xaml storyboard animation full blown wpf custom control in xbap?

this seems interesting solution, don't it. here's description of visualstate stuff custom controls, again don't know how apply needs: quickstart: control templates

now @ point spent quite time on , i'm thinking simple thing - simple, pre-defined animation custom control -, there must simple solution. hope i'm overlooking , it's not complicated.

to sum questions:

1. where's animation of standard130itemtemplate defined , "attached" template?
2. is there control can "inherit" behaves way want (just up/down animations on 3 events)?
3. is there way create kind of control, can inherit - xaml + code?
4. is there way xaml? preferable former way?
5. is there simple example or tutorial on this?
6. are there collections of custom controls can download , use? wasn't able find any.

create custom style. in example bound image source content field. had put path image in field (ex. "assets/image.png"). nice if adding custom animations easier figure out first time.

    <style x:key="imagebuttonstyle" targettype="buttonbase">     <setter property="template">         <setter.value>             <controltemplate targettype="buttonbase">                 <grid x:name="rootgrid" background="transparent">                     <image x:name="imagelabel" source="{templatebinding content}"/>                     <rectangle                             x:name="focusvisualwhite"                             ishittestvisible="false"                             stroke="{staticresource focusvisualwhitestrokethemebrush}"                             strokeendlinecap="square"                             strokedasharray="1,1"                             opacity="0"                             strokedashoffset="1.5"/>                     <rectangle                             x:name="focusvisualblack"                             ishittestvisible="false"                             stroke="{staticresource focusvisualblackstrokethemebrush}"                             strokeendlinecap="square"                             strokedasharray="1,1"                             opacity="0"                             strokedashoffset="0.5"/>                      <visualstatemanager.visualstategroups>                         <visualstategroup x:name="commonstates">                             <visualstate x:name="normal"/>                             <visualstate x:name="pointerover">                             </visualstate>                             <visualstate x:name="pressed">                                 <storyboard>                                     <pointerdownthemeanimation targetname="imagelabel" />                                 </storyboard>                             </visualstate>                             <visualstate x:name="disabled">                             </visualstate>                         </visualstategroup>                         <visualstategroup x:name="focusstates">                             <visualstate x:name="focused">                                 <storyboard>                                     <doubleanimation                                             storyboard.targetname="focusvisualwhite"                                             storyboard.targetproperty="opacity"                                             to="1"                                             duration="0"/>                                     <doubleanimation                                             storyboard.targetname="focusvisualblack"                                             storyboard.targetproperty="opacity"                                             to="1"                                             duration="0"/>                                 </storyboard>                             </visualstate>                             <visualstate x:name="unfocused" />                             <visualstate x:name="pointerfocused" />                         </visualstategroup>                         <visualstategroup x:name="checkstates">                             <visualstate x:name="checked">                                 <storyboard>                                     <doubleanimation duration="0" to="0" storyboard.targetname="outlineglyph" storyboard.targetproperty="opacity"/>                                     <objectanimationusingkeyframes storyboard.targetname="backgroundglyph" storyboard.targetproperty="foreground">                                         <discreteobjectkeyframe keytime="0" value="{staticresource appbaritemforegroundthemebrush}"/>                                     </objectanimationusingkeyframes>                                     <objectanimationusingkeyframes storyboard.targetname="backgroundcheckedglyph" storyboard.targetproperty="visibility">                                         <discreteobjectkeyframe keytime="0" value="visible"/>                                     </objectanimationusingkeyframes>                                     <objectanimationusingkeyframes storyboard.targetname="content" storyboard.targetproperty="foreground">                                         <discreteobjectkeyframe keytime="0" value="{staticresource appbaritempressedforegroundthemebrush}"/>                                     </objectanimationusingkeyframes>                                 </storyboard>                             </visualstate>                             <visualstate x:name="unchecked"/>                             <visualstate x:name="indeterminate"/>                         </visualstategroup>                     </visualstatemanager.visualstategroups>                 </grid>             </controltemplate>         </setter.value>     </setter> </style>