Silverlight のクライアント画面

このトピックで導入テンプレート、ツール、およびタスクを理解することで LightSwitch の最適な Silverlight ベースの画面を作成し、デザインできます。

[!メモ]

Microsoft LightSwitch for Visual Studio 更新プログラム 2 を使用して、HTML ベースの画面を作成し、モバイル デバイスの最適化できます。詳細については、「LightSwitch アプリの HTML クライアント画面」を参照してください。

画面テンプレート

開始するには、次の画面テンプレートのいずれかを使用して、画面を作成します。

• 新規データ画面

• データ検索画面

• 詳細画面

• 編集可能なグリッド画面

• 一覧および詳細画面

テンプレートを選択する方法については、「画面の種類の選択」を参照してください。

これらのテンプレートを見つける方法については、「方法: Silverlight の画面を作成する」を参照してください。

画面デザイン ツール

画面デザイナーを使用するか、またはアプリケーションの実行中に [カスタマイズ モード] 画面を開くことで、画面のデザインを変更できます。

画面デザイナー

画面デザイナーには、データ フィールドやコマンドなどの項目と、データが階層的に表現された画面コンテンツ ツリーが表示されます。画面コンテンツ ツリーに項目をドラッグして、目的の順序で配置できます。

画面デザイナーの詳細については、「画面デザイナーの概要」を参照してください。

画面をデザインする方法については、「チュートリアル: 画面のデザイン」を参照してください。

画面デザイナーで特定のデザイン タスクを実行する方法については、「方法: 画面デザイナーを使用して Silverlight の画面をデザインする」を参照してください。

カスタマイズ モード画面

[カスタマイズ モード] 画面を使用して、アプリケーションの実行中に画面の外観を変更できます。変更を適用する前に、変更をプレビューすることもできます。[カスタマイズ モード] 画面で、アプリケーションの実行中に次のデザイン タスクを実行できます。

• 画面から項目を削除する

• 項目のキャプションを変更する

• 項目のコントロールの種類 (ラベルやテキスト ボックスなど) を変更する

• 項目のラベルの位置を変更する

• 項目を表示または非表示にする

• 画面の別の場所に項目を移動する

• 項目をまとめてグループ化する

• 画面にボタンを追加する

• 変更を元に戻す

• プロパティ アイテムを既定値にリセットします。

次の図は、[カスタマイズ モード] 画面を示しています。

[カスタマイズ モード] 画面の詳細については、「方法: 実行中のアプリケーションで Silverlight の画面をカスタマイズする」を参照してください。

画面デザイン タスク

画面のデザインを変更するために、次のタスクを実行できます。

• 画面の外観を変更する

• フィールドとコマンドを画面に追加する

• 画面に表示されるデータをフィルター処理する

• 画面にデータを追加する

• 画面ナビゲーション メニューをカスタマイズする

• コードを使用して画面を変更する

画面の外観を変更する

画面でのデータの表示方法を変更できます。たとえば、情報のコレクションを構成して、リストやグリッドとして表示できます。フィールドが表示される順序を変更したり、フィールドをまとめてグループ化したりできます。

詳細については、「方法: 画面デザイナーを使用して Silverlight の画面をデザインする」を参照してください。

Northwind サンプル データベースから情報を表示する画面の外観をデザインする方法の例については、「画面の外観のカスタマイズ」を参照してください。

フィールドとコマンドを画面に追加する

LightSwitch の画面は、ユーザーがデータを表示、更新、削除、または保存するための組み込みのコマンドを提供します。カスタムのコマンドおよびフィールドを追加することもできます。

画面に何らかの種類のビジネス ロジックを追加する場合は、カスタム コマンドを追加します。たとえば、販売注文の量に基づいてユーザーが顧客の一覧を表示できるように、ボタンを追加できます。詳細については、「方法: Silverlight の画面にカスタム コマンドを追加する」を参照してください。

カスタムの [ローカル プロパティ] フィールドを追加して、情報を収集または表示できます。たとえば、一覧に表示される顧客の数をユーザーが指定できるように、販売量のボタンの横にテキスト ボックスを追加できます。詳細については、「方法: Silverlight の画面にローカル プロパティを追加する」を参照してください。

画面にカスタム コントロールを追加する

LightSwitch 画面に Silverlight コントロールを追加できます。Silverlight コントロールを使用して、組み込みの LightSwitch コントロールの機能を上回る方法で情報を表示または収集します。Silverlight コントロールを使用して、画面に表示される組み込みの LightSwitch コントロールを置き換えることもできます。詳細については、「方法: Silverlight の画面にカスタム コントロールを追加する」を参照してください。

画面に表示されるデータをフィルター処理する

画面クエリの条件を変更して、画面に表示されるデータをフィルター処理できます。

デザイナーの左側のウィンドウに表示されるデータのすべてのグループは、クエリに基づいています。画面には、それらのクエリによって返される情報のみが表示されます。データのグループに表示される情報を変更するには、そのクエリを変更します。

詳細については、「方法: Silverlight の画面上のデータをフィルター処理する」を参照してください。

画面にデータを追加する

画面には、他の種類のデータを追加できます。たとえば、顧客を表示する画面には、注文の一覧を表示するデータ グリッドを追加できます。詳細については、「方法: 画面にデータを追加する」を参照してください。

画面ナビゲーション メニューをカスタマイズする

アプリケーションでは、ユーザーがナビゲーション メニューで画面の名前をクリックして、その画面を開くことができます。これらの画面がメニューに表示される順序を指定できます。アプリケーションの起動時に表示される画面を指定することもできます。また、ユーザーが、タブとして表示される複数の画面を開くことができるかどうかを指定することができます。

詳細については、「方法: メニュー項目とナビゲーション グループを作成する」を参照してください。

ユーザーがデータを検索できるようにする

LightSwitch は、検索の組み込みサポートを提供します。アプリケーションを実行すると、画面内のすべてのデータ コレクションの上に検索ボックスが表示されます。ユーザーは、検索ボックスのいずれかに用語を入力して Enter キーを押すと、関連の情報を検索できます。

検索ボックスを画面で非表示にする方法については、「方法: 画面デザイナーを使用して Silverlight の画面をデザインする」を参照してください。

検索から特定のフィールドを除外する方法については、「リファレンス: データ デザイナーのプロパティ」を参照してください。

LightSwitch には、検索画面の作成に使用できるテンプレートが用意されています。詳細については、「画面の種類の選択」を参照してください。

String という種類のフィールドだけが検索要求と見なされます。また、検索要求は、関連付けられているデータ コレクションにのみ適用されます。たとえば、顧客のコレクションの上に表示される検索ボックスは、顧客が発注した注文に関する情報の検索には使用できません。

非文字列フィールドまたは関連するコレクションに存在する情報を考慮した検索機能を提供する場合は、画面にカスタム検索機能を実装する必要があります。これを実行する方法の例については、「Creating a Custom Search Screen in Visual Studio LightSwitch」を参照してください。

コードを使用して画面を変更する

実行時に特定のイベントが発生した場合に画面が適切に変更されるように、LightSwitch で呼び出される部分的メソッドにコードを追加できます。たとえば、アプリケーションのユーザーに対して匿名のままにする会社の名前を非表示にするコードを追加できます。このコードは顧客の会社名を確認して、一致するものを検出すると、情報が画面に表示される前に、CompanyName フィールドの IsVisible プロパティを False に設定します。

コードを記述する場所の詳細については、「方法: Silverlight の画面イベントを処理する」および「方法: Silverlight の画面にカスタム コマンドを追加する」を参照してください。

画面を変更するコードを追加する方法については、「方法: コードを使用して Silverlight の画面を変更する」を参照してください。

関連トピック

Title	説明
画面の種類の選択	画面を作成する開始点として使用できるテンプレートについて説明します。
方法: Silverlight の画面を作成する	アプリケーションに画面を追加する方法を示します。
画面デザイナーの概要	デザイナーの各部分とその機能を示しています。
チュートリアル: 画面のデザイン	Northwind サンプル データベースからデータを表示する画面をデザインする方法を示します。
方法: 画面デザイナーを使用して Silverlight の画面をデザインする	画面デザイナーの使用方法を示します。
方法: 実行中のアプリケーションで Silverlight の画面をカスタマイズする	アプリケーションの実行中に画面の外観をカスタマイズする方法を示します。
方法: Silverlight の画面にローカル プロパティを追加する	画面にローカル プロパティのカスタム フィールドを追加する方法を示します。
方法: Silverlight の画面にカスタム コマンドを追加する	画面でカスタム コードを実行するボタンまたはリンクを追加する方法を示します。
方法: Silverlight の画面にカスタム コントロールを追加する	LightSwitch の外部のコントロールを作成して、LightSwitch 画面で使用する方法を示します。
方法: 画面にデータを追加する	他のクエリから画面にデータを追加する方法を示します。
方法: Silverlight の画面上のデータをフィルター処理する	クエリを使用して、どのデータが画面に表示されるかを制御する方法を示しています。
方法: Silverlight の画面イベントを処理する	特定のイベントの発生時に実行されるコードを記述して、アプリケーションをカスタマイズする方法を説明します。
方法: コードを使用して Silverlight の画面を変更する	コードを使用して、コントロールを変更し、画面上の項目と対話する方法について説明します。
リファレンス: 画面デザイナーのプロパティ	画面メンバー リストに表示される項目のプロパティと、画面デザイナーの画面コンテンツ ツリーについて説明します。[プロパティ] ウィンドウを使用してプロパティの値を設定すると、項目の外観と動作を変更できます。
LightSwitch でのレポートと印刷	LightSwitch アプリケーションに印刷とレポート機能を追加するために使用できるオプションを示します。