【Blen道】やることは1つだけ。置くものは2種類だけ。

#windev_jp #wpdev_jp

月曜日が祝日だということを気が付いたのが日曜日だった高橋です。まったく。

さて、とりとめもなくBlend のお話しをしましょう。

image

やることは1つだけ

よく聞くお話。「Blend で何からやっていいのかわからない」的な話。原因はVisual Studio と違うから。多分。

Blend でやることは1つだけ。「画面を作る」当たり前ですがこれだけです。処理は基本的にやりません。

もっと分解して言うと「画面に表示するもの配置する」となります。これが重要。

 

おけるものは2種類だけ

さて、Blend で画面を作るために、画面上に様々なものを配置します。XAMLで書けますがそんなのはこの際無視w

で、Blend で画面におけるものはいろいろあるように見えますが、つまるところ2種類だけなんです。

  • 表示するもの:コントロール
  • 配置するもの:パネル

前述の2つです。これだけ。XAMLや.NET の世界で言えば UIElement から派生したオブジェクトを… とか解説できそうですが、いらない。WinForm 世代からの違いは配置するためのパネルの位置づけでしょう。

もう1段階、UX的な視点を入れて展開すると

  • 表示するコントロール:Image, Rectangle, Ellipse, TextBlock, ProgressBar, Listbox …
  • 機能提供するコントロール:Button, TextBox, Listbox, Slider, CheckBox, ….
  • 配置するパネル:Grid, StackPanel, WrapPanel, (ScrollViewer, ViewBox, Border ) …

表示することに重きを置いているコントロールと、機能を提供することに重きを置いているコントロールがある。

  • TextBloxk ↔ TextBox
  • ProgressBar ↔ Slider

全部覚えておかないとダメ?

それぞれ登場人物は多いが、全部を覚えておく必要はないです。

  • 表示するコントロール:できる限り全部:Image, Rectangle, Ellipse, TextBlock, ProgressBar, Listbox …
  • 機能提供するコントロール:必要な数個でOK:Button, Listbox, Slider, TextBox, ….
  • 配置するパネル:ひとまず2つ:Grid, StackPanel

これで大概のものは作れるはず ♪

 

で、何をすればいいの?

だから、画面を作るって… その方法? 上記のとおり。

  1. 画面配置を考えてパネルを置いて
  2. 表示したいものを表示できるコントロールを置いて
  3. ユーザーに捜査してもらう対機能を提供するコントロールを置く

例えば、Twitter につぶやく画面を作るならこうなる。

  1. 画面の最上部にはアプリ名、中央にはつぶやきを入力するエリア、下には送信ボタン、分割配置できるよう Grid を切る
  2. アプリロゴを表示する Image コントロールを置く
  3. つぶやきを入力する TextBlox と 送信するためトリガーを出すの Button を置く

当たり前のことだけなんですけどね。