c# - Using VisualStateManager to start and stop Storyboards -

i have animation animates canvas turning 360 degrees indefinitely (it spins). want animation start when control shown , stop when control hidden. figured tie in, somehow, visualstatemanager. have seen example of fading in , out controls here work dont know how use vsm start , stop storyboard

<canvas.resources>     <storyboard x:name="spinnerboard">         <doubleanimation             storyboard.targetname="spinnerrotate"             storyboard.targetproperty="angle"             from="0" to="360" duration="0:0:01.3"             repeatbehavior="forever" />     </storyboard> </canvas.resources>  <canvas.rendertransform>     <rotatetransform x:name="spinnerrotate" angle="0" /> </canvas.rendertransform> 

example vsm

<visualstate x:name="show">     <storyboard>         <!-- start story board here -->     </storyboard> </visualstate> <visualstate x:name="hide">     <storyboard>         <!-- stop story board here -->     </storyboard> </visualstate> 

a global answer of different questions :
extendedvisualstatemanager.gotoelementstate returns false in silverlight
default binding usercontrol custom dp

you can :

1. use template control extend contentcontrol play isenabled of content (prevent action during waiting) ;
2. create dp iswaiting switch control visual state ;
3. create 2 states in xaml : use doubleanimation repeatbehavior="forever"

after can add overlay , waiting message dependency property busy indicator control...

i use picture waiting visual part can use canvas, grid etc...

c#

[templatevisualstate(groupname = "waitgroup", name = waitspinner.iswaitingstatename)] [templatevisualstate(groupname = "waitgroup", name = waitspinner.notwaitingstatename)] public class waitspinner : contentcontrol {     #region states names     internal const string iswaitingstatename = "iswaitingstate";     internal const string notwaitingstatename = "notwaitingstate";     #endregion states names      public bool iswaiting     {         { return (bool)getvalue(iswaitingproperty); }         set { setvalue(iswaitingproperty, value); }     }      public static readonly dependencyproperty iswaitingproperty =         dependencyproperty.register("iswaiting", typeof(bool), typeof(waitspinner), new propertymetadata(false, oniswaitingpropertychanged));      private static void oniswaitingpropertychanged(dependencyobject sender, dependencypropertychangedeventargs e)     {         waitspinner waitspinner = (waitspinner)sender;         waitspinner.changevisualstate(true);     }      public waitspinner()     {         defaultstylekey = typeof(waitspinner);     }      public override void onapplytemplate()     {         base.onapplytemplate();         changevisualstate(false);     }      protected virtual void changevisualstate(bool usetransitions)     {         visualstatemanager.gotostate(this, iswaiting ? iswaitingstatename : notwaitingstatename, usetransitions);     } } 

xaml :

<visualstategroup x:name="waitgroup">     <visualstate x:name="notwaitingstate" >         <storyboard>             <objectanimationusingkeyframes storyboard.targetproperty="(control.isenabled)" storyboard.targetname="content">                 <discreteobjectkeyframe keytime="0">                     <discreteobjectkeyframe.value>                         <system:boolean>true</system:boolean>                     </discreteobjectkeyframe.value>                 </discreteobjectkeyframe>             </objectanimationusingkeyframes>         </storyboard>     </visualstate>     <visualstate x:name="iswaitingstate">         <storyboard>             <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="waitpart">                 <discreteobjectkeyframe keytime="0:0:0.200" value="visible"/>             </objectanimationusingkeyframes>             <doubleanimation storyboard.targetproperty="(uielement.rendertransform).(rotatetransform.angle)" storyboard.targetname="waitpart" to="360" repeatbehavior="forever" duration="0:0:1" />             <objectanimationusingkeyframes storyboard.targetproperty="(control.isenabled)" storyboard.targetname="content">                 <discreteobjectkeyframe keytime="0">                     <discreteobjectkeyframe.value>                         <system:boolean>false</system:boolean>                     </discreteobjectkeyframe.value>                 </discreteobjectkeyframe>             </objectanimationusingkeyframes>         </storyboard>     </visualstate> </visualstategroup> <!-- ............. --> <contentcontrol     istabstop="false"     x:name="content"     content="{templatebinding content}"     contenttemplate="{templatebinding contenttemplate}"     horizontalcontentalignment="{templatebinding horizontalcontentalignment}"     verticalcontentalignment="{templatebinding verticalcontentalignment}"     foreground="{templatebinding foreground}"     scrollviewer.horizontalscrollbarvisibility="{templatebinding scrollviewer.horizontalscrollbarvisibility}"     scrollviewer.verticalscrollbarvisibility="{templatebinding scrollviewer.verticalscrollbarvisibility}"/> <image source="circlepicture.png"     x:name="waitpart"     rendertransformorigin="0.5,0.5"     width="16"     height="16"     visibility="collapsed"     ishittestvisible="false">     <image.rendertransform>         <rotatetransform  />     </image.rendertransform> </image>