Blend 自定义横竖屏切换动画

今天写了一个小动画，把这几天研究的Blend相关知识简单的串接一下，效果那如下面几张图：

  

 

也就是在切换横竖屏的时候让按钮产生移动效果，来让他们在切换时移动到正确位置；还有就是横屏左和横屏右时切换，使用旋转加移动。

下面说下整个动画的制作流程

一、首先，创建一个Silverlight for Windows Phone应用程序，让它支持横竖屏，并默认为竖屏

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

把名为LayoutRoot的Grid控件里的所有子元素删除，并添加如下代码：

<Button x:Name="TopLeftButton" Content="Top Left" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,20,0,0" Width="200" />
<Button x:Name="TopRightButton" Content="Top Right"  HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,20,20,0" Width="200" />
<Button x:Name="BottomLeftButton" Content="Bottom Left"  HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="20,0,0,20" Width="200" />
<Button x:Name="BottomRightButton" Content="Bottom Right"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,20,20" Width="200" />

二、做好这些以后打开Blend（View->Open in Expression Blend）
在Blend的左上角选项卡中点击States，并点击Add state group按钮，添加一个名为OrientationStates的状态分组，并为此分组添加3个状态，分别为Portrait、LandscapeRight和LandscapeLeft。

1、接下来我们选中Portrait点击右边的Add transition的下拉列表选择Portrait->LandscapeRight（这一步是指定状态Portrait到状态LandscapeRight过程时），这时在Portrait节点下面出现LandscapeRight，我们点击LandscapeRight，这时在Objects and timeline会出现时间线，我们在时间线1秒时分别给4个按钮添加一个关键帧，点击 Record Keyframe。再在0秒时为TopLeftButton添加一个关键帧，并把Transform下“+”选项卡里的Y设置为371，同样做法分别设置TopRightButton的X为-489，BottomLeftButton的X为489，BottomRightButton的Y为-371。

重复这一步添加Portrait->LandscapeLeft这一状态转换，设置值为左上按钮0帧时X为489，右上Y为371，左下Y为-371，右下X位-489。

2、在LandscapeRight状态里重复和1类似的步骤添加LandscapeRight->LandscapeLeft，0时给4个按钮设置一个关键帧，但并不做任何操作。在1秒时对TopLeftButton和LandscapeRight设置Transform“+”选项卡里的Y设置为371，同时设置旋转度为720,（在+后面的选项卡里设置）。BottomLeftButton和BottomRightButton的Transform里Y设置为-371，旋转也设置720。

再添加一个LandscapeRight->Portrait，在1秒时给四个按钮添加一个关键帧，但不做任何操作，再在0秒时添加一个关键帧，设置Transform属性（LT,LR,BL,BR）为（X240，Y660,Y-660，X-240）

在添加一个*->LandscapeRight，操作和Portrait->LandscapeRight完全一样，为什么添加这一帧那？因为当我们首次进入这个页面时，状态是停留在Base时，Base和Portrait是一样的显示效果的，只有当我们更换横竖屏时才会进入LandscapeRight或者LandscapeLeft这时不会执行我们的动画，并且再这之后是不会再次回到Base状态，至于为什么，你要问微软的设计者了。

3.这个步骤和2是完全一样的，只不过设置的值会改变，我就不赘述了。

4.我们可以简单的测试下效果，保存回到Visual Studio中，在cs文件写如下面代码

        protected override void OnOrientationChanged(OrientationChangedEventArgs e)
        {
            base.OnOrientationChanged(e);
            switch (e.Orientation)
            {
                case PageOrientation.Portrait:
                case PageOrientation.PortraitDown:
                case PageOrientation.PortraitUp:
                    VisualStateManager.GoToState(nCtrl, "Portrait", true);
                    break;
                case PageOrientation.LandscapeLeft:
                    VisualStateManager.GoToState(nCtrl, "LandscapeLeft", true);
                    break;
                case PageOrientation.LandscapeRight:
                    VisualStateManager.GoToState(nCtrl, "LandscapeRight", true);
                    break;
                case PageOrientation.Landscape:
                    break;
            }
        }

就可以运行看到效果了，和上面的效果图是一样的，不过到这里并没有结束。我们要做最后的一个事件绑定。

三、先把步骤二下的4添加的代码删掉。新建一个文件OrientationActive.cs。加入下面代码

using Microsoft.Phone.Controls;
using System.Windows.Interactivity;
using System.Windows;

namespace PhoneApp1
{
    public class OrientationActive : TriggerAction<PhoneApplicationPage>
    {
        #region -- 自定义依赖属性 --
        public static readonly DependencyProperty LandscapeLeftStateNameProperty =
            DependencyProperty.Register("LandscapeLeftStateName", typeof(string), typeof(OrientationActive), new PropertyMetadata("LandscapeLeft"));
        public string LandscapeLeftStateName 
        {
            get { return (string)GetValue(LandscapeLeftStateNameProperty); }
            set { SetValue(LandscapeLeftStateNameProperty, value); }
        }

        public static readonly DependencyProperty LandscapeRightStateNameProperty =
            DependencyProperty.Register("LandscapeRightStateName", typeof(string), typeof(OrientationActive), new PropertyMetadata("LandscapeRight"));
        public string LandscapeRightStateName
        {
            get { return (string)GetValue(LandscapeRightStateNameProperty); }
            set { SetValue(LandscapeRightStateNameProperty, value); }
        }

        public static readonly DependencyProperty PortraitRightStateNameProperty =
            DependencyProperty.Register("PortraitRightStateName", typeof(string), typeof(OrientationActive), new PropertyMetadata("Portrait"));
        public string PortraitRightStateName
        {
            get { return (string)GetValue(PortraitRightStateNameProperty); }
            set { SetValue(PortraitRightStateNameProperty, value); }
        }
        #endregion

        protected override void Invoke(object parameter)
        {
            var nCtrl = this.AssociatedObject;
            var NewOrientation = (parameter as OrientationChangedEventArgs).Orientation;

            switch (NewOrientation)
            {
                case PageOrientation.Portrait:
                case PageOrientation.PortraitDown:
                case PageOrientation.PortraitUp:
                    VisualStateManager.GoToState(nCtrl, "Portrait", true);
                    break;
                case PageOrientation.LandscapeLeft:
                    VisualStateManager.GoToState(nCtrl, "LandscapeLeft", true);
                    break;
                case PageOrientation.LandscapeRight:
                    VisualStateManager.GoToState(nCtrl, "LandscapeRight", true);
                    break;
                case PageOrientation.Landscape:
                    break;
            }
        }
    }
}

最要是添加了3个自定义依赖属性，并重写了Invoke，目的是为绑定OnOrientationChanged事件做准备。
写好这个文件，我们再次打开blend在Assets中的Behaciours找到我们定义的行为OrientationActive，并把它拖到Objects and timeline下phoneAppcationPage节点上，这时在右边的Properties中把EventName属性选择为OnOrientationChanged，保存，回到Visual Studio。到此算是大功告成了，我们可以运行看看。并回去好好研究下Blend生成的代码，这个是很有意义的。

本问的源码：https://files.cnblogs.com/qq278360339/PhoneApp1.zip