mcpField
S
syncfusion-maui-toolkit-carousel

syncfusion-maui-toolkit-carousel

github.com/syncfusionデザイン・UI3947 回インストール7 週間前に更新
リポジトリ

syncfusion-maui-toolkit-carousel について

Syncfusion の .NET MAUI SfCarousel を実装・カスタマイズするためのガイドです。レイアウトや操作、動的な読み込みを設定した画像・コンテンツのカルーセル作成を支援します。

主な機能

  1. 01リニアと3Dのカルーセルレイアウト
  2. 02データバインディングと項目テンプレート
  3. 03トランジションと変換効果の設定
  4. 04追加項目の動的読み込み
  5. 05大規模コレクション向け仮想化
  6. 06選択・スワイプイベントの処理

活用シーン

  1. 01画像ギャラリーやスライドショーの作成
  2. 02商品カードのカルーセル表示
  3. 03カルーセル項目の追加読み込み
  4. 04選択やスワイプ操作への対応

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-carousel

インストール後、Claude Code で/syncfusion-maui-toolkit-carouselを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
advanced-features.md
animation.md
getting-started.md
howto.md
populating-data.md
swipe-events.md
view-modes.md

詳細

.NET MAUI Carousel の実装

Syncfusion .NET MAUI Carousel（SfCarousel）コントロールを実装およびカスタマイズするための包括的なスキルです。カルーセルを使用すると、さまざまな項目配置オプションを活用し、画像データやコンテンツをインタラクティブに操作できます。

このスキルを使用する場面

次のようなニーズがある場合に、このスキルを使用します。

  • .NET MAUI アプリケーションにカルーセル／スライドショーコンポーネントを実装する
  • 画像、カード、またはカスタムコンテンツのコレクションを操作する
  • インタラクティブな画像ギャラリーや商品紹介を作成する
  • 線形またはデフォルト（3D）の表示配置でコンテンツを表示する
  • コンテンツ操作用のスワイプジェスチャーを実装する
  • 動的なコンテンツ読み込みのために、さらに読み込む機能を追加する
  • 大規模なデータセットに対して UI 仮想化を使用し、パフォーマンスを最適化する
  • カルーセルのアニメーションとトランジションをカスタマイズする
  • カルーセルの選択イベントとスワイプイベントを処理する

コンポーネントの概要

SfCarousel コントロールには次の機能があります。

  • 複数の表示モード：線形配置またはデフォルト（3D パースペクティブ）レイアウト
  • 柔軟なデータ設定：データバインディングまたは項目の直接作成
  • アニメーション制御：カスタマイズ可能なトランジション時間と効果
  • さらに読み込む機能のサポート：必要に応じて追加項目を動的に読み込み
  • UI 仮想化：大規模な項目コレクションのパフォーマンスを最適化
  • 豊富なイベント：選択変更、スワイプ開始／終了、スワイプ中のイベント
  • カスタマイズ：項目テンプレート、回転角度、間隔、変換

ドキュメントとナビゲーションガイド

はじめに

📄 読む: references/getting-started.md

  • インストールと NuGet パッケージの設定
  • MauiProgram.cs でのハンドラー登録
  • 最小限のコードによる基本的なカルーセルの実装
  • カルーセル項目の追加（バインディングまたは直接追加）
  • 項目の寸法の設定（ItemHeight、ItemWidth）
  • SelectedIndex を設定して目的の項目を表示
データの設定

📄 読む: references/populating-data.md

  • ItemsSource と ItemTemplate を使用したデータバインディング
  • カルーセルデータ用のモデルと ViewModel の作成
  • カルーセル項目用のカスタム DataTemplate
  • ItemContent プロパティを使用した SfCarouselItem の使用
  • シンプルな画像カルーセル用の ImageName プロパティの使用
  • 動的データ用の ObservableCollection
表示モードとレイアウト

📄 読む: references/view-modes.md

  • 線形配置（ViewMode.Linear）による積み重ねレイアウト
  • デフォルト配置（ViewMode.Default）による 3D パースペクティブ
  • 未選択項目間の間隔を設定する Offset プロパティ
  • 視覚効果を設定する回転角度
  • ItemSpacing の設定
アニメーション

📄 読む: references/animation.md

  • トランジションのタイミングを設定する Duration プロパティ
  • アニメーション速度の制御（ミリ秒）
  • スムーズなトランジションと高速なトランジション
  • デフォルトのアニメーション動作（600ms）
高度な機能

📄 読む: references/advanced-features.md

  • さらに読み込む機能（AllowLoadMore、LoadMoreItemsCount）
  • LoadMoreView の外観のカスタマイズ
  • パフォーマンス向上のための UI 仮想化（EnableVirtualization）
  • 変換効果（回転、拡大縮小）
  • パフォーマンス最適化のテクニック
スワイプイベント

📄 読む: references/swipe-events.md

  • SwipeStarted イベントの処理
  • スワイプ後のアクションに使用する SwipeEnded イベント
  • スワイプ中のフィードバックに使用する Swiping イベント
  • カスタムスワイプ動作の実装
  • イベント引数のプロパティ
操作方法

📄 読む: references/howto.md

  • 項目変更時の処理の実行
  • SelectionChanged イベントの使用
  • ベストプラクティスとヒント

コメント

Markdown 対応