チュートリアル: 画面のデザイン
このチュートリアルは、LightSwitch 画面デザイナーを使用して、Northwind サンプル データベースから顧客データを表示する画面を作成する方法を示します。画面デザイナーは、画面の外観を変更するために使用できるビジュアル デザイン キャンバスです。
このチュートリアルでは、次のタスクの実行方法について説明します。
画面の作成
画面のレイアウトを変更する
画面からフィールドを削除する
項目の表示順を変更する
項目の表示名を変更する
項目のコントロールの種類を変更する
実行中のアプリケーションで画面をカスタマイズする
必須コンポーネント
このチュートリアルでは、Northwind サンプル データベースがコンピューターにインストールされていることと、またそれをデータ ソースとしてプロジェクトに追加したことを想定しています。
Northwind サンプル データベースのインストール方法については、「Northwind サンプル データベースのインストール」を参照してください。
Northwind サンプル データベースをプロジェクトのデータ ソースとして追加する方法については、「データへの接続」を参照してください。
画面の作成
ここでは、Northwind サンプル データベースから顧客データを表示するための画面を作成する方法について説明します。この画面は、2 つの部分から構成されます。最初の部分では、すべての顧客の概要リストが表示されます。その他の部分では、選択されている顧客の詳細を表示します。.
画面を作成するには
ソリューション エクスプローラーで [画面] を選択します。
[プロジェクト] メニューの [画面の追加] をクリックします。
[新しい画面の追加] ダイアログ ボックスが表示されます。
[新しい画面の追加] ダイアログ ボックスで、[画面テンプレートの選択] の下にある [一覧および詳細画面] を選択します。
[スクリーン名] で**「顧客」**と入力します。
[画面データ] の下にあるドロップダウン リストで、[<DataSourceName>.Customers] を選択します。
[含める追加のデータ] で、[顧客の詳細] と [顧客の注文] を選択します。
これは、[顧客] エンティティのフィールドを画面の詳細部分に追加し、顧客が発注した注文の一覧も追加されます。
次の図では、このセクションの手順を実行した後に、ダイアログ ボックスがどのように表示されるかを示しています。
.png "新規画面の追加ダイアログ ボックス")
[OK] をクリックして、画面を作成します。
画面デザイナーが表示されます。
画面のレイアウトを変更する
[一覧と詳細] 画面には 2 つの列があります。左の列は顧客の一覧です。右側の列には、2 つの行が含まれます。一番上の行には選択した顧客の詳細が含まれ、一番下の行には選択した顧客に関連する注文が含まれます。画面デザイナーの画面コンテンツ ツリーは、この一覧の構成を示しています。
このセクションでは、画面に 2 つの列ではなく 2 つの行が含まれるように、画面のレイアウトを変更する方法を示しています。一番上の行には顧客の一覧が含まれます。一番下の行には、2 つの列が含まれます。左側の列には選択した顧客の詳細が含まれ、右側の列には選択した顧客に関連する注文が含まれます。
一覧のレイアウトを変更するには
画面デザイナーの [画面コンテンツ ツリー] で、[顧客] ノードのレイアウトを [列レイアウト] から [行レイアウト] に変更します。これを行うには、[顧客] ノードの横に表示される下向きの矢印をクリックします。その後、ドロップダウン リストで、[行レイアウト] をクリックします。
[詳細列] のレイアウトを [行レイアウト] から [列レイアウト] に変更します。これを行うには、[詳細列] ノードの横に表示される下向きの矢印をクリックし、[列レイアウト] をクリックします。
画面からフィールドを削除する
既定では、顧客の詳細を表示する [詳細列] という名前の画面領域は、データ ソースのすべてのフィールドを表示します。フィールドをすべて表示させたくない場合は、必要ないものを削除できます。たとえば、次の手順は [国] フィールドを削除する方法を示します。
画面からフィールドを削除するには
[画面コンテンツ ツリー] でノードが展開されていない場合は [顧客の詳細] ノードを展開します。
[国] フィールドをクリックし、画面デザイナーのコマンド バーで [削除] をクリックします。
フィールドの表示順を変更する
次の手順は、CustomerID フィールドや Postal Code フィールドなどのフィールドの表示順序を変更する方法を示します。
フィールドの表示順を変更するには
[画面コンテンツ ツリー] でノードが展開されていない場合は [顧客の詳細] ノードを展開します。
[CustomerID] を [詳細] 列の一番下に移動するには、[Fax] フィールドの下にドラッグします。
[郵便番号] フィールドを [顧客 ID] のすぐ上に移動するには、[Fax] フィールドと [CustomerID] フィールドの間にドラッグします。
フィールドのコントロール型を変更する
ユーザーへのフィールドの表示方法をカスタマイズすることができます。たとえば、テキスト フィールドを TextBox または Label として表示されるように設定できます。次の手順は、ユーザーが値を変更できないように表示フィールドを Label フィールドに変更する方法を示します。
フィールドのコントロール型を変更するには
[画面コンテンツ ツリー] でノードが展開されていない場合は [顧客の詳細] ノードを展開します。
[顧客 ID] フィールドを選択して、ドロップダウン リストから [ラベル] を選択します。
この手順を繰り返して他のフィールドを変更することができます。
変更をテストするには、F5 キーを押してアプリケーションを実行します。
実行中のアプリケーションで画面をカスタマイズする
アプリケーションの実行中に画面をカスタマイズすることもできます。たとえば、フィールドの削除、フィールドの順序の変更、およびコントロール型やラベルの整列などのプロパティを変更できます。
実行中のアプリケーションで画面をカスタマイズするには
アプリケーションが既に実行されていない場合は、F5 キーを押して起動します。
画面のコマンド バーで [デザイン画面] をクリックします。
[カスタマイズ モード] 画面で、[顧客 ID] フィールドを詳細列から削除するには、[顧客の詳細] ノードでそれを選択して、[削除] (
.png "選択したアイテムを削除します。")
) ボタンをクリックします。[郵便] フィールドにある [Fax] フィールドを移動するには、それを [顧客の詳細] ノードで選択して、[下へ移動] (
.png "項目をリスト内の下位の位置に移動します。")
) ボタンをクリックします。[電話] フィールドの名前を [電話番号] に変更するには、そのフィールドを [顧客の詳細] ノードで選択して、[プロパティ] ウィンドウで [表示名] プロパティの値を [電話番号] に変更します。
[電話番号] フィールドの表示型を Label に変更するには、[顧客の詳細] ノードでフィールドを選択し、[プロパティ] ウィンドウで [コントロール型] プロパティをクリックして、[ラベル] を選択します。
[詳細] 列でラベルの配置を変更します。[顧客の詳細] ノードでの最初のフィールド、この場合は [会社名] フィールドを選択します。[プロパティ] ウィンドウで、[ラベルの位置] プロパティをクリックして [右寄せ] の値を選択します。[顧客の詳細] ノード内のすべてのフィールドについてこの手順を繰り返します。
[保存] をクリックして変更を保存します。これでアプリケーションには、先ほど行った変更が表示されます。
次の手順
既定では、画面のデータ ソースを選択すると、ソースのすべてのデータが表示されます。データのサブセットのみを表示する場合は、表示するデータを定義するクエリを作成できます。詳細については、「方法: クエリ デザイナーを使用してクエリをデザインする」を参照してください。