[ストアアプリ][入門] Step46. アニメーション5 ～オブジェクトのサイズを変更する～

今回は2つのアニメーションを同時に実行してみましょう。

MainPage.xamlにRectangleコントロールとButtonコントロールを1つずつ貼り付けてください。

貼り付けたRectangleコントロールの名前はrectBlockとします。

最初に以下XAMLを記述してください。

このXAMLでは、1つのアニメーションののみを実行します。retBoxの幅が3秒間で100～200に大きくなります。

XAMLの例

<Page
    x:Class="Step23.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Step23"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="Page_Loaded">

    <Page.Resources>
        <Storyboard x:Key="storyBoard">
            <DoubleAnimation Storyboard.TargetName="rectBlock"
                             Storyboard.TargetProperty="Width"
                             EnableDependentAnimation="True"
                             From="100" To="200" 
                             Duration="0:0:3"/>
        </Storyboard>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Left" Margin="100,48,0,0" VerticalAlignment="Top" Click="Button_Click"/>
        <Rectangle x:Name="rectBlock" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="103,99,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
    </Grid>
</Page>

Buttonクリック時のイベントは以下のようにしてください。

VBの例

Imports Windows.UI.Xaml.Media.Animation

Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    DirectCast(Me.Resources("storyBoard"), Storyboard).Begin()
End Sub

C#の例

using Windows.UI.Xaml.Media.Animation;

private void Button_Click(object sender, RoutedEventArgs e)
{
    (this.Resources["storyBoard"] as Storyboard).Begin();
}

次にもう1つのアニメーションとして、縦方向のサイズを変更するアニメーションを追加してみましょう。

<DoubleAnimation>要素で指定できるターゲット（アニメーションの対象）は1つです。

ではどのようにして、もう1つのターゲットを指定するかというと、単純に<DoubleAnimation>要素を追加します。

先ほどのXAMLのStoryBoard部分を以下の様にします。

XAMLの例

<Storyboard x:Key="storyBoard">
    <!--横方向のアニメーション-->
    <DoubleAnimation Storyboard.TargetName="rectBlock"
                     Storyboard.TargetProperty="Width"
                     EnableDependentAnimation="True"
                     From="100" To="200" 
                     Duration="0:0:3"/>

    <!--縦方向のアニメーション-->
    <DoubleAnimation Storyboard.TargetName="rectBlock"
                     Storyboard.TargetProperty="Height"
                     EnableDependentAnimation="True"
                     From="100" To="200" 
                     Duration="0:0:3"/>
</Storyboard>

Please follow and like us: