アニメーション

こちらを参考にして作ってみた。

コントロールにアニメーションを追加する その1(WP7) | Tech Booster

ボタンが押すと色が変わるようにしたい。まず、ボタンを用意する。アクア色にした。

        <Button Content="Button"  Click="Button_Click">
            <Button.Background>
                <SolidColorBrush x:Name="myButtonColor" Color="Aqua"/>
            </Button.Background>
        </Button>

これに色の変化アニメーションをつける。

        <Button Content="Button"  Click="Button_Click">
            <Button.Background>
                <SolidColorBrush x:Name="myButtonColor" Color="Aqua"/>
            </Button.Background>
            <Button.Resources>
            <Storyboard x:Name="myStoryBoard">
            <ColorAnimation Storyboard.TargetName="myButtonColor"
                            Storyboard.TargetProperty="Color"
                            Duration="0:0:4" From="Aqua" To="Blue"/>                    
            </Storyboard>
            </Button.Resources>

        </Button>

あとは、ボタンが押された際に呼び出せばよい。

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.myStoryBoard.Begin();
        }

次にボタンが下に動くというのをやってみる。

        <Button x:Name="myButton" Content="Button" HorizontalAlignment="Left" Margin="199,534,0,0" Click="myButton_Click">
            <Button.RenderTransform>
                <TranslateTransform x:Name="ButtonPosition" X="0" Y="0" />
            </Button.RenderTransform>
        </Button>

このように変換する部分ButtonPositionを用意してやり

        <Button x:Name="myButton" Click="myButton_Click">
            <Button.RenderTransform>
                <TranslateTransform x:Name="ButtonPosition" X="0" Y="0" />
            </Button.RenderTransform>
            
            <Button.Resources>
                <Storyboard x:Name="myStoryBoardMove">                    
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonPosition"
                                                   Storyboard.TargetProperty="Y">
                        <EasingDoubleKeyFrame x:Name="startY" KeyTime="0" Value="0"/>                       
                        <EasingDoubleKeyFrame x:Name="endY" KeyTime="0:0:2" Value="50"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Button.Resources>
        </Button>

のように、DoublueAnimationKeyFrameで動かす。

実行は

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            this.myStoryBoardMove.Begin();
        }