前回は、C#のコードでアニメーションを組み立てて実行した。実は、これも全てXAMLでかけてしまう。ということで書いてみようと思う。
とりあえず、前回のプロジェクトでC#のコードを書く前の段階に戻す。
<Window x:Class="WpfAnimeStudy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Canvas>
<Rectangle Name="animationTarget"
Canvas.Top="10"
Canvas.Left="10"
Width="100"
Height="100"
Fill="Aqua" />
<Button Canvas.Bottom="10" Canvas.Left="10">きっかけ！</Button>
</Canvas>
</Window>
ここにStoryboardとDoubleAnimationを追加していく。色々な書き方はあるが、ResourcesにStoryboardを追加してみようと思う。C#のコードで書いていたものをそのままXAML化。
<Window.Resources>
<Storyboard x:Key="storyboard">
<DoubleAnimation Storyboard.TargetProperty="Width"
Storyboard.TargetName="animationTarget"
Duration="0:0:10"
From="10" To="200" />
<DoubleAnimation Storyboard.TargetProperty="Height"
Storyboard.TargetName="animationTarget"
Duration="0:0:10"
From="10" To="200" />
</Storyboard>
</Window.Resources>
コードとちょっと違うのは、Storyboard.TargetNameという添付プロパティを使用しているところかな。
この添付プロパティを使うと、アニメーションさせたいターゲットを指定できる。この場合animationTargetという名前のRectangleをアニメーションさせたいので、Storyboard.TargetName=”animationTarget”という風になる。
最後に、このストーリーボードを開始する処理を書けば完成だ。これもXAMLでいける。クリック時にストーリーボードを起動するにはTriggersプロパティとEventTriggerとBeginStoryboardというものを使う。Triggersプロパティは、FrameworkElementという結構上の階層で定義されてるので、基本的に画面に置くコントロール系には全て備わっているプロパティです。
StyleやControlTemplate等にも同名のプロパティがあるが、これらはTriggerやDataTriggerやEventTriggerなんかをサポートするけど、FrameworkElement.TriggersではEventTriggerしかサポートしていない。今回の例では、ボタンクリックのイベントが拾えればいいのでEventTriggerが使えればいいので、これを使ってみようと思う。
<Button Canvas.Bottom="10" Canvas.Left="10">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource storyboard}" />
</EventTrigger>
</Button.Triggers>
きっかけ！
</Button>
EventTriggerで、Button.Clickが起きたらResources内のstoryboardを開始するように指定している。
これで完成だ。一応XAML全体を以下に示します。
<Window x:Class="WpfAnimeStudy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Storyboard x:Key="storyboard">
<DoubleAnimation Storyboard.TargetProperty="Width"
Storyboard.TargetName="animationTarget"
Duration="0:0:10"
From="10" To="200" />
<DoubleAnimation Storyboard.TargetProperty="Height"
Storyboard.TargetName="animationTarget"
Duration="0:0:10"
From="10" To="200" />
</Storyboard>
</Window.Resources>
<Canvas>
<Rectangle Name="animationTarget"
Canvas.Top="10"
Canvas.Left="10"
Width="100"
Height="100"
Fill="Aqua" />
<Button Canvas.Bottom="10" Canvas.Left="10">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource storyboard}" />
</EventTrigger>
</Button.Triggers>
きっかけ！
</Button>
</Canvas>
</Window>
実行結果は前回と同じなので割愛。
以上！