继上篇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