Lepracaun's factory - レプラコーンファクトリー -: Expression Blend：データのバインド

« Google Ajax Feed API：キャッシュ騙しを使う方法 | メイン | Expression Blend：データバインド（RSSのフィード取得） »

2007年6月10日

Expression Blend：データのバインド

Microsoft Expression Blendをちょこちょこと触っています。
今度はデータのバインドのやり方です。
ちなみに画面はすべてMicrosoft Expression Blend　RC（英語版）です。
話もRC（英語版）で進めていきますが、ベータ（日本語版）でもそんなに違いは無いと思います（たぶん）

■STEP1

新規プロジェクトを作成。
[ToolBox]にある[Asset Library]からアートボードにつぎの4つを配置していきます。

まず[ScrollViewer]を配置。
これはスクロールバーが出る領域と考えてください。
次に、その中に[TextBlock]を追加。
中に適当に長いテキストを流し込みましょう。できれば[ScrollViewer]の領域をはみ出るくらいに。

※注意点その１
[TextBlock]オブジェクトが[ScrollViewer]内にあることを確認しましょう。
画面左下の[Objects and Timeline]パネルに、オブジェクトの階層が表示されています。
子要素を持つオブジェクト名の左側には白い逆三角マークがついています。
[ScrollViewer]の左側に白い逆三角マークがついており、そこをクリックすると[TextBlock]が表示されることを確認しておきます。

オブジェクトの階層に注意"

※注意点その２
[TextBlock]のサイズはAutoにします。
[TextBlock]を選択した状態で、画面右にある[Properties]パネルの[Layout]にWidthとHeightがあります。
ここに数字が入っている場合は、その欄の横に[Set to Auto]（四角に矢印が入っているマーク）があるので、クリックしてサイズをAutoにしておきます。
すると、横幅は親要素である[ScrollViewer]の範囲一杯に広がり、縦幅は流し込んだテキストが終わるまでに広がると思います。

次に[Slider]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントサイズを変更できるようにしたいと思います。
画面右にある[Properties]パネルの[Common Properties]があります。
[Maximum]の項目に100と入力。
[Minimum]の項目に5と入力。
[Value]の項目に12と入力。

続いて[Combo Box]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントを変更できるようにしたいと思います。
[Combo Box]の子要素として[ComboBoxItem]を配置します。
[Objects and Timeline]パネルで[Combo Box]と[ComboBoxItem]がツリー上に階層表示されていることを確認して置いてください。
[ComboBoxItem]が[Asset Library]に表示が無かったら、[Asset Library]ウインドウの右上にある[Show All]にチェックを入れれば出てくると思います。
[ComboBoxItem]を選択して、画面右にある[Properties]パネルの[Common Properties]を表示させます。
[Content]欄があるので、そこにフォント名を入力します。例えば、「Arial」とか、「Tahoma」とか、「Courier New」などなど。

■STEP2

配置が終わったらデータのバインドをしていきます。
先程の作業で、長いテキストに対してスクロールバーで表示される部分をコントロールできるようになっています。
簡単ですねえ。

では、配置した[Slider]でフォントのサイズを変更、[Combo Box]でフォント名を変更できるようにしてみましょう。

それではまず、[TextBlock]を選択。
画面右側の[Properties]パネルにある[Text]に、4つほどタブがあります。
一番左のタブが[Font]タブで、選択すると[TextBlock]に使われているフォント名とフォントサイズが表示されます。

フォント名の欄の右側の小さな四角いボタン[Advanced property options]をクリック。
するとFontFamilyという一覧が出ますので、[Data Binding...]を選択。

[Create Data Binding]というウインドウが表示されます。
3つタブがありますが、真ん中の[Element Property]を選択。
左側の[Scene elements]の欄から配置した[Combo Box]を選択。
右側の[Properties]から、Text:(String)を選択。

こうすることによって、[Combo Box]で選択した[ComboBoxItem]のContent欄に記載したフォント名が、[TextBlock]に流し込んだテキストのフォント名になります。
つまり、[Combo Box]でフォントを選択できるようになったわけです。

■STEP3

では再び、[TextBlock]を選択。
画面右側の[Properties]パネルにある[Text]の一番左のタブが[Font]タブを選択。
フォントサイズの欄の右側の小さな四角いボタン[Advanced property options]をクリック。
するとFontSizeという一覧が出ますので、[Data Binding...]を選択。

[Create Data Binding]の真ん中のタブ[Element Property]を選択。
左側の[Scene elements]の欄から配置した[Slider]を選択。
右側の[Properties]から、Value:(Double)を選択。

こうすることによって、先程[Slider]で最高100、最低5、最初が12の値の範囲内でフォントサイズを変更できるようになりました。

余談ですが、Value:(Double)とかText:(String)のカッコの中はなんなの？って思った人もいると思います。
プログラマな方は当然わかるでしょうけど、デザイナな方はわからないかもしれません。
これは、変数の型です。Doubleってのは浮動小数点の実数型の一つです。Stringっていうのは文字列型です。
Value:(Double)に入るのは、小数点を含めた数字のみで、文字は入れられないってことがわかりますよね。