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 < - && e.HorizontalVelocity < ) {
                 //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 >  && e.HorizontalVelocity > ) {
                 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 < - && e.HorizontalVelocity < ) {
                 //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 >  && e.HorizontalVelocity > ) {
                 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[], backCtrl);
                 Storyboard.SetTarget(storyboard.Children[], backCtrl);
                 Storyboard.SetTarget(storyboard.Children[], frontCtrl);
                 Storyboard.SetTarget(storyboard.Children[], frontCtrl);
                 Storyboard.SetTarget(storyboard.Children[], 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[], backCtrl);
 Storyboard.SetTarget(storyboard.Children[], backCtrl);
 Storyboard.SetTarget(storyboard.Children[], frontCtrl);
 Storyboard.SetTarget(storyboard.Children[], frontCtrl);
 Storyboard.SetTarget(storyboard.Children[], frontCtrl);

源码下载