mcpField
S
syncfusion-maui-rotator

syncfusion-maui-rotator

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

syncfusion-maui-rotator について

Syncfusion の SfRotator を実装する .NET MAUI 開発者向けガイドで、画像カルーセルやコンテンツスライダーを扱います。サムネイルやドットナビゲーション、自動再生、ループ、テンプレートのカスタマイズを説明します。

主な機能

  1. 01サムネイルとドットのナビゲーション
  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-ui-components-skills --skill syncfusion-maui-rotator

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

同梱ファイル

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

references/
autoplay-and-interaction.md
customization.md
events.md
getting-started.md
navigation-modes.md
placement-and-direction.md
populating-data.md

詳細

.NET MAUI Rotator の実装

Syncfusion .NET MAUI Rotator（SfRotator）は、画像コンテンツを表示し、移動するためのデータコントロールです。サムネイルとドットのナビゲーションモード、自動再生機能、ループ、幅広いカスタマイズオプションに対応しています。

このスキルを使用するタイミング

次のようなニーズがある場合に、このスキルを使用してください。

  • .NET MAUI アプリケーションで画像カルーセルやスライドショーを実装する
  • サムネイルまたはドットによるナビゲーションを備えた商品ギャラリーを作成する
  • お客様の声スライダーやプロモーションバナーを作成する
  • 自動で切り替わるコンテンツを表示する
  • スワイプでナビゲーションできる画像ビューアーを作成する
  • カスタムナビゲーションコントロールを備えたコンテンツローテーターを実装する
  • 水平方向と垂直方向の両方のナビゲーションに対応したギャラリーを構築する
  • 時間とループ動作をカスタマイズできるスライドショーを作成する

コンポーネントの概要

SfRotator コントロールは、次の機能を提供します。

  • 複数のナビゲーションモード： サムネイル（画像のプレビュー）とドット（インジケーター）
  • データバインディング： IList、ObservableCollection、SfRotatorItem のコレクションに対応
  • 自動再生とループ： 設定可能な遅延時間での自動切り替えと、無限ループ
  • 方向指定ナビゲーション： 水平方向、垂直方向、一方向モードを含む6種類のナビゲーション方向
  • 幅広いカスタマイズ： カスタムカラー、ストローク、テンプレート、ナビゲーションボタンのスタイル設定
  • インタラクティブな操作： スワイプジェスチャー、ナビゲーションボタン、プログラムによるインデックス選択
  • イベント処理： ナビゲーション操作への応答に使用する SelectedIndexChanged イベント

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

はじめに

📄 参照： references/getting-started.md

  • Syncfusion.Maui.Rotator NuGet パッケージのインストール
  • ハンドラーの登録（ConfigureSyncfusionCore）
  • 基本的な XAML と C# の実装
  • 画像を使った最初の動作例
データとコンテンツ

📄 参照： references/populating-data.md

  • データモデルと ViewModel の作成
  • ItemsSource とコレクション（IList、ObservableCollection）のバインド
  • DataTemplate を使った ItemTemplate の設定
  • シンプルなシナリオで SfRotatorItem を使用する
  • URL からオンライン画像を読み込む
ナビゲーションモードとスタイル設定

📄 参照： references/navigation-modes.md

  • NavigationStripMode（Thumbnail、Dots）
  • ドットのカスタマイズ（ストローク、選択時／未選択時のカラー）
  • サムネイルのカスタマイズ（ストロークのカラー）
  • ナビゲーションボタンのスタイル設定（アイコンのカラー、背景）
  • ナビゲーションボタンの表示／非表示
  • DotPlacement のオプション（Default、None、Outside）
位置と方向

📄 参照： references/placement-and-direction.md

  • NavigationStripPosition（Top、Bottom、Left、Right）
  • NavigationDirection（Horizontal、Vertical、LeftToRight、RightToLeft、TopToBottom、BottomToTop）
  • 位置と方向の組み合わせ
  • レイアウトのベストプラクティス
自動再生とユーザー操作

📄 参照： references/autoplay-and-interaction.md

  • EnableAutoPlay による自動切り替えの有効化
  • NavigationDelay の時間設定
  • EnableLooping による無限スクロールの有効化
  • EnableSwiping によるユーザー操作の制御
  • SelectedIndex によるプログラムからのナビゲーション
高度なカスタマイズ

📄 参照： references/customization.md

  • DataTemplateSelector による動的なテンプレートの選択
  • IsTextVisible によるテキストパネルの表示
  • カスタムレイアウトとスタイル設定
  • 背景色とサイズ設定
  • 高度なテンプレートのシナリオ
イベントと移行

📄 参照： references/events.md

  • SelectedIndexChanged イベントの処理
  • ナビゲーションの変更への応答
  • XAML と C# でのイベントパターン
  • API の変更と破壊的変更

コメント

Markdown 対応