windows phone水平滑动翻页动画效果_移动开发_编程开发_程序员俱乐部

XAM部分：

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

cs代码部分：

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 LayoutRoot_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            Point point = e.GetPosition(LayoutRoot);
            if (point.X <= 240)
            {
                //上一页。
                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();
            }
        }

转自：http://www.cnblogs.com/poorpan/archive/2012/04/23/2466413.html