◆LightSwitch 画面の作成（ガイドツアー）

前回まででデータが出来たので次は画面の作成。

データを表示する画面の作成
画面フォルダーを右クリックして「画面の追加」から「一覧および詳細画面」のテンプレートを選択。
画面名に「OrdersByCustomer」、画面データに「Customers」、含める追加データに「CustomersItem 詳細」と「CutomersItem Orders」を選択。
この時点でF5で実行してみると以下のように左側に顧客のリスト(Customersの概要プロパティにCompanyNameを指定したのでそれが表示されている）、右側にリストで選択した顧客の詳細情報と、その顧客にぶら下がっている注文が一覧で表示される。

画面の外観のカスタマイズ

スクリーンデザイナーで「Orders By Cutomer」を選択し、「説明」プロパティに「顧客を選択して注文を参照」と入力する。（これはタブヘッダーのツールヒントに使われる）

詳細項目のカスタマイズ
「会社名」を選択しコントロールを「ラベル」に変更。

「電話(Phone)」項目をドラッグして「会社名」の下に移動。

データグリッドを編集できないようにするには、
スクリーンデザイナーでデータグリッド（Orders)のコマンドバー配下にある「追加・編集・削除」のボタンを削除または非表示にする。（削除はコンテキストメニュー、非表示はプロパティ設定）
データグリッド行（Orders Item)のプロパティで「読取り専用コントロールの使用」をチェックする。

ローカル プロパティの追加
ここで言うローカルプロパティとはテーブルとは非連結の画面だけに表示される項目という意味の様だ。

ツールバーから「データ項目の追加」をクリック

データ項目の追加ダイアログが開くので「ローカルプロパティ」をチェックし「名前」にNumberOfOrdersと入力しOK。

表示名を「注文数」とする。

左ペインに追加されたNumberOfOrdersを中央ペインの顧客詳細ツリーにドラッグ＆ドロップしたのち、コントロールをラベルに変更。

ここに顧客の注文件数（Orderの件数）を設定するために以下の手順でコーディングを追加する。

• 左ペインでCustomersを選択
  
• ツールバーから「コードの記述」「Customers_SelectionChanged」をクリック。
  
• 以下のコーディングを追加
  

      public partial class OrdersByCustomer
      {
          partial void Customers_SelectionChanged()
          {
              NumberOfOrders = Orders.Count.ToString();
          }
  

これで顧客詳細に注文数が追加表示される。

ただし、私が試した限りでは初期表示に限り注文数が表示されなかった。
イベント自体は問題なく発生しているし、顧客を選択しなおしたときには正しく表示されているのでタイミング的には間違ってもいない気もするのだが・・・。
さしあたって、Orders_Loadedなんてイベントもあるのでここら辺で処理したほうがベターな気がする。

実行中のアプリケーションのカスタマイズ
LightSwitchのデザイナー画面は以下のような感じになっていて、画面コントロールがツリー上に改造構造で表示される。

これはこれで良いのだが、やはりWYSIWYGで設計したいと思うのが心情。
仕方ないのかなと思っていたら、なんと実行時にそのまま画面を見ながらデザインを修正する機能が実装されている。
実行画面の右上に「デザイン画面」というボタンが表示されていて、それを押すと実行中の画面とともに、上記のツリー画面およびプロパティ画面が表示される。


ここで実際の実行画面を見ながらリアルタイム表示でデザイン変更が可能だ。
これまでのVisualStudioのデザイナーと比べても、実データを表示させながらデザイン変更ができる分、LightSwitchの方式の方が優れている。
なかなかやるもんだ・・・。