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

            <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