[ストアアプリ][入門] Step47. アニメーション6 ～オブジェクトの位置を変更する～

今回は画面上に配置したオブジェクトの位置を変更する方法について見ていきます。

既定では MainPage.xaml にはGridが配置されています。

Grid上にコントロールを配置すると、そのコントロールの位置はMarginで指定することになります。

そこで、Grid上にCanvasコントロールを配置し、そのCanvasコントロールの上に実際に移動したいコントロールを配置します。

アニメーションのターゲットには、Canvasコントロールの添付プロパティであるCanvas.LeftやCanvs.Topを指定することで、座標値を変化させることが可能になります。

今回はMainPage.xaml に Canvasコントロールを配置し、その上にRectangleコントロールを配置します。

添付プロパティをStoryBoardのTargetプロパティに指定する場合は()で括って以下のように指定します。

Storyboard.TargetProperty="(Canvas.Left)"

以下に今回のXAMLの例を示します。

実行してButtonをクリックすると、配置したRectangleが左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="(Canvas.Left)"
                             EnableDependentAnimation="True"
                             From="100" To="200" 
                             Duration="0:0:3"/>


        </Storyboard>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Canvas>
            <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" 
                       Stroke="Black" VerticalAlignment="Top" Width="100"
                       Canvas.Left="100"
                       Canvas.Top="100"/>
        </Canvas>
    </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();
}

Please follow and like us: