〜Hello Worlld その弐（Blend 編）

#2013/02/22 大幅に編集し直しました。
さて、前回のエントリでまず Hello World を作ったわけですが、今回は Visul Studio ではなく Expression Blend を使い Hello World プログラムを作りたいと思います。
いつの間にか Expression Studio が販売終了になり、MS の国内公式サイトから Expression のページが消された状況下で、いまさら Blend もどうよという感が強いのですが、ネタとして公開したいと思います。ちなみに Blend のバージョンは 4 を使います。

Blend を起動し、メニュー「ファイル」→「新しいプロジェクト」とクリックして「新しいプロジェクト」ウィンドウを表示します。

「プロジェクトの種類」で「WPF」を選択、「WPF アプリケーション」を選択したら、名前に「HelloWorld02」と入力し「OK」ボタンをクリックするとプロジェクトが生成されます。

「ドキュメントウィンドウ」に空の Window が表示されました。

コントロールの配置

次は TextBlock を Window に配置します。
左上に幾つかタブがあるので「アセット」を選択、ツリー内の「コントロール」を選ぶと右側にコントロールがリスト表示されます。この中から「TextBlock」をクリックします。

「TextBlock」を選択したら 「オブジェクトとタイムライン」にある「LayoutRoot」の下にドラッグします。

デザイナに TextBlock が右上に表示され、オブジェクトとタイムラインの LyoutRoot の直下にも TextBlock が配置されます。LayoutRoot が選択されてる状態で TextBlock をダブルクリックしても追加することができます。

TextBlock のプロパティを設定します。画面右側にある「プロパティウィンドウ」の「レイアウト」タブを展開。図のように「HorizontalAlignment」と「VerticalAlignment」の二つを「Center」に設定してください。

次に「共通プロパティ」タブを展開し、「Text」プロパティを「Hello World」にします。さらに「テキスト」タブを展開し、フォントサイズを72ptにしましょう。

ここまで設定したプロパティの一覧です。

プロパティ	設定する値
Text	Hello Wold
FontSize	72
HorizontalAlignment	Center
VerticalAlignment	Center

設定したプロパティがデザイナに反映されます。

ここまで完成したら後は実行です。F5キーもしくはメニューの「プロジェクト」→「プロジェクトの実行」をクリックしてアプリケーションを実行してください。するとこうなる。

デザイナと XAML を両方表示してみました。ドキュメントウィンドウの右上にはビューを切り替えるアイコンがあります。上から「デザイン」「XAML」「分割」とアイコンが並んでますが、一番下の「分割」アイコンをクリックすれば、ドキュメントウィンドウにデザインとXAMLを同時に表示できます。

Hello Worlld その参に続く・・・