スクリーンにリピーターを追加

UI 要素の使用

概要

リピーターは、アイテム リストを作成するためのツールです。アイテム テンプレートをデザインして繰り返し使用できます。各アイテムを自由にカスタマイズすることも可能です。

プレビュー

このトピックでは、以下の画像のようにリピーターのあるスクリーンをデザインします。

概要

以下は主な手順です。

  1. リピーターの追加
  2. アイテム テンプレートに要素を追加
  3. アイテムの複製
  4. アイテム テンプレートの編集
  5. 特定のアイテムを編集

詳細手順

(a-1) 1.リピーターの追加

  1. Alt キーを押してドラッグし、repeater と入力するとリピーターがスクリーンに追加されます。

    Alt + クリックすると、デフォルト サイズでリピーターを作成できます。または リストとピッカー の下の ツールボックス からリピーターをドラッグして作成することもできます。

  2. リピーターのプロパティを編集

    リピータはコントロールであるため独自のプロパティがあります。Thickness プロパティを 0 に設定すると、表示される境界線を削除します。

(a-2) 2.アイテム テンプレートに要素を追加

  1. 新しいアイテム テンプレート をクリックしてアイテム テンプレートを作成します。

    このテンプレートがデザインのベースになります。

    テンプレートに要素を追加します。

  2. 画像、テキスト、および線をテンプレートに追加します。

    「クイック追加」機能または ツールボックス で要素を作成します。

(a-3) 3.アイテムの複製

  1. テンプレートの編集モードを終了します。

    Esc キーを押下またはアイテム以外をダブル クリックします。デザイナーの左上にブレッドクラムも使用できます。X は最上位を示します。

  2. (オプション) リピーターのレイアウトを設定します。

    デフォルトのレイアウト設定は垂直方向ですが、アイテムを水平方向に繰り返すよう設定することもできます。

  3. アイテムを複製します。

    いくつかの方法で実装できます。

    • + アイコンをクリックすると選択したアイテムの前または後に新しいアイテムを追加します。このように作成したアイテムはアイテム テンプレートのコピーです。
    • Ctrl + 矢印キーを使用します。アイテム テンプレートのコピーを追加します。
    • ドロップダウン矢印をドラッグします。選択したアイテムのコピーを作成しますが、アイテム テンプレートと異なる場合があります。

複数のアイテムを持つリピーターが作成されました。

(a-4) 4.アイテム テンプレートの編集

リピーターのすべての要素に適用する変更を実装するには、アイテム テンプレートを編集する必要があります。

  1. 以下のアイテムの プロパティ パネル から アイテム テンプレートの編集 アクションを選択します。

    • リピーター
    • 任意のアイテム
  2. アイテムを変更します。

    たとえばタイトルのフォント色を変更します。

  3. リピーターに戻ります。

    Esc キーを押してテンプレートの編集モードを終了します。

    すべてのアイテムのタイトルが新しい色になりました。

リピーターが作成したステートのアイテム テンプレートのみ変更できます。別のステートで変更するとエラー メッセージを表示し、リピーターが追加したステートへのリンクを表示します。 ![][img-15]

(a-5) 5.特定のアイテムの編集

すべてのアイテムの外観が統一されました。特定のアイテムの外観を変更できます。たとえば、別の画像またはテキストを表示できます。

  1. リピーターのアイテムをダブルクリックして編集します。

  2. (オプション) アイテム テンプレートをリセットします。

    変更を元に戻すには、プロパティ パネル から「アイテムをテンプレートにリセット」アクションを選択します。編集したアイテムをテンプレートの設定に戻ります。

ステートを使用する場合、最初のステートのみでアイテムをテンプレートにリセットできます。

関連トピック