方法: 画面デザイナーを使用して HTML 画面をデザインする
画面デザイナーを使用して、Visual Studio LightSwitch アプリで使用する HTML クライアントの画面の外観を変更できます。 たとえば、画面デザイナーでは次の作業を行えます。
情報グループを画面に追加する
グループのレイアウトを変更する
ボタンを追加する
項目を追加する
項目を削除する
項目を移動する
項目の表示名を変更する
項目のラベルの位置を変更する
項目のサイズを変更する
項目を表示または非表示にする
項目のコントロールの種類を変更する
画面にカスタム コントロールを追加する
変更を元に戻す
ページングを有効または無効にする
画面にタブを追加する
画面コンテンツ ツリーで [タブ] ノードのショートカット メニューを開き、[タブの追加] を選択します。
[プロパティ] ウィンドウで [グループ] プロパティを選択し、タブの名前を入力します。
[表示名] プロパティを選択し、タブに表示する名前を入力します。
画面コンテンツ ツリーで新しいタブを選択し、[追加] の一覧で、このタブに表示する項目を選択します。
情報グループを画面に追加する
画面コンテンツ ツリーで、情報グループを追加するノードを選択します。
画面デザイナーのツールバーで、[レイアウト項目の追加] の一覧を開き [グループ] を選択します。
新しいグループが表示されます。
[プロパティ] ウィンドウで、[名前] ボックスにグループの名前を入力します。
画面コンテンツ ツリーで、新しく追加したグループを選択します。[追加] の一覧で、このグループに表示する項目を選択します。
グループのレイアウトを変更する
画面コンテンツ ツリーで、変更するグループの一覧を開きます。
この一覧には、現在のグループで使用できるコントロールの種類がすべて表示されます。
コントロールの種類を選択します。
どの種類のコントロールを選択するかによって、グループのレイアウトが変わります。 各コントロールの種類の詳細については、「リファレンス: 画面デザイナーのプロパティ」を参照してください。
ボタンを追加する
画面コンテンツ ツリーで、ボタンを表示するノードを選択します。
画面デザイナーのツール バーで [レイアウト項目の追加] を選択し、[ボタン] を選択します。
[ボタンの追加] ダイアログ ボックスが表示されます。
項目を追加する
画面デザイナーの画面メンバー リストで項目 (フィールドやコマンドなど) を選択し、画面コンテンツ ツリーの適切な場所までドラッグします。
項目をドラッグしようとすると、その項目をドラッグ先へ配置できるかどうかを示すポインターが表示されます。 ポインターが禁止マーク (スラッシュを円で囲んだマーク) に変わった場合は、ドラッグしている項目をその場所にドロップできません。
カスタム フィールドを画面に追加する方法については、「方法: HTML 画面にローカル プロパティを追加する」を参照してください。
項目を削除する
画面コンテンツ ツリーで、削除する項目 (フィールドやコマンドなど) を選択します。
画面デザイナー のツール バーで、[削除] ボタンをクリックします。
項目を移動する
画面コンテンツ ツリーで、項目 (フィールドやコマンドなど) を別の場所までドラッグします。
たとえば、PostalCode フィールドを Country フィールドの下へドラッグしたり、[編集] ボタンをドラッグして [削除] ボタンの上に表示されるようにします。
注意
項目をドラッグする際、その項目をドラッグ先へ配置できるかどうかを示すポインターが表示されます。ポインターが禁止マーク (スラッシュを円で囲んだマーク) に変わった場合は、ドラッグしている項目をその場所へ移動できません。
項目の表示名を変更する
画面コンテンツ ツリーで、項目 (フィールドまたはコマンドなど) を選択します。
[プロパティ] ウィンドウで、[表示名] ボックスに別の項目名を入力します。
項目の表示名を変更すると、画面に表示される名前のみが変更されます。 その項目の Name プロパティは変わりません。
項目のラベルの位置を変更する
画面コンテンツ ツリーで目的のフィールドを選択します。
[プロパティ] ウィンドウで、[ラベルの位置] のドロップダウン リストから適切な位置を選択します。
各オプションの説明を次の表に示します。
ラベルの位置
説明
左揃え
ラベルがコントロールの左側に表示されます。
右揃え
ラベルがコントロールの右側に表示されます。
上揃え
ラベルはコントロールの上に表示されます。
非表示
コントロールにラベルが表示されません。
なし
コントロールにラベルが表示されません。ラベルの位置を想定してアラインされます。
項目のサイズを変更する
画面コンテンツ ツリーで、項目 (フィールドまたはコマンドなど) を選択します。
[プロパティ] ウィンドウの [サイズ] で、コントロールの幅と高さを変更します。
注意
一部の種類のコントロールでは高さプロパティを指定できません。
それぞれの設定については、「リファレンス: 画面デザイナーのプロパティ」を参照してください。
項目を表示または非表示にする
画面コンテンツ ツリーで、項目 (フィールドまたはコマンドなど) を選択します。
[プロパティ] ウィンドウで、[表示] プロパティのチェック ボックスをオンまたはオフにします。
注意
画面デザイナーで、アプリケーションの実行時に表示されない項目の隣に [(非表示)] ラベルが表示されます。
項目のコントロールの種類を変更する
画面コンテンツ ツリーで、目的の項目の横にある一覧を開き、コントロールの種類を選択します。
ほとんどの種類のコントロールが用意されていますが、 その他のツールを使用してカスタム コントロールを作成し、それを設定することもできます。 詳細については、「方法: LightSwitch アプリの HTML 画面にカスタム コントロールを追加する」を参照してください。
画面にカスタム コントロールを追加する
画面コンテンツ ツリーで、いずれかのグループを選択します。
画面デザイナーのツールバーで、[レイアウト項目の追加] の一覧から [カスタム コントロール] を選択します。
詳細については、「方法: LightSwitch アプリの HTML 画面にカスタム コントロールを追加する」を参照してください。
変更を元に戻す
メニュー バーで [編集]、[元に戻す] の順に選択します。
ヒント
画面デザイナーでの編集内容を誤って元に戻した場合は、メニュー バーで [編集]、[やり直し] の順に選択します。
ページングを有効または無効にする
画面デザイナーの画面メンバー リストで、コレクションの親ノード (OrderCollection 見出しなど) を選択します。
クエリによって多数の行が返される場合でも、それらすべての行を表示する場合は、[プロパティ] ウィンドウで [ページングのサポート] チェック ボックスをオフにします。 表示されるレコード数を制限する場合は、このチェック ボックスをオンにして、1 ページに表示する項目数を指定します。
注意
ユーザーは、画面内のリンクを選択して各結果ページを表示できます。
参照
処理手順
方法: LightSwitch アプリでの HTML 画面間の移動を制御する
方法: LightSwitch のモバイル クライアントにボタンを追加する
方法: LightSwitch アプリの HTML 画面にカスタム コントロールを追加する