wp———图片切换效果

　　此篇文章主要是记录一下使用XamlReader加载动画时遇到的一些问题。

首先呢，把源码附上

<phone:PhoneApplicationPage
    x:Class="PicChangedAnimation.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" 
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Image x:Name="image" Stretch="Fill" Source="/Image/a.jpg" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener DragCompleted="GestureListener_DragCompleted_1"/>
            </toolkit:GestureService.GestureListener>
        </Image>
        <Image x:Name="image1" Stretch="Fill" Source="/Image/b.jpg" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener DragCompleted="GestureListener_DragCompleted_2"/>
            </toolkit:GestureService.GestureListener>
        </Image>
    </Grid>

</phone:PhoneApplicationPage>

using System;
using System.Windows;
using System.Windows.Markup;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.Windows.Navigation;
using System.Windows.Media.Animation;

namespace PicChangedAnimation
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
        }


        // ====================================================================================================================
        private void GestureListener_DragCompleted_1(object sender, DragCompletedGestureEventArgs e) {
            if (e.HorizontalChange < -50 && e.HorizontalVelocity < 0) {
                //LeftSlideStoryboard.Begin();
                string moveLeft = -(LayoutRoot.ActualWidth) + "";
                Storyboard sb = InitLeftSlideStoryboard(moveLeft, image1, image);
                if (sb != null) {
                    try { 
                        sb.Begin(); 
                    } catch (Exception ex) { 
                        System.Diagnostics.Debug.WriteLine(ex.Message); 
                    }
                }
                e.Handled = true;
            } else if (e.HorizontalChange > 50 && e.HorizontalVelocity > 0) {
                string moveLeft = LayoutRoot.ActualWidth + "";
                Storyboard sb = InitLeftSlideStoryboard(moveLeft, image1, image);
                if (sb != null) {
                    try { 
                        sb.Begin(); 
                    } catch (Exception ex) { 
                        System.Diagnostics.Debug.WriteLine(ex.Message); 
                    }
                }
                e.Handled = true;
            }
        }

        private void GestureListener_DragCompleted_2(object sender, DragCompletedGestureEventArgs e) {
            if (e.HorizontalChange < -50 && e.HorizontalVelocity < 0) {
                //LeftSlideStoryboard.Begin();
                string moveLeft = -(LayoutRoot.ActualWidth) + "";
                Storyboard sb = InitLeftSlideStoryboard(moveLeft, image, image1);
                if (sb != null) {
                    try { 
                        sb.Begin(); 
                    } catch (Exception ex) { 
                        System.Diagnostics.Debug.WriteLine(ex.Message); 
                    }
                }
                e.Handled = true;
            } else if (e.HorizontalChange > 50 && e.HorizontalVelocity > 0) {
                string moveLeft = LayoutRoot.ActualWidth + "";
                Storyboard sb = InitLeftSlideStoryboard(moveLeft, image, image1);
                if (sb != null) {
                    try { 
                        sb.Begin(); 
                    } catch (Exception ex) { 
                        System.Diagnostics.Debug.WriteLine(ex.Message); 
                    }
                }
                e.Handled = true;
            }
        }

        // ====================================================================================================================
//        // {0}-{-480}
//        private string LEFT_SLIDE_STORYBOARD =
//            @"<Storyboard x:Name=""LeftSlideStoryboard"" 
//                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"" >
//                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.Opacity)"">
//                    <EasingDoubleKeyFrame KeyTime=""0"" Value=""0""/>
//                    <EasingDoubleKeyFrame KeyTime=""0:0:0.6"" Value=""1""/>
//                </DoubleAnimationUsingKeyFrames>
//                <DoubleAnimation Duration=""0:0:0.6"" To=""0"" Storyboard.TargetProperty=""(UIElement.Opacity)"" d:IsOptimized=""True""/>
//                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.RenderTransform).(CompositeTransform.TranslateX)"">
//                    <EasingDoubleKeyFrame KeyTime=""0:0:0.6"" Value=""{0}""/>
//                    <EasingDoubleKeyFrame KeyTime=""0:0:0.61"" Value=""0""/>
//                </DoubleAnimationUsingKeyFrames>
//            </Storyboard>";
        private string LEFT_SLIDE_STORYBOARD =
            @"<Storyboard x:Name=""LeftSlideStoryboard"" 
                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"" >
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.Opacity)"">
                    <EasingDoubleKeyFrame KeyTime=""0"" Value=""0""/>
                    <EasingDoubleKeyFrame KeyTime=""0:0:0.01"" Value=""0""/>
                    <EasingDoubleKeyFrame KeyTime=""0:0:0.6"" Value=""1""/>
                    <EasingDoubleKeyFrame KeyTime=""0:0:0.61"" Value=""1""/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.Visibility)"">
                    <DiscreteObjectKeyFrame KeyTime=""0"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime=""0:0:0.01"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime=""0:0:0.6"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime=""0:0:0.61"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.Opacity)"">
                    <EasingDoubleKeyFrame KeyTime=""0"" Value=""1""/>
                    <EasingDoubleKeyFrame KeyTime=""0:0:0.01"" Value=""1""/>
                    <EasingDoubleKeyFrame KeyTime=""0:0:0.6"" Value=""0""/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.Visibility)"">
                    <DiscreteObjectKeyFrame KeyTime=""0"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime=""0:0:0.01"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime=""0:0:0.6"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime=""0:0:0.61"">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.RenderTransform).(CompositeTransform.TranslateX)"">
                    <EasingDoubleKeyFrame KeyTime=""0:0:0.6"" Value=""{0}""/>
                    <EasingDoubleKeyFrame KeyTime=""0:0:0.61"" Value=""0""/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>";
        
        public Storyboard InitLeftSlideStoryboard(string moveLeft, Image backCtrl, Image frontCtrl) {
            string displayXaml = string.Format(LEFT_SLIDE_STORYBOARD, moveLeft);
            Storyboard storyboard = null;
            try {
                storyboard = XamlReader.Load(displayXaml) as Storyboard;
                Storyboard.SetTarget(storyboard.Children[0], backCtrl);
                Storyboard.SetTarget(storyboard.Children[1], backCtrl);
                Storyboard.SetTarget(storyboard.Children[2], frontCtrl);
                Storyboard.SetTarget(storyboard.Children[3], frontCtrl);
                Storyboard.SetTarget(storyboard.Children[4], frontCtrl);
            } catch (Exception e) { 
                System.Diagnostics.Debug.WriteLine(e.Message); 
            }
            return storyboard;
        }

    }
}

然后呢，说下遇到的问题：
1、“System.Windows.Markup.XamlParseException”类型的第一次机会异常在 System.Windows.ni.dll 中发生undeclared prefix [Line: 1 Position: 42]

　　问题出在，加载xaml语句时，存在没有声明就使用的类型前缀

　　我们添加上下面的引用就可以了

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

2、“System.InvalidOperationException”类型的第一次机会异常在 System.Windows.ni.dll 中发生Animation target not specified.
　　

　　问题出在，没有指定动画的目标控件，但即使我们在xaml中指定了，但一样会出现这样的问题，原因在上面的xaml中没有控件的声明。

　　解决方法可以采用c#代码中指定，如下

storyboard = XamlReader.Load(displayXaml) as Storyboard;
Storyboard.SetTarget(storyboard.Children[0], backCtrl);
Storyboard.SetTarget(storyboard.Children[1], backCtrl);
Storyboard.SetTarget(storyboard.Children[2], frontCtrl);
Storyboard.SetTarget(storyboard.Children[3], frontCtrl);
Storyboard.SetTarget(storyboard.Children[4], frontCtrl);

 源码下载