カスタム リスト

[カスタム リスト] は動的なテンプレートベースのコントロールで、非常に高い柔軟性を持つさまざまなコントロールが組み込まれています。標準のリスト コントロールとは異なり、[カスタム リスト] ではレイアウト内でさらに多くのコントロールを使用できるため、効果的なメール リスト グリッドを作成するなどのタスクに適しています。

プロパティ

[カスタム リスト] には 2 種類のプロパティがあります。1 つはメイン コントロール用、もう 1 つはその中のテンプレート用です。

[カスタム リスト] とその [テンプレート] のプロパティを切り替えるには、キャンバスでコントロールをクリックするか、画面左側のツリー ビューからコントロールを選択します。

ThisRow

ThisRow キーワードを使用すると、カスタム リストのデータの各行を表すことができます。

データ ソースの値を [カスタム リスト] 内の個々のコントロールにバインドするには、ThisRow キーワードを使用します。

制限事項

• パフォーマンス上の理由から、いくつかのコントロールは [カスタム リスト] に含めることができません。

  • 編集グリッド
  • 表
  • カスタム リスト
  • カスタム HTML
  • タブ
  注:

  4 項目を超えるリストベースのコントロールでは、[ドロップダウン] コントロールを使用することをお勧めします。

• コントロール名が IntelliSense によって検出されていても、MainPage.Header のように [カスタム リスト] コントロールを直接参照することはできません。

• [カスタム リスト] のコンテキストと他のコンテナー コントロールの間でコントロールをドラッグすると、無効な式が発生し、一部はアプリのプレビュー時にのみ表示される場合があります。これは、[カスタム リスト] のコンテキスト内のバインド (ThisRow キーワードを使用) が、[カスタム リスト] の外部では無効になるためです。

全般

カスタム リスト

• 非表示 - true に設定すると、実行時にコントロールが非表示になります。
• 無効 - false に設定すると、アプリ ユーザーがリストを操作できます。true に設定すると、リストは読み取り専用ステートになります。

テンプレート

• ツールチップ - テンプレートに表示するツールチップです。このツールチップで、テンプレートに表示する追加情報を提供します。
• 非表示 - true に設定すると、実行時にコントロールが非表示になります。
• 無効 - false に設定すると、アプリ ユーザーがテンプレートを操作できます。true に設定すると、テンプレートは読み取り専用ステートになります。

イベント

カスタム リスト

• 選択した行 - アプリ ユーザーが [カスタム リスト] で行 (テンプレート内のコントロール) を選択した際の挙動を設定します。値が変更された際の挙動を設定します。

テンプレート

• クリック時 - テンプレートがクリックされた際の挙動を設定します。

スタイル

カスタム リスト

• コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。
  注:

  配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。

• レイアウト - カスタム リスト内のテンプレートの位置をカスタマイズします。
  • 縦方向 - テンプレートは縦方向に配置されます。
  • 横方向 - テンプレートは横方向に配置されます。
  • グリッド - テンプレートはグリッド形式で配置されます。
  • 間隔 (ピクセルのみ) - テンプレートが [縦方向] または [横方向] のレイアウトで配置されている場合のテンプレート間の間隔です。
  • 左右の間隔/上下の間隔 - テンプレートが [グリッド] のレイアウトで配置されている場合のテンプレート間の左右および上下の間隔です。
  • 幅 - テンプレートの幅です。
  • テンプレートの高さ - テンプレートの高さです。
  注:

  • [横方向] レイアウトでは、[幅] はピクセル単位、[高さ] はピクセル単位、%、em、または auto で設定されます。
  • [縦方向] レイアウトでは、[高さ] はピクセル単位、[幅] はピクセル単位、%、em、または auto で設定されます。
  • [グリッド] レイアウトでは、[高さ] も [幅] もピクセル単位で指定する必要があります。%、em、auto などの相対単位は使用できません。
• マージン- レイアウトのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
• サイズ - カスタム リストのピクセル単位の [幅] と [高さ] です。既定値は次のとおりです。
  • [横方向] レイアウト: [幅] は 800 ピクセル、[高さ] は auto
  • [縦方向] レイアウト: [幅] は auto、[高さ] は 400 ピクセル
  • [グリッド] レイアウト: [幅] は 800 ピクセル、[高さ] は 400 ピクセル。最小値または最大値を設定するには、3 点リーダー メニューのアイコン (...) をクリックします。

テンプレート

• コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。
  注:

  配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。

• レイアウト - テンプレート内のコントロールの位置を決定します。
  • 横方向/縦方向 - コントロールの向きです。
  • 配置- テンプレート内のコントロールの配置です。
  • 折り返しを許可 - 選択すると、テンプレートがコンテナー内で折り返されます。
  • スクロールを許可 - 選択すると、テンプレート内でのスクロールが許可されます。[スクロールを許可] を有効化するには、テンプレートの高さ (縦レイアウト) または幅 (横レイアウト) が固定である必要があります。
• 背景色 - テンプレートの背景色です。
• 枠線 - コントロールの枠線です。枠線の太さ、色、半径を設定できます。
• フォント - テンプレートのフォント ファミリです。テンプレート内のすべてのコントロールで同じフォント ファミリが使用されます。既定では、テンプレートはカスタム リストのフォント ファミリを継承します。
• マージン- レイアウトのマージンです。既定では 0px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
• パディング - テンプレートのパディングです。既定では、16px のパディングが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティは、[パディング] セクションの右側にある [リンク] ボタンをクリックして解除できます。
• 詳細設定 - コントロールの flex プロパティを表示します。
  • Flex basis - Flex 項目の元のサイズを設定してから、余分なスペースを均等に割り付けるか、除去します (px、%、em、auto)。
  • 伸び率 - 余分なスペースがある場合、flex 項目を、他の項目を基準にしてどれだけ拡大するかを指定します。
  • 縮み率 - 十分なスペースがない場合、flex 項目を、他の項目と比較してどれだけ縮小するかを指定します。 詳しくは、Mozilla Developer Network のドキュメントをご覧ください。

VB のプロパティ

プロパティ名	データ型	アクセス権限	例
Disabled	Boolean	読み取り/書き込み	true の場合、実行時にコントロールを無効化します。
Hidden	Boolean	読み取り/書き込み	true の場合、実行時にコントロールが非表示になります。
SelectedItemIndex	Integer	読み取り専用	現在選択されている行のインデックスを返します。 MainPage.CustomList.SelectedItemIndex
ThisRow	Data Source フィールドと同じ	読み取り専用	データ ソースの現在のレコードを参照します。カスタム リスト内のフィールドを設定するために使用します。