mcpField
S
syncfusion-maui-parallax-view

syncfusion-maui-parallax-view

github.com/syncfusion開発61224 回インストール2 週間前に更新
リポジトリ

syncfusion-maui-parallax-view について

このスキルは、.NET MAUIアプリでSyncfusion SfParallaxViewを使い、視差スクロールを実装する方法を案内します。スクロールする前景と背景コンテンツを連動させ、速度や方向を設定できるほか、カスタムスクロールコントロールとの連携も扱います。

主な機能

  1. 01前景のスクロールビューと背景コンテンツの連動
  2. 02背景の視差速度の調整
  3. 03垂直・水平スクロールへの対応
  4. 04インターフェースによるカスタムコントロール連携

活用シーン

  1. 01リストに視差背景を追加
  2. 02視差効果のあるヒーローセクションを作成
  3. 03画像ギャラリーの背景をスクロールに連動
  4. 04カスタムスクロールコントロールに視差効果を追加

インストール

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

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

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

同梱ファイル

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

references/
custom-controls.md
customization.md
getting-started.md
source-binding.md

詳細

Syncfusion® .NET MAUI Parallax View の実装

Syncfusion .NET MAUI Parallax View（SfParallaxView）は、背景要素を前景要素とは異なる速度でスクロールさせることで、アプリケーションに奥行きと動きを演出する視覚的に魅力的な方法を提供します。このコントロールは、スクロール可能な前景要素（Source）を背景要素（Content）にバインドし、背景をさまざまな速度で移動させて視差効果を作り出します。

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

次のような場合に、このスキルを使用してください。

  • 視差スクロール効果を作成する：背景画像やビューを前景のコンテンツより遅く移動させる
  • 視覚的な奥行きを追加する：リスト、記事、画像ギャラリーなどのスクロール可能なコンテンツに奥行きを加える
  • ヒーローセクションを実装する：視差背景を使って、魅力的なユーザーインターフェイスを作成する
  • ScrollView または ListView をバインドする：スクロールイベントに応じて動く背景要素と連携させる
  • カスタムのスクロール可能なコントロールを作成する：IParallaxView インターフェイスを使用して視差効果をサポートする
  • 没入感のある UI を構築する：スクロール位置に連動する動的な背景アニメーションを作成する
  • ユーザーエクスペリエンスを向上させる：縦または横方向で滑らかな視差遷移を実現する

コンポーネントの概要

SfParallaxView は、次の要素を使ってレイヤー状のスクロール体験を作成します。

  • Content：視差効果で移動する背景ビュー（Image、StackLayout、または任意のビュー）
  • Source：前景のスクロール可能なビュー（ScrollView、ListView、またはカスタム IParallaxView コントロール）
  • Speed：背景のスクロール速度をカスタマイズします（0.0 ～ 1.0）
  • Orientation：縦方向と横方向の両方の視差スクロールに対応します

背景の Content は Source のサイズに合わせて自動的に伸縮し、シームレスな視覚的統合を実現します。

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

はじめに

📄 参照： references/getting-started.md

  • Syncfusion.Maui.ParallaxView NuGet パッケージのインストール
  • XAML と C# での名前空間の登録
  • SfParallaxView の基本的な初期化
  • 背景ビューを使った Content プロパティの設定
  • 対応するコンテンツの種類（Image、StackLayout、Grid など）
  • XAML と C# での基本的な実装例
Source のバインドと統合

📄 参照： references/source-binding.md

  • Source プロパティと IParallaxView インターフェイスについて
  • ScrollView をバインドして基本的な視差効果を作成する
  • Syncfusion ListView を視差背景と統合する
  • ViewModel とデータバインディングを使った完全な例
  • Source のサイズに合わせた Content の自動伸縮動作
  • 既知の問題と回避策（Android の画像サイズ調整）
  • 動作するサンプルの GitHub リンク
カスタマイズオプション

📄 参照： references/customization.md

  • 視差スクロールの強さを制御する Speed プロパティ
  • Speed の値と視覚効果（0.0 = 移動なし、1.0 = 同じ速度）
  • 縦または横方向の視差を指定する Orientation プロパティ
  • 効果を適切に表示するための Source コントロールの方向設定
  • XAML と C# での設定例
  • 滑らかなスクロールのためのパフォーマンスに関する考慮事項
カスタムコントロールのサポート

📄 参照： references/custom-controls.md

  • カスタムコントロールに IParallaxView インターフェイスを実装する
  • コンテンツ全体のサイズを指定する ScrollableContentSize プロパティ
  • ParallaxScrollingEventArgs を使った Scrolling イベント
  • ScrollX、ScrollY、CanAnimate パラメーター
  • CustomListView の完全な実装例
  • 動的なサイズ計算のための MeasureOverride
  • カスタムのスクロール可能なコントロールの統合パターン

コメント

Markdown 対応