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