Tilt Effect

在 MSDN 的 Windows Phone 專頁中，可以找到一些範例程式碼，
最近有興趣的是這個 TiltEffect Sample

原因是最近我們正想為公司 WP7 App 中的按鍵加入一些動畫效果，
這個 Tilt Effect Sample 表現的效果蠻不錯的，個人相當喜愛，
但我們的 App 不太適合直接拿這個 Sample Code 來用，
這份範例的動畫主要是在 mouse leave 時發生按鍵浮起來的效果，
在我們寫的 App 中，幾乎所有的按鍵在 mouse enter 後立刻就會導至新的 Page
也就是說用戶根本看不到 mouse leave 時的動畫效果，
所以我必須將這個效果移到 mouse pressed 上面。

範例中的 TiltEffect.cs 這個 class 是重點中的重點，
這種方法可以讓整個 Page 的 Controller 預設得到同樣的效果，
但有點太過全面也有點超出我們的需求，
最後是使用 Style 的方式在按鍵中加入效果，xaml 紀錄如下。


<phone:PhoneApplicationPage
    x:Class="Btn_SB_Test.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" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="customButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Projection>
                                <PlaneProjection x:Name="cusBtnProjection" CenterOfRotationX="1" CenterOfRotationY="1" />
                            </Grid.Projection>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="cusBtnProjection" Storyboard.TargetProperty="RotationX" From="0" To="-20" Duration="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="cusBtnProjection" Storyboard.TargetProperty="RotationY" From="0" To="10" Duration="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="cusBtnProjection" Storyboard.TargetProperty="GlobalOffsetZ" From="75" To="50" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}"
                                            Foreground="{TemplateBinding Foreground}"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Padding="{TemplateBinding Padding}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}">
                            </ContentControl>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Button x:Name="btn_Album" Height="75" Width="75" BorderThickness="0" Padding="0" Style="{StaticResource customButtonStyle}">
            <Image x:Name="img_Login" Height="50" Width="50"/>
        </Button>
    </Grid>
</phone:PhoneApplicationPage>