CodeZine(コードジン)

特集ページ一覧

WPF(Windows Presentation Foundation)+XAML入門 後編

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/02/05 00:00
目次

アニメーション

 最後はアニメーションです。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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Vista時代のプログラミングモデル .NET Framework 3.0入門

著者プロフィール

  • WINGSプロジェクト 土井 毅(ドイ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5