WPF（Windows Presentation Foundation）＋XAML入門 後編

Vista時代のプログラミングモデル .NET Framework 3.0入門（2）

アニメーション

　最後はアニメーションです。WPFではタイムラインベースのアニメーションを扱うことができます。こちらもソースコード無しのサンプルです。

プロジェクト作成＆XAMLコード記述

　XAMLブラウザアプリケーションを作成し、自動生成された「Page1.xaml」のPage要素以下のコードを書き換えてください。

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キーを押して実行します。

アニメーション前

　ボタンをクリックすると……何が起きたのか？ キャプチャ画像では分からないその動きを、ぜひ確認してみてください。

アニメーション後

処理内容の説明

　ポイントとなるのはボタンコントロールのButton.Triggers要素以降の記述です。Button.Triggers要素はボタンに関するイベントを保存するためのコンテナで、その子のEventTrigger要素がButton.Clickイベントつまりボタンをクリックした場合のイベントを定義しています。

　StoryBoard要素内に書かれた3つのコントロールがそれぞれボタン幅のアニメーション、矩形高さのアニメーション、矩形色のアニメーションを担当しています。

　DoubleAnimationコントロールはStoryboard.TargetName属性で指定されたコントロールのStoryboard.TargetPropertyプロパティの値をFrom属性からTo属性まで連続してアニメーションさせます。プロパティの値は実数値である必要があります。ColorAnimationコントロールは同様の動作をしますが、色プロパティを対象とします。

　今回は矩形を単色塗り潰しするSolidColorBrushコントロールを用い、Colorプロパティの値をRedからBlueまでアニメーションさせています。

x:Name属性

　なお、SolidColorBrush要素に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の通信機能をクローズアップします。お楽しみに。

Expression Blend

　今回使用したVisual Studio 2005 Extensions for WPF以外にXAMLをサポートする製品として、Microsoft社が開発中のデザイナ向け製品であるExpression Blendがあります。現在無償トライアルを使用することができますが、こちらの製品ではより豊富なXAML編集機能が利用でき、XAMLコントロールへのイベントハンドラの登録も自動的に行うことができます。現時点では、Expression BlendでUIデザイン＆イベントハンドラの登録まで行い、その後の作業をVisual Studioで行うのも良い方法かもしれません。

参考資料

1. ++C++;// 未確認飛行 C++ .NET Framework 3.0