Windows Phone 8 Horizontal sliding page animation effect source

Xam section:

<phone:PhoneApplicationPage.Resources>
<storyboard x:name= "Init" >
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "storyboard.targetname=" Zero ">
<easingdoublekeyframe keytime= "0" value= " -480"/>
</DoubleAnimationUsingKeyFrames>

<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" two ">
<easingdoublekeyframe keytime= "0" value= "/>"
</DoubleAnimationUsingKeyFrames>
</Storyboard>

<storyboard x:name= "Next" >
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "storyboard.targetname=" Zero ">
<easingdoublekeyframe keytime= "0" value= "/>"
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" one ">
<easingdoublekeyframe keytime= "0" value= "0"/>
<easingdoublekeyframe keytime= "0:0:0.4" value= " -480"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" two ">
<easingdoublekeyframe keytime= "0" value= "/>"
<easingdoublekeyframe keytime= "0:0:0.4" value= "0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

<storyboard x:name= "Prev" >
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "storyboard.targetname=" Zero ">
<easingdoublekeyframe keytime= "0" value= " -480"/>
<easingdoublekeyframe keytime= "0:0:0.4" value= "0"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" one ">
<easingdoublekeyframe keytime= "0" value= "0"/>
<easingdoublekeyframe keytime= "0:0:0.4" value= "/>"
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" two ">
<easingdoublekeyframe keytime= "0" value= " -480"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>

<grid x:name= "LayoutRoot" background= "Transparent" tap= "Layoutroot_tap" >
<stackpanel horizontalalignment= "left" x:name= "zero" verticalalignment= "the Top" width= "the" height= "750" Rendertransformorigin= "0.5,0.5" grid.rowspan= "2" canvas.top= ">"
<textblock width= "height=" 750 "textwrapping=" Wrap "text=" 0000000000000000000000000000000000000000000000000000000000000000000000000000000 "FontSize=" ></ Textblock>
<StackPanel.RenderTransform>
<CompositeTransform/>
</StackPanel.RenderTransform>
</StackPanel>
<stackpanel horizontalalignment= "left" x:name= "one" verticalalignment= "the Top" width= "the" height= "750" Rendertransformorigin= "0.5,0.5" grid.rowspan= "2" canvas.left= "canvas.top=" >
<!--<StackPanel.Background>
<imagebrush imagesource= "/text2;component/images/desert.jpg"/>
</StackPanel.Background>-->
<textblock width= "height=" 750 "textwrapping=" Wrap "text=" 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 "FontSize=" > </TextBlock>
<StackPanel.RenderTransform>
<compositetransform/>
</StackPanel.RenderTransform>
</StackPanel>
<stackpanel horizontalalignment= "left" x:name= "two" verticalalignment= "Top" width= "" "height=" 750 " Rendertransformorigin= "0.5,0.5" grid.rowspan= "2" canvas.left= "960" canvas.top= ">"
<!--<StackPanel.Background>
<imagebrush imagesource= "/text2;component/images/desert.jpg"/>
</StackPanel.Background>-->
<textblock width= "height=" 750 "textwrapping=" Wrap "text=" 222222222222222222222222222222222222222222222222222222222222222222222222222 "FontSize=" ></TextBlock >
<StackPanel.RenderTransform>
<compositetransform/>
</StackPanel.RenderTransform>
</StackPanel>
</Grid>


CS Code section:

Dictionary<int, stackpanel> dic = new Dictionary<int, stackpanel> ();

Constructors
Public MainPage ()
{
InitializeComponent ();

Dic. ADD (0, zero);
Dic. ADD (1, one);
Dic. ADD (2, two);
Init.begin ();
}

private void Layoutroot_tap (object sender, System.Windows.Input.GestureEventArgs e)
{
Point point = E.getposition (LayoutRoot);
if (point. X <= 240)
{
Previous page.
Prev.stop ();
Storyboard.settargetname (Prev.children[0], dic[0]. Name);
Storyboard.settargetname (Prev.children[1], dic[1]. Name);
Storyboard.settargetname (Prev.children[2], dic[2]. Name);
StackPanel temp = dic[2];
DIC[2] = dic[1];
DIC[1] = dic[0];
DIC[0] = temp;
Prev.begin ();
}
Else
{
Next.stop ();
Storyboard.settargetname (Next.children[0], dic[0]. Name);
Storyboard.settargetname (Next.children[1], dic[1]. Name);
Storyboard.settargetname (Next.children[2], dic[2]. Name);
StackPanel temp = dic[0];
Dic[0] = dic[1];
DIC[1] = dic[2];
DIC[2] = temp;
Next.begin ();
}
}


another Windows Phone horizontal slide Flip animation effect

Recently do novel reader, need to achieve that kind of sliding page effect, look for some things on the internet, there is not good to understand, so I want to do it myself. Think for a few days finally out, bring over to share.
Of course, this is just some basic code.

Here is the front of the code, mainly a grid inside put 3 StackPanel. Each StackPanel renders a compositetransform animation for it.

XAML Code

<grid x:name= "LayoutRoot" background= "Transparent" tap= "Layoutroot_tap" >
<stackpanel horizontalalignment= "left" x:name= "zero" verticalalignment= "the Top" width= "the" height= "750" Rendertransformorigin= "0.5,0.5" grid.rowspan= "2" canvas.top= ">"
<textblock width= "height=" 750 "textwrapping=" Wrap "text=" 0000000000000000000000000000000000000000000000000000000000000000000000000000000 "FontSize=" ></ Textblock>
<StackPanel.RenderTransform>
<CompositeTransform/>
</StackPanel.RenderTransform>
</StackPanel>
<stackpanel horizontalalignment= "left" x:name= "one" verticalalignment= "the Top" width= "the" height= "750" Rendertransformorigin= "0.5,0.5" grid.rowspan= "2" canvas.left= "canvas.top=" >
<!--<StackPanel.Background>
<imagebrush imagesource= "/text2;component/images/desert.jpg"/>
</StackPanel.Background>-->
<textblock width= "height=" 750 "textwrapping=" Wrap "text=" 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 "FontSize=" > </TextBlock>
<StackPanel.RenderTransform>
<compositetransform/>
</StackPanel.RenderTransform>
</StackPanel>
<stackpanel horizontalalignment= "left" x:name= "two" verticalalignment= "Top" width= "" "height=" 750 " Rendertransformorigin= "0.5,0.5" grid.rowspan= "2" canvas.left= "960" canvas.top= ">"
<!--<StackPanel.Background>
<imagebrush imagesource= "/text2;component/images/desert.jpg"/>
</StackPanel.Background>-->
<textblock width= "height=" 750 "textwrapping=" Wrap "text=" 222222222222222222222222222222222222222222222222222222222222222222222222222 "FontSize=" ></TextBlock >
<StackPanel.RenderTransform>
<compositetransform/>
</StackPanel.RenderTransform>
</StackPanel>
</Grid>

The main effect is that three stackpanel are overlapping. But normally, it's one on the left, one on the right and one in the middle.
So after the page initialization you need to give an animation that we call Init

Animation code into <phone:PhoneApplicationPage.Resources>

Initializing animations

<storyboard x:name= "Init" >
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "storyboard.targetname=" Zero ">
<easingdoublekeyframe keytime= "0" value= " -480"/>
</DoubleAnimationUsingKeyFrames>

<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" two ">
<easingdoublekeyframe keytime= "0" value= "/>"
</DoubleAnimationUsingKeyFrames>
</Storyboard>

When we want to achieve the function of turning over the next page. The StackPanel with name Zero should run to the right of the screen, while the numbered one and two move 480 pixels to the left.
Previous page feature: The StackPanel with name two should run to the left of the screen, while the numbered one and two move 480 pixels to the right.

Next Page Animation

<storyboard x:name= "Next" >
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "storyboard.targetname=" Zero ">
<easingdoublekeyframe keytime= "0" value= "/>"
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" one ">
<easingdoublekeyframe keytime= "0" value= "0"/>
<easingdoublekeyframe keytime= "0:0:0.4" value= " -480"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" two ">
<easingdoublekeyframe keytime= "0" value= "/>"
<easingdoublekeyframe keytime= "0:0:0.4" value= "0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Previous page animation

<storyboard x:name= "Prev" >
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "storyboard.targetname=" Zero ">
<easingdoublekeyframe keytime= "0" value= " -480"/>
<easingdoublekeyframe keytime= "0:0:0.4" value= "0"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" one ">
<easingdoublekeyframe keytime= "0" value= "0"/>
<easingdoublekeyframe keytime= "0:0:0.4" value= "/>"
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetproperty= "(uielement.rendertransform). (Compositetransform.translatex) "Storyboard.targetname=" two ">
<easingdoublekeyframe keytime= "0" value= " -480"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Then we can trigger the animation when we click on the screen.

When we click on the next page, in fact, our StackPanel order has actually changed. The first time we clicked on the next page. The order should become one two zero. We should go to change their order in real time to realize the animation of the loop.

That insider is scary. Don't elaborate, just look at the code.

Background code

Dictionary<int, stackpanel> dic = new Dictionary<int, stackpanel> ();
Public Page3 ()
{
InitializeComponent ();
Dic. ADD (0, zero);
Dic. ADD (1, one);
Dic. ADD (2, two);
Init.begin ();
}

private void Contentpanel_mouseleave (object sender, MouseEventArgs e)
{

}


private void Layoutroot_tap (object sender, System.Windows.Input.GestureEventArgs e)
{
Point point = E.getposition (LayoutRoot);
if (point. X <= 240)
{
Previous page.
Prev.stop ();
Storyboard.settargetname (Prev.children[0], dic[0]. Name);
Storyboard.settargetname (Prev.children[1], dic[1]. Name);
Storyboard.settargetname (Prev.children[2], dic[2]. Name);
StackPanel temp = dic[2];
DIC[2] = dic[1];
DIC[1] = dic[0];
DIC[0] = temp;
Prev.begin ();
}
Else
{
Next.stop ();
Storyboard.settargetname (Next.children[0], dic[0]. Name);
Storyboard.settargetname (Next.children[1], dic[1]. Name);
Storyboard.settargetname (Next.children[2], dic[2]. Name);
StackPanel temp = dic[0];
Dic[0] = dic[1];
DIC[1] = dic[2];
DIC[2] = temp;
Next.begin ();
}
}

What is worth saying is storyboard.settargetname.

Because each animation effect of the object will be different, so we need to dynamically set the Action object. But before the animation starts, we have to stop. We can think of this, the previous animation is the role of one, you do not stop now, let me to operate two. That's definitely not going to work.