方法: 画面デザイナーを使用して Silverlight の画面をデザインする

  • [アーティクル]

画面デザイナーを使用して、画面の外観を変更できます。画面デザイナーを使用して、次のデザイン タスクを実行できます。

フィールドおよびコマンドのデザイン タスク

  • 情報のグループを画面に追加します。

  • グループのレイアウトを変更します。

  • ボタンを追加します。

  • 項目を追加します。

  • 項目を削除します。

  • アイテムを移動します。

  • 項目の表示名を変更します。

  • 項目のラベルの位置を変更します。

  • アイテムのサイズを変更します。

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

  • 項目のコントロールの種類を変更します。

  • 画面にカスタム コントロールを追加します。

  • 変更を元に戻します。

データ コレクションのデザイン タスク

  • 画面の最初のロード時にコレクションがデータを表示するかどうかを変更します。

  • ページングを有効または無効にします。

  • 並べ替えを有効または無効にします。

  • 検索を有効または無効にします。

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

情報のグループを画面に追加する

  1. 画面コンテンツ ツリーで、情報のグループを追加するグループを選択します。

  2. 画面デザイナーの上部で、[レイアウト項目の追加] をクリックしてから [グループ] をクリックします。

    新しいグループが表示されます。

  3. 項目をグループにドラッグします。デザイナーの画面メンバー リスト、または画面コンテンツ ツリーの他の領域から項目をドラッグできます。

グループのレイアウトを変更する

  1. [画面コンテンツ ツリー] で、変更するグループの横にある下向きの矢印をクリックします。

    ドロップダウン リストが表示されます。ドロップダウン リストには、グループで利用可能なすべてのコントロールの種類が表示されます。

  2. コントロールのドロップダウン リストで、コントロールの種類をクリックします。

    選択するコントロールの種類は、グループのレイアウトに影響を与えます。各コントロールの種類の詳細については、「リファレンス: 画面デザイナーのプロパティ」を参照してください。

ボタンを追加する

  1. [画面コンテンツ ツリー] で、[コマンド バー] ノードを選択します。

  2. 画面デザイナーの上部の [レイアウト項目の追加] をクリックしてから、[ボタン] をクリックします。

    ボタンは、[コマンド バー] ノードの下に表示されます。

  3. ユーザーがボタンをクリックすると実行されるコードを追加します。詳細については、「方法: Silverlight の画面にカスタム コマンドを追加する」を参照してください。

項目を追加する

  • 画面デザイナーの [画面メンバー リスト] から、[画面コンテンツ ツリー] の目的の位置に項目 (フィールドやコマンドなど) をドラッグします。

    ヒントヒント

    画面のコンテンツ ツリーは、デザイナーの中央に表示される画面オブジェクトの階層構造です。

    項目をドラッグすると、マウス カーソルが変化して、項目を特定の場所に配置できるかどうかを示します。マウス カーソルがスラッシュを含む円に変わった場合は、その場所に項目をドロップできません。

    画面には、カスタム フィールドも追加できます。詳細については、「方法: Silverlight の画面にローカル プロパティを追加する」を参照してください。

項目を削除する

  1. [画面コンテンツ ツリー] で、画面から削除する項目 (フィールドやコマンドなど) を選択します。

  2. 画面コンテンツ ツリーの上部の [削除] をクリックします。

項目を移動する

  • [画面コンテンツ ツリー] で、項目リスト内の目的の位置に項目 (フィールドやコマンドなど) をドラッグします。

    たとえば、PostalCode フィールドを Country フィールドの下にドラッグして配置するか、[編集] ボタンを [削除] ボタンの上にドラッグして配置します。

    [!メモ]

    フィールドをドラッグすると、マウス カーソルが変化して、項目を特定の場所に配置できるかどうかを示します。マウス カーソルがスラッシュを含む円に変わった場合は、その場所に項目をドロップできません。

項目の表示名を変更する

  1. [画面コンテンツ ツリー] で、項目 (フィールドまたはコマンドなど) を選択します。

  2. [プロパティ] ウィンドウで、[表示名] の下のテキスト ボックスを選択して、必要な項目の名前を入力します。

    表示名を変更しても、項目の名前は変更されません。画面に表示されるその項目の名前が変更されるだけです。

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

  1. [画面コンテンツ ツリー] で、フィールドを選択します。

  2. [プロパティ] ウィンドウで、[ラベルの位置] の下のドロップダウン リストをクリックして、目的の位置を選択します。

    各オプションの説明を次の表に示します。

    ラベルの位置

    説明

    左揃え

    ラベルはコントロールの左に表示されます。

    右揃え

    ラベルはコントロールの右に表示されます。

    このページのトップへ

    ラベルはコントロールの上に表示されます。

    Bottom

    ラベルはコントロールの下に表示されます。

    なし

    選択したデータ フィールドのラベルは表示されません。

    Collapsed

    フィールドは、通常はラベル用に予約されている領域に配置されます。

アイテムのサイズを変更

  1. [画面コンテンツ ツリー] で、項目 (フィールドまたはコマンドなど) を選択します。

  2. [プロパティ] ウィンドウの [サイズ] の下で、希望するコントロールの幅と高さのサイズを選択します。

    それぞれの設定については、「リファレンス: 画面デザイナーのプロパティ」を参照してください。

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

  1. [画面コンテンツ ツリー] で、項目 (フィールドまたはコマンドなど) を選択します。

  2. [プロパティ] ウィンドウで、[Is Visible] プロパティをオンまたはオフにします。

    [Is Visible] をオンにすると、アプリケーションの実行時に項目が画面に表示されます。[Is Visible] をオフにすると、アプリケーションの実行時に項目が画面に表示されません。

    [!メモ]

    [(非表示)] ラベルは、アプリケーションの実行時に画面に表示されない項目の横に表示されます。

項目のコントロールの種類を変更する

  1. [画面コンテンツ ツリー] で、項目の横のドロップダウン リストを選択します。

  2. ドロップダウン リストで、目的のコントロールの種類を選択します。

    ほとんどのコントロールの種類は、組み込みのコントロールの種類です。コントロールの種類を、その他のツールを使用して作成するカスタム コントロールに設定することもできます。カスタム コントロールの詳細については、「方法: Silverlight の画面にカスタム コントロールを追加する」を参照してください。

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

  1. [画面コンテンツ ツリー] で、任意のグループを選択します。

  2. 画面デザイナーの上部で、[レイアウト項目の追加] をクリックしてから [カスタム コントロール] をクリックします。

    詳細については、「方法: Silverlight の画面にカスタム コントロールを追加する」を参照してください。

変更を元に戻す

  • [編集] メニューの [元に戻す] をクリックします。

    ヒントヒント

    誤って、画面デザイナーでの編集を元に戻した場合は、[編集] メニューの [やり直し] をクリックします。

画面の最初のロード時にコレクションがデータを表示するかどうかを変更する

  1. 画面デザイナーの　[画面メンバー リスト] で、コレクションの見出し (OrderCollection 見出しなど) を選択します。

  2. 画面が表示されたときにコレクションがデータを表示しないようにする場合は、[プロパティ] ウィンドウで [クエリの自動実行] チェック ボックスをオフにします。画面が表示されたときにコレクションにデータが表示されるようにする場合は、[クエリの自動実行] チェック ボックスをオンにします。

ページングを有効または無効にする

  1. 画面デザイナーの　[画面メンバー リスト] で、コレクションの見出し (OrderCollection 見出しなど) を選択します。

  2. 行のコレクションが大きい場合でも、クエリによって返されるすべての行がユーザーに表示されるようにする場合は、[プロパティ] ウィンドウで [ページングをサポート] チェック ボックスをオフにします。クエリが多数のレコードが返すときにユーザーに表示されるレコードの数を制限する場合は、[ページングのサポート] チェック ボックスをオンにします。

  3. [1 ページあたりの表示項目数] の下の [ページングのサポート] を選択した場合、ユーザーに表示する行数を指定します。

    [!メモ]

    ユーザーは、画面のリンクをクリックして、行のセット内を進むことができます。

並べ替えを有効または無効にする

  1. 画面デザイナーの　[画面メンバー リスト] で、コレクションの見出し (OrderCollection 見出しなど) を選択します。

  2. コレクションに対して表示されたデータをユーザーが並べ替えられないようにする場合は、[プロパティ] ウィンドウで [並べ替えのサポート] チェック ボックスをオフにします。コレクションに対して表示されたデータをユーザーが並べ替えられるようにする場合は、[ページングのサポート] チェック ボックスをオフにします。

検索を有効または無効にする

  1. 画面デザイナーの　[画面メンバー リスト] で、コレクションの見出し (OrderCollection 見出しなど) を選択します。

  2. コレクションの上に検索ボックスが表示されないようにする場合は、[プロパティ] ウィンドウで [検索のサポート] チェック ボックスをオフにします。コレクションの上に検索ボックスを表示する場合は、[検索のサポート] チェック ボックスをオンにします。ユーザーがデータを検索できるようにする方法については、「How to: Enable the User to Search Data」を参照してください。

参照

処理手順

方法: 実行中のアプリケーションで Silverlight の画面をカスタマイズする

方法: Silverlight の画面にローカル プロパティを追加する

方法: Silverlight の画面にカスタム コマンドを追加する

方法: 画面にデータを追加する

その他の技術情報

画面: アプリケーションのユーザー インターフェイス