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

このレッスンでは、LightSwitch の画面のレイアウトと外観を変更する方法を学習します。

画面のカスタマイズ

画面デザイナーを使用すると、さまざまな方法で画面をカスタマイズできます。たとえば、フィールドの表示順序を変更する、フィールドを表示するために使用するコントロールの種類を変更する、およびフィールドを変更する機能を制限することができます。

画面を表示するには

ソリューションエクスプローラーで、OrdersByCustomers 画面をダブルクリックします。
F5 キーを押してアプリケーションを実行し、ナビゲーションメニューの [顧客の注文] をクリックすると、フォームが表示されます。

左にある [顧客] リストで顧客を選択すると、顧客の詳細と関連する注文の一覧が右側に表示されます。
アプリケーションウィンドウの右上隅にある [閉じる] をクリックして閉じます。

表示名を変更するには

画面デザイナーの中央ペインで、最上位の [列レイアウト | 顧客の注文] ノードを選択します。
[プロパティ] ウィンドウで、[説明] フィールドを選択して、「顧客を選択して注文を見る」と入力します。

アプリケーションを実行するとこのメッセージが画面のツールヒントとして表示されます。
F5 キーを押してアプリケーションを実行し、ナビゲーションメニューで [顧客の注文] をクリックすると、画面が表示されます。ツールヒントを表示するには、画面のタブにある [顧客の注文] にポインターを移動して停止します。
アプリケーションウィンドウの右上隅にある [閉じる] をクリックして閉じます。

コントロールと表示順を変更するには

[行レイアウト | 詳細列] ノードの下で、[会社] ノードを選択します。
ドロップダウンリストで [ラベル] を選択します。

これにより、実行中のアプリケーションで Company フィールドが編集されるのを防ぐことができます。
[電話] ノードを選択します。
[会社] ノードの下にドラッグします。

画面上の表示順序を変更します。
F5 キーを押してアプリケーションを実行し、ナビゲーションメニューで [顧客の注文] をクリックすると、画面を表示して変更を確認できます。
アプリケーションウィンドウの右上隅にある [閉じる] をクリックして閉じます。

データグリッドのためにコマンドを無効にするには

[DataGrid | 注文] ノードを展開します。
[コマンドバー] ノードが展開されていない場合は、このノードを展開します。
[編集] ノードを選択します。[プロパティ] ウィンドウで、IsVisible チェックボックスをオフにします。

[注文] データグリッドの [編集] コマンドを無効にします。
[削除] ノードでプロセスを繰り返します。
F5 キーを押してアプリケーションを実行し、ナビゲーションメニューで [顧客の注文] をクリックすると、画面を表示して変更を確認できます。

[編集] ボタンおよび [削除] ボタンがないことに注意してください。
アプリケーションウィンドウの右上隅にある [閉じる] をクリックして閉じます。

画面を読み取り専用にする

[DataGrid | 注文] ノードを展開します。
[コマンドバー] ノードを展開します。
[追加] ノードを選択して、[ツールバーリボン] にある [削除] ボタンをクリックします。
[DataGrid |注文] ノードを選択して、[データグリッド行 | 注文] を選択します。
[プロパティ] ウィンドウで、[読み取り専用のコントロールを使用] チェックボックスをオンにします。

これにより、ユーザーはグリッド内のデータを変更できなくなります。
F5 キーを押してアプリケーションを実行し、ナビゲーションメニューで [顧客の注文] をクリックすると、画面を表示して変更を確認できます。

[追加] ボタンがないこと、またグリッド内のデータを変更できないことに注意してください。
アプリケーションウィンドウの右上隅にある [閉じる] をクリックして閉じます。

よく見る

このレッスンでは、実行中のアプリケーションで [OrdersByCustomer] 画面の動作と外観を変更するいくつかのタスクを実行する方法を説明しました。レッスンではまた、画面デザイナーにある [画面コンテンツツリー] が実行画面のユーザーインターフェイスにどのように関連するかを示しました。

画面の [説明] を変更したとき、エンドユーザーのヘルプを提供しました。以前のレッスンで、エンティティデザイナーで ContactName フィールドの [説明] を変更したことを覚えているかもしれません。エンティティデザイナーで [説明] を設定すると、すべての画面に変更が反映されます。画面デザイナーで設定すると、使用している画面のみが変更されます。

[会社] フィールドのコントロール型を [TextBox] から [ラベル] に変更した場合、各フィールドで使用可能なコントロールのリストには、フィールドの基になるデータ型に適切なコントロールしか含まれません。たとえば、Text フィールドでは、[TextBox] または [Label] を選択できます。Text を表示するためのコントロールが含まれる拡張機能をインストールしている場合は、そのコントロールも一覧に表示されます。別のレッスンでは、拡張機能について説明します。

フィールドをリスト、この場合は [顧客] リスト、の別の場にドラッグするだけでなく、画面デザイナーの左側のペインから中央のペインにフィールドをドラッグすることもできます。たとえば、[市] フィールドを誤って削除した場合、左側のペインにある [顧客] ノードからドラッグすることができます。

[注文] グリッドの [編集] および [削除] コマンドを無効にしたとき、グリッドで直接、注文を編集および削除できることに気付いたかもしれません。これに対処するために、後に [読み取り専用コントロールを使用する] を設定して [注文] グリッドを読み取り専用にしました。[読み取り専用のコントロールを使用する] プロパティは、[画面コンテンツ] ツリーでその下にあるすべてのノードに影響を与えます。たとえば、トップレベルの [グリッド | 顧客の注文] ノードで [読み取り専用のコントロールを使用する] を設定した場合、画面全体が読み取り専用になります。