Silverlight実習 その２

さてさて、つづきです。

「はじめてのSilverlight」はわかりやすいんですが、なにぶんテキストを手打ちしているのでグラフィカルな部分を自分なりに作ろうとすると大変なわけで…。

そこで今のところ無料で配布されている試用版の
Microsoft Expression Blend 2 December Preview
を使用してグラフィカルな部分はツールで作っちゃいましょう。

これからの説明は前回のつづきが前提になります。

さて、Expression Blend2を立ち上げます。
立ち上がったらさっそくサイトを開きます。
当然まだサイトがない場合にもNew Projectとして作成することも可能だと思います。
今回はすでに、前回つくったtestというサイトがありますのでそれを開きます。

File->Site

ダイアログが開きますので前回作ったプロジェクトのフォルダを指定します。

するとこんな画面になるはずです。

ここで「はじめてのSilverlight」の第１章にある「chpater1.xaml」のようなxamlファイルを作成します。
右上がProjectタブになっていることを確認してFilesの中にあるtestを右クリックすると[Add New Item...]があると思うので選択します。

するとダイアログが出てきますので適当なファイル名（「はじめてのSilverlight」の第１章ではchapter1.xaml）をつけてＯＫボタンを押します。

すると左側にSceneが追加され、右側のプロジェクト内にもxamlファイルが追加されているはずです。

それでは画像を追加してみましょう。
追加する方法はいろいろあります。
結構思いつく方法はすべて網羅されているようなので試してみてください。

たとえばtestフォルダに画像を用意してプロジェクトをRefreshします。
すると画像ファイルがプロジェクトに追加されますので、それを画面にドラッグアンドドロップします。

おそらくプロジェクトにファイルをドラッグアンドドロップしてもtestフォルダに画像ファイルはコピーされるのではないかと思いますし、いきなり画面に投げ入れても大丈夫なのではないかと思います。（未確認）

画像が画面に追加されるとxamlファイルのコードもそれにともなって追加されます。

さて「はじめてのSilverlight」第１章では円の上にカーソルがのると別画像が表示されるというサンプルです。
では円を描いてみましょう。

左側のアイコン部分に四角を描くアイコンがあると思います。
良く見ると右下に三角形がくっついています。
他のアイコンにもあるものとないものがありますが、この三角形が付いているアイコンは長押しすると別モードが選択できるものです。
四角を描くアイコンを長押しして円を描くモードを選択しましょう。

選択するとカーソルが十字のものになったと思います。
ドラッグするとよくあるドローツールのように円が描けます。
Shiftキーを押すと正円が描けるようになっています。（ものによっては逆の場合もあり）

描き終わるとこの状態になります。
おそらく円を選択している状態…ということだと思います。

「はじめてのSilverlight」の第１章では赤い●を地図上に置いていくわけですが、出来上がった円は白ですね。
さっそく赤くしましょう。

基本的にこのツールでSceneに配置されたものはオブジェクトとして配置されます。
各オブジェクトにはプロパティが存在していて、プロパティの設定を変更することで状態を変更することが可能です。

プロパティを変更したいオブジェクトを選択されていて、右上のタブのPropertiesが選択されている状態にします。

すると色々なプロパティを変更できると思います。
三角が右側を向いている表題がある部分は伸縮しますのでクリックすると詳細部分が出たり隠れたりします。

円を赤くする場合はBrushesの部分Fillカラーを赤にすればＯＫです。
ドローツールを良く使う方は直感でなんとかなるのではないでしょうか？
Brushesの中の塗りつぶしモードアイコンを変更すればグラデーションも設定することが可能です。

Appearanceの部分で透明度や可視・不可視の切り替えが可能のようです。
「はじめてのSilverlight」の第１章ではこの透明度をデフォルト0%にしておいて、赤丸の上にカーソルが乗ると透明度を100%にすることで画像を表示したように見せています。
実際にOpecityの値を変更してみましょう。

透明度を変更したいオブジェクトを選択してプロパティを設定できる状態にします。
Opecityの欄の数値をじかに変更（きちんと半角数字で入力すること）することも可能ですが、Opecityのグラフのような部分にカーソルがのっかると、上の画像のようにカーソルが変わります。
そしたらそのままマウスの左ボタンを押したまま上下にドラッグするとグラフが伸び縮みします。

今までの画面はSplitモード（デザイン画面とコードを両方表示）でした。
コードだけを画面に大きく表示したい場合はデザイン画面（もしくはコード画面）右側にあるタブの[XAML]タブをクリックすればコードのみの画面になります。

とうぜんデザイン画面だけにしたい場合は[Design]タブをクリックすればＯＫです。

さて、「はじめてのSilverlight」の第１章のキモはcreateSilverlight.jsに書かれたcontent_focus関数とcontent_out関数にあります。
この関数が適応されているオブジェクト名に_imgが追加されているオブジェクト名を持ったオブジェクトの透明度を操作する仕組みです。

ではオブジェクト名はどこで設定するのかというと…

プロパティ部分の一番上になります。
デフォルトではImageやEclipseなどオブジェクトの形状名が入るようです。
ここを都合の良い名前やわかりやすい名前に変更します。

このツール全般で言える注意点ですが、このバージョンだけかもしれませんが、何かを入力しようとするとデフォルトで全角（日本語）入力になります。
数値入力時など入力しても無視される場合は全角入力になっている場合がありますので注意して下さい。
あとファイル名等も半角のつもりが全角になったりしてしまう場合があるかもしれません。

この調子でそれぞれの円にそれぞれオブジェクト名をつけて、それに対応する画像には対応する円の名前_imgというオブジェクト名をつけていきます。

そうそう、背景の色もかえられます。
背景のプロパティを変更する場合はSceneを選択してプロパティタブが選択されていれば設定することができます。

真っ白にしたり…

グラデーションにしたり…

グラデーションも細かく設定できます。

出来上がりはこんな感じ

ここまで完成したら（ちゃんと保存はすること）Expression Blend 2でも完成を確認することができる。

プロジェクトタブで私の場合だとindex.htmを右クリックしてStartupに設定する。
※メニューのProject->Set as Startupでindex.htmを選択してもＯＫ
Ｆ５キー（メニューのProject->Test site）を押す。

きちんと動いただろうか？
動いたらftp等を使ってネットにアップするわけだが、注意点。
Web.cionfigファイルを適切に設定する。
ファイル名の大文字・小文字があっているか注意する。
※Windowsでは問題ないがサイトのWebサーバーは大文字・小文字も識別するのでコードのファイル名と実際のファイル名をあわせておくこと。

でこれが実際にftpに上げたtestフォルダを実行したサンプル。
http://homepage3.nifty.com/tiano/test/

きちんと動いてるでしょ？
Expression Blend 2を使えば、「はじめてのSilverlight」の第２章のストーリーボードを利用した…で一生懸命書く座標値もグラフィカルにXAMLを作ることができる…と思う。

やくにたったかたたないか、見る人がいるのかいないのかわからないけど、今回はここまで。