アニメーション
最後はアニメーションです。WPFではタイムラインベースのアニメーションを扱うことができます。こちらもソースコード無しのサンプルです。
プロジェクト作成&XAMLコード記述
XAMLブラウザアプリケーションを作成し、自動生成された「Page1.xaml」のPage
要素以下のコードを書き換えてください。
<Canvas> <Rectangle Width="120" Height="20" Canvas.Top="25" Canvas.Left="50" Name="rect"> <Rectangle.Fill> <SolidColorBrush x:Name="brush" Color="Red"/> </Rectangle.Fill> </Rectangle> <Button Name="animatedButton" Canvas.Top ="200" Canvas.Left ="50" Height="30" Width="200" HorizontalAlignment="Left"> Click ! <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="animatedButton" Storyboard.TargetProperty="Width" From="200" To="300" Duration="0:0:3" /> <DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="Height" From="20" To="150" Duration="0:0:3" /> <ColorAnimation Storyboard.TargetName="brush" Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:3" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> </Canvas>
ここでは、矩形を描画するRectangleコントロールとボタンコントロールを配置しています。ボタンコントロールの下にいろいろ書いているのがポイントです。
実行
F5キーを押して実行します。
![アニメーション前 アニメーション前](http://cz-cdn.shoeisha.jp/static/images/article/928/928_12.gif)
ボタンをクリックすると……何が起きたのか? キャプチャ画像では分からないその動きを、ぜひ確認してみてください。
![アニメーション後 アニメーション後](http://cz-cdn.shoeisha.jp/static/images/article/928/928_13.gif)
処理内容の説明
ポイントとなるのはボタンコントロールのButton.Triggers
要素以降の記述です。Button.Triggers
要素はボタンに関するイベントを保存するためのコンテナで、その子のEventTrigger
要素がButton.Click
イベントつまりボタンをクリックした場合のイベントを定義しています。
StoryBoard
要素内に書かれた3つのコントロールがそれぞれボタン幅のアニメーション、矩形高さのアニメーション、矩形色のアニメーションを担当しています。
DoubleAnimationコントロールはStoryboard.TargetName
属性で指定されたコントロールのStoryboard.TargetProperty
プロパティの値をFrom
属性からTo
属性まで連続してアニメーションさせます。プロパティの値は実数値である必要があります。ColorAnimationコントロールは同様の動作をしますが、色プロパティを対象とします。
今回は矩形を単色塗り潰しするSolidColorBrushコントロールを用い、Color
プロパティの値をRedからBlueまでアニメーションさせています。
x:Name
属性を用いているのは、前述したようにSolidColorBrush
クラスにName
プロパティが存在しないためです。このように、XAMLを使用すれば、イベントに反応するアニメーションをソースコード無しで実装することができます。なお、今回のアニメーションはXAMLコードをすべて手書きしましたが、本格的なアニメーションの作成には、後述するExpression BlendなどのXAML対応のオーサリングツールを用いるのが現実的でしょう。
まとめ
.NET Framework 3.0入門第1、2回、WPF(XAML)入門はいかがだったでしょうか。現状ではVisual Studio 2005 Extensions for WPFの制限事項が多く、ドラッグ&ドロップで気軽にWPFのさまざまな画面効果を利用、というわけにはいかないのが残念なところです。
Visual Studio 2005 Extensions for WPFは次世代Visual Studio(コードネームOrcas)のプレビュー版として位置づけられており、残念なことに今後のバージョンアップは予定されていません。しかし、本文中でも記したように、XAMLコードを直接記述すればデザインビューで結果を確認し、ソースコードとの連携も取ることができますので、必要最低限の道具は揃っていると言えます。未だ日本語での情報は少ないですが、Webで紹介されているXAMLのサンプルを読み込ませていろいろ試行錯誤してみるのも面白いと思います。ぜひWPFを使って、これまでにないUI構築にトライしてください。
シリーズ第3回はWCFチュートリアルとして、.NET Framework 3.0の通信機能をクローズアップします。お楽しみに。