Web アプリケーションで Horizontal Grid コントロールを使用する方法

Horizontal Grid コントロールは、リスト内のエレメントをカルーセル式で表示します。
Web アプリケーションで Horizontal Grid を使用するには、抽象レイアウトを使用する必要があり、また Web アプリケーションがレスポンシブ Web アプリケーションである必要があります。

コントロールの使用方法

Web フォームにフリースタイルグリッドコントロールをドラッグし、[ Custom Render ] プロパティを HorizontalGrid に設定します。

次のプロパティを設定します:

レスポンシブ Web デザインのフリースタイルグリッドの [ Columns ] プロパティ: このプロパティは、横方向のレンダリングの有無を問わず、任意のフリースタイルグリッドが対象です。
Rows per page: このプロパティは、グリッドのプロパティパネルの [ HorizontalGrid ] セクションの下にあります。ビューポートのサイズに応じてページに表示する行数を設定できます。
このサイズは、[ Responsive Sizes ] プロパティのダイアログで設定するものと同じです。
次の図は、Columns = 2、Rows per page = 2、ビューポートサイズ = 小のグリッドを示しています。

Horizontal Grid のプロパティ

Paged	アイテムをページごとに表示するかどうかを示します。各ページには、最大で ColumnsPerPage*RowsPerPage アイテムが含まれます。
Show Page Controller	ページコントローラーを表示するかどうかを指定します。
Page Controller Class	ページコントローラーのクラスです。
Show Arrows	次へ/前への矢印を有効にします。
Infinite	スライドの無限ループ (カルーセル) を有効にします。
Auto Play	自動再生を有効にするかどうかを指定します。
Auto Play Speed	ミリ秒単位の速度です。
Variable Width	[ Variable Width ] を有効にすると、各スライドの幅に応じて、表示領域に可能な限り多くのスライドが表示されます。列のプロパティによって、ページが変わるたびにスクロールされるスライド数が決まります。
Rows per page	画面サイズに応じた 1 ページあたりの行数を設定します。
CurrentPage	コントロールの現在のページを取得または設定します (実行時のみのプロパティ)。

Horizontal Grid の表示の設定

グリッドの [ Page Controller Class ] プロパティによって、テーマクラスを割り当て、グリッドのスタイルを設定できます。
[ Page Controller Class ] プロパティの既定値は GridPageController クラスですが、その任意の下位クラスが使用可能です。
GridPageController クラスには、次のプロパティがあります:

[ Controller Container Class ] プロパティ	コントローラーのコンテナボックスのスタイルに使用するクラスです (以下の画像の例を参照)。
Indicator Selected Color	選択されているページのインジケータの色です。
Indicator Unselected Color	選択されていないページのインジケータの色です。
[ Indicator Symbol ] プロパティ	ページのインジケータに使用する記号です。UTF-8 記号がサポートされています (たとえばドットには \2022 を使用)。
[ Arrows Color ] プロパティ	スクロールに使用する矢印の色です。
[ Left scrolling arrow symbol ] プロパティ	左方向のスクロールに使用する記号です。記号またはその UTF-8 表記を指定できます。
[ Right scrolling arrow symbol ] プロパティ	右方向のスクロールに使用する記号です。記号またはその UTF-8 表記を指定できます。

例