〜Hello Worlld その参（Blend for Visual Studio 2012編）

#2013/02/28 Blend 2012 で書き直しました
#2013/03/28 リンクをCTP4に変更
お次も Hello World アプリです。前回は Expression Blend 4 で作りましたが、今回は Blend for Visual Studio 2012 で開発します。

Microsoft Visual Studio Professional 2012 通常版

Blend for Visual Studio 2012 は VS2012 に付属するデザインツールで、2010 までは別売りになっていた Expression Blend が Visual Studio 2012 より同梱されるようになったものです。しかし、当初は Windowsストアアプリしか開発できませんでしたが、VS2012 の Update2 より WPF や Silverlight アプリも開発できるようになります。
本日現在（2013/2/28）はまだ製品版は提供されておらず、CTP 版（Community Technology Preview の略、コミュニティ技術評価版という意味です）で配布されております。今回はこれを使い、効果やアニメーションを使ったよりWPFアプリらしい Hello World を作ってみたいと思います。

Visual Studio 2012 更新プログラム 2 CTP 4 のダウンロードはこちら
(当然ですが Visual Studio 2012がないと更新できません)

Hello World

上記リンク先の vsupdate_KB2707250.exe をインストールすると、Blend for Visual Studio 2012（以下Blend）が更新され、WPF や Silverlight アプリが開発できるよう更新されます。インストールが完了したら、Blend を起動し「新規プロジェクト」をクリックします。

「新しいプロジェクト」ダイアログが起動しましたら、図のように「WPF アプリケーション」を選択し、名前を HelloWorld02、言語は「Visual C#」を選択、バージョンは「4.0」を選択して「OK」を押してください。なお今回もコードは書かないので、選択する言語は「Visual Basic」でも構いません。

WPF プロジェクトが生成されました。

左側のパネル（インタラクションパネルという）の上のタブから「アセット」を選択し「コントロール」→「TextBlock」を選択、「オブジェクトとタイムライン」の「Grid」の下までドラッグするか、Grid が選択されてるのを確認してからダブルクリックすると、TextBlock が Grid に配置されます。

次にプロパティを設定します。画面右側の「プロパティ」でテキストや文字サイズ・配置を以下の図のとおり設定しましょう。Text は「Hello World」、レイアウトの HorizontalAlignment・VerticalAlignment は各々「Center」に。さらにフォントサイズは「48pt」にします。

プロパティの変更がただちにデザイナに反映されます。

ここまで出来たら、F5キーを押してアプリケーションを実行します。すると以下のようになります。

効果を付ける

ここまでは前回のエントリと特に変わりませんね。ここから WPF らしくデザインツールを生かしたアプリにしたいと思います。
「アセット」ー>「効果」→「BlurEffect」を選択し、オブジェクトとタイムラインの Grid の直下に配置します。配置は先ほど TextBlock を配置したのと同じく、ドラッグもしくはダブルクリックが使えます。BlurEffect は「ぼかし効果」のエフェクトです。

「アセット」ー>「効果」→「DropShadowEffect」を選択し、今度は TextBlock の直下に配置します。DropShadowEffect は読んで判ると思いますが、影のエフェクトですね。

するとデザイナに効果がただちに反映されます。Blend を使えばオブジェクトに対し簡単に効果を加えることができます。Windows Forms ではさすがにこのようなことは出来ませんね。

アニメーション

もうひとつ Blend を使って WPF らしいことをしてみましょう。アニメーションです。先ほど追加した効果をアニメーションを使い操作します。
左上の「トリガー」タブを選択し「+イベント」をクリックしてください。すると「Window.Loaded」イベントが追加されます。

その下に「Window.Loaded の発生時」という項目が追加されてますね。その右側にある「+」のアイコンをクリックします。すると以下のダイアログが表示されます。

「OK」をクリックするとアートボードが赤枠で囲まれ「記録オン」の状態になり、オブジェクトとタイムラインに「タイムライン」が表示されます。

これでアニメーションを作る準備が整いました。まずアニメーション開始時の状態を設定します。BlurEffect を選択してください。

Radius プロパティを 0 に設定します。するとぼかし効果がなくなります。

DropShadowEffect も選択します。

こちらは Opacity プロパティと ShadowDepth プロパティを 0 に設定します。Opacity は影の透明度、ShadowDepth は影の距離です。この二つを 0 にすると影の効果は見えなくなります。

設定後の画面です。

次にアニメーション終了時の状態を設定します。終了を 5秒後に設定しましょう。タイムラインに時間を設定するボックスがあるのでここに「0:05」と入力してください。するとキーフレームが5秒に設定されます。

この状態で BlurEffect と DropShadowEffect を設定します。BlurEffect は Radius を 10 に、DropShadowEffect は Opacity と ShadowDepth を各75に設定してください。

するとタイムラインが以下のように変化し、アートボードの画面に変更が反映ます。

アニメーションの動作を確認してみましょう。再生ボタンをクリックすると、タイムラインの移動に合わせてアートボードの画面にアニメーションが反映されます。

ここまで出来たら、アートボードの左上の録画アイコンをクリックして「記録オフ」にします。

F5キーを押してアニメーションを実行します。起動後ただちに効果がアニメーション動作したら完成です。

つぎはレイアウト編です。