自定切換頁面動畫

2012-01-06

2991
0
C#

摘要:自定切換頁面動畫

在Silverlight裡，若我們要做切換頁面的動畫，除了使用內建的方式之外，我們也是可以利用Blend 4來製作的！

首先，我們先在Blend 4裡製作兩個動畫，一個叫PageIn，另一個叫PageOut。

再來我們回到VS裡，先在參考那邊加入 Microsoft.Phone.Controls.Toolkit 這個元件。

加完之後，再新增個類別檔叫叫MyTranstion.cs，先引入

using Microsoft.Phone.Controls;

內容為

    public class MyTransition : TransitionElement
    {
        public const string StoryboardPropertyName = "Storyboard";

        public Storyboard Storyboard
        {
            get { return (Storyboard)GetValue(StoryboardProperty); }
            set { SetValue(StoryboardProperty, value); }
        }

        public static readonly DependencyProperty StoryboardProperty =
            DependencyProperty.Register(StoryboardPropertyName, typeof(Storyboard), typeof(MyTransition),
            new PropertyMetadata(null));

        public override ITransition GetTransition(System.Windows.UIElement element)
        {
            return new Transition(element, this.Storyboard);
        }
    }

加完後，打開要展現動畫的XAML裡，在上頭的 <phone:PhoneApplicationPage 裡面加上

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:local="clr-namespace:ForExhibit"

ForExhibit 請換成您專案的名稱喔！

此時您的XAML裡應該已經有剛剛所新增的動畫Code的了，在它的下面加上

   <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <local:MyTransition Storyboard="{StaticResource PageIn}"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <local:MyTransition Storyboard="{StaticResource PageIn}"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
 
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <local:MyTransition Storyboard="{StaticResource PageOut}"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <local:MyTransition Storyboard="{StaticResource PageOut}"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

最後再編輯App.xaml.cs，找到

RootFrame = new PhoneApplicationFrame();

改成

RootFrame = new TransitionFrame();

這樣就大功告成啦！這樣就有自己的頁面切換動畫了！

回首頁