Use storyboard in Windows phone to make a small white dot like the IOS screen

It's easy to animate in Windows Phone, you can use blend to drag and drop to make a simple animation, the following is a small white point on the iOS screen drag effect, including speed to determine the movement

Use blend to generate the following code

<storyboard x:name="HANDFUNGTLSB"><!--Animate to the left--<doubleanimationusingkeyframes storyboard.targetproperty="(Uielement.rendertransform). (Compositetransform.translatex)"Storyboard.targetname="Gridhandfun"> <easingdoublekeyframe keytime="0"Value="-170"/> <easingdoublekeyframe keytime="0:0:0.1"Value="-288"/> <easingdoublekeyframe keytime="0:0:0.2"Value="-360"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <storyboard x:name="HANDFUNGTRSB"><!--flick to the right animation-<doubleanimationusingkeyframes storyboard.targetproperty="(Uielement.rendertransform). (Compositetransform.translatex)"Storyboard.targetname="Gridhandfun"> <easingdoublekeyframe keytime="0"Value="-170"/> <easingdoublekeyframe keytime="0:0:0.1"Value="-100"/> <easingdoublekeyframe keytime="0:0:0.2"Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard>

The control being dragged:

<grid width= "Up" height= "444" name= "Gridhandfun"
Horizontalalignment= "right" canvas.zindex= "100"

Margin= "0,0,30,0"
Rendertransformorigin= "0.5,0.5"
Manipulationdelta= "Gridhandfun_manipulationdelta"
manipulationcompleted= "gridhandfun_manipulationcompleted" >

<!--Manipulationdelta Handling Drag events--
<!-- manipulationcompleted handle Drag completion events --
       
<Grid.RenderTransform> <CompositeTransform/> </Grid.RenderTransform> <!--hand (below for your own control)-<local:togglebutton x:name="Tglbtnhand"grid.row="1"Tap="Tglbtnhand_tap"tag="0"rendertransformorigin="0.5,0.5"> <local:ToggleButton.RenderTransform> <CompositeTransform/> </local:ToggleButton.RenderTransform> <image source="/assets/handfun/hand.png"/> <local:ToggleButton.TappedContent> <image source="/assets/handfun/hand1.png"/> </local:ToggleButton.TappedContent> </local:ToggleButton>

</Grid>

The front desk is finished, we will handle the background events:

        
Handling Drag Events
Private voidGridhandfun_manipulationdelta (Objectsender, System.Windows.Input.ManipulationDeltaEventArgs e) {Grid grid= Sender asGrid; Compositetransform Comptrans= Grid. RenderTransform asCompositetransform; Comptrans.translatex+=e.deltamanipulation.translation.x; Comptrans.translatey+=E.DELTAMANIPULATION.TRANSLATION.Y; System.Diagnostics.Debug.WriteLine ("value of x: {0},y value: {1}", Comptrans.translatex, Comptrans.translatey); }

//Handle Drag completion events
Private voidGridhandfun_manipulationcompleted (Objectsender, System.Windows.Input.ManipulationCompletedEventArgs e) {Compositetransform Comptrans= Gridhandfun.rendertransform asCompositetransform; DoubleDcurrtranx =Comptrans.translatex; DoubleDcurrtrany =Comptrans.translatey;
　　　　　　
Get finger sliding speed x for horizontal sliding speed y for vertical sliding speed point pspleed=e.finalvelocities.linearvelocity; System.Diagnostics.Debug.WriteLine ("Speed: Value of x: {0},y value: {1}", Pspleed.x, PSPLEED.Y);

//When the speed to the left is less than 700, slide the control to the left, play the left animation-700 can adjust itself, I tested one, this speed can be reachedif(Pspleed.x <- the) {handfungtlsb.begin (); return; }

Contrary to the aboveif(Pspleed.x > the) {handfungtrsb.begin (); return; }            //the total movement distance            DoubleDtranx =e.totalmanipulation.translation.x; DoubleDtrany =E.TOTALMANIPULATION.TRANSLATION.Y; System.Diagnostics.Debug.WriteLine ("x value of the current control's compositetransform: {0},y value: {1}", Dcurrtranx, Dcurrtrany); System.Diagnostics.Debug.WriteLine ("The value of x in completed is: {0},y value is: {1}", Dtranx, Dtrany); if(Dcurrtranx <=- the)            {//Go left                varVtimelines =Handfungtlsb.children; DoubleAnimationUsingKeyFrames DAUKF= ((DoubleAnimationUsingKeyFrames) vtimelines[0]); DAUKF. keyframes[0]. Value =Dcurrtranx;//Play animation start positionintIdiff = (int)( the- -Dcurrtranx); if(Idiff <0) {DAUKF. keyframes[1]. Value = (- the+ (Idiff/2)); }                Else if(Idiff = =0)                {                    return; }                Else if(Idiff >0) {DAUKF. keyframes[1]. Value = (Dcurrtranx +-idiff/2);            } handfungtlsb.begin (); }            Else if(Dcurrtranx >- the)            {//go right                varVtimelines =Handfungtrsb.children; DoubleAnimationUsingKeyFrames DAUKF= ((DoubleAnimationUsingKeyFrames) vtimelines[0]); DAUKF. keyframes[0]. Value =Dcurrtranx; if(Dcurrtranx = =0)                    return; ElseDAUKF. keyframes[1]. Value = (Dcurrtranx/2);            Handfungtrsb.begin (); }        }

That's how it works.