• 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

  • 相关阅读:
    验证码的编写 asp.net
    甲骨文收购Sun,IT业界进入三国时代
    动态加载css文件导致IE8崩溃的问题
    页面调试中关于Console应该注意的地方
    关于仿网易邮箱5.0的Neter UI框架的开源声明
    仿网易邮箱5.0(二):core.js
    仿网易邮箱5.0(三):panel.js
    仿网易邮箱5.0(一):页面基本样式
    Windows下配置Sass编译环境
    ASP+Access查询时按时间进行查询
  • 原文地址:https://www.cnblogs.com/cracker/p/windowsphone_wp7Gesture_finish.html
Copyright © 2020-2023  润新知