Windows Phone开发经验谈(8)-手势切换的方式（下）

     继上篇Windows Phone开发经验谈(7)-手势切换的方式（上）后，我继续来给大家说说如何在切换的过程中加入动画...

     首先来说说思路首先一个页面的切换需要有过渡动画，我们可以考虑用3个不同的容器之间进行切换.默认的要显示第2的这个容器.左边滑动的时候第1个容器跑到中间 右边滑动的时候第2个容器跑到中间.

    xaml代码如下：

?

<phone:PhoneApplicationPage

    x:Class="PhoneApp3.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True"

        xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

 

    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="Init"  >

<br>            <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="480"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Name="Next"  >

            <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="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="480"/>

 

                <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="480"/>

            </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">

        <toolkit:GestureService.GestureListener>

            <toolkit:GestureListener Flick="GestureListener_Flick"/>

        </toolkit:GestureService.GestureListener>

        <StackPanel   HorizontalAlignment="Left"  x:Name="zero"

VerticalAlignment="Top" Width="480" Height="750"

RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2"  Canvas.Top="20">

            <TextBlock Width="480" Height="750"

TextWrapping="Wrap"

Text="0000000000000000000000000000000000000000000000000000000000000000000000000000000"

FontSize="60"></TextBlock>

            <StackPanel.RenderTransform>

                <CompositeTransform/>

            </StackPanel.RenderTransform>

 

        </StackPanel>

        <StackPanel   HorizontalAlignment="Left" x:Name="one"

VerticalAlignment="Top" Width="480" Height="750" 

RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" Canvas.Left="480"

Canvas.Top="20">

 

            <!--<StackPanel.Background>

 

                    <ImageBrush ImageSource="/text2;component/Images/Desert.jpg" />

 

                </StackPanel.Background>-->

 

            <TextBlock Width="480" Height="750"

TextWrapping="Wrap"

Text="11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"

FontSize="60"></TextBlock>

 

            <StackPanel.RenderTransform>

 

                <CompositeTransform />

 

            </StackPanel.RenderTransform>

 

        </StackPanel>

        <StackPanel   HorizontalAlignment="Left" x:Name="two"

VerticalAlignment="Top" Width="480" Height="750" 

RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" Canvas.Left="960"

Canvas.Top="20">

 

            <!--<StackPanel.Background>

 

                    <ImageBrush ImageSource="/text2;component/Images/Desert.jpg" />

 

                </StackPanel.Background>-->

 

            <TextBlock Width="480" Height="750"

TextWrapping="Wrap"

Text="222222222222222222222222222222222222222222222222222222222222222222222222222"

FontSize="60"></TextBlock>

 

            <StackPanel.RenderTransform>

 

                <CompositeTransform />

 

            </StackPanel.RenderTransform>

 

        </StackPanel>

 

    </Grid>

 

</phone:PhoneApplicationPage>

 

后台代码如下

?

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

 

namespace PhoneApp3

{

    public partial class MainPage : PhoneApplicationPage

    {

 

 

 

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

 

        public MainPage()

        {

 

            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)

            {

 

                prev();

            }

            else

            {

 

                next();

 

            }

 

        }

 

        private void prev()

        {

            //上一页。

 

            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();

        }

 

        private void next()

        {

            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();

        }

 

        private void GestureListener_Flick(object sender, Microsoft.Phone.Controls.FlickGestureEventArgs e)

        {

            if (e.Direction == System.Windows.Controls.Orientation.Horizontal)

            {

                if (e.HorizontalVelocity > 0.0)

                {

                    prev();

                }

                else

                {

                    next();

                }

            }

        }

    }

}

 

上面的代码就是首先初始化让中间的位置的显示，然后上一个就是左边的移动到中间来让他显示,下一个是右边的移动到中间让他显示...

原理很简单..项目我也打包好,大家研究一下.PhoneApp3.rar