syncfusion-maui-pull-to-refresh について
.NET MAUI 開発者向けに、Syncfusion SfPullToRefresh の実装方法を案内します。プル操作による更新、インジケーターやテンプレートの調整、更新処理の制御を扱います。
主な機能
- 01プル操作でコンテンツを更新
- 02SlideOnTop と Push の遷移モード
- 03進捗インジケーターとしきい値の調整
- 04プル中・更新中のテンプレート設定
- 05MVVM コマンドとデータバインディング
- 06更新イベントとプログラム制御
活用シーン
- 01リストや DataGrid にプル更新を追加
- 02更新中の進捗表示をカスタマイズ
- 03ViewModel コマンドから更新を実行
- 04イベントで更新の制御やキャンセル
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-pull-to-refreshインストール後、Claude Code で/syncfusion-maui-pull-to-refreshを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/customization.mdevents.mdgetting-started.mdmvvm-commands.mdpullable-content.mdtemplates.md詳細
.NET MAUI PullToRefresh の実装(SfPullToRefresh)
Syncfusion .NET MAUI PullToRefresh コントロールを使用すると、プルダウンジェスチャーによってコンテンツをインタラクティブに更新できます。プル操作中に進行状況インジケーターを表示し、しきい値を超えてプルした後にユーザーが指を離すと、コンテンツの更新を開始します。
このスキルを使用する場面
次のような場合に、このスキルを使用してください。
- .NET MAUI アプリケーションで、必要に応じてコンテンツを更新するプルによる更新機能を実装する
- ListView、DataGrid、カスタムレイアウトなどのスクロール可能なビューに、インタラクティブな更新コントロールを追加する
- プルによる更新操作中に、進行状況アニメーション付きの更新インジケーターを表示する
- 色、サイズ、遷移モード、しきい値など、更新時の外観をカスタマイズする
- プログレスバーやアニメーションビューを使用して、カスタム更新テンプレートを作成する
- 更新コマンドとデータバインディングを使用して、MVVM パターンを統合する
- プル操作、更新、完了の各アクションを制御する更新イベントを処理する
- 適切な更新動作で、複雑なビューをプル可能なコンテンツ領域内に配置する
コンポーネントの概要
- インタラクティブなプルによる更新ジェスチャーの認識
- 2 つの遷移モード:SlideOnTop と Push
- カスタマイズ可能な進行状況インジケーターの外観
- 任意の .NET MAUI ビューをプル可能なコンテンツとして配置可能
- RefreshCommand とデータバインディングに対応した MVVM 互換性
- プル中および更新中のビュー向けカスタムテンプレート
- 細かく更新を制御するための組み込みイベント
- 更新のプログラムによる開始と完了
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
参照するタイミング:初回のセットアップ、インストール、基本的な実装
- Syncfusion.Maui.PullToRefresh NuGet パッケージのインストール
- Syncfusion ハンドラーの登録(ConfigureSyncfusionCore)
- 基本的な SfPullToRefresh インスタンスの作成
- PullableContent の定義
- IsRefreshing プロパティの処理
- 最初のプルによる更新アプリケーションの実行
プル可能なコンテンツ
📄 参照: references/pullable-content.md
参照するタイミング:プルジェスチャーに応答するコンテンツの設定
- PullableContent プロパティについて
- .NET MAUI DataGrid を PullToRefresh 内に配置する
- .NET MAUI ListView を PullToRefresh 内に配置する
- カスタムビューとレイアウトの読み込み
- プル可能なコンテンツを設定する際のベストプラクティス
- さまざまなビューでのコンテンツ更新の処理
カスタマイズとプロパティ
📄 参照: references/customization.md
参照するタイミング:外観、動作、しきい値、遷移モードのカスタマイズ
- TransitionMode:SlideOnTop と Push のアニメーション
- PullingThreshold と RefreshViewThreshold の設定
- 更新状態を制御する IsRefreshing プロパティ
- 進行状況インジケーターのカスタマイズ(色、太さ、サイズ)
- RefreshViewWidth と RefreshViewHeight プロパティ
- ProgressBackground、ProgressColor、ProgressThickness
- プログラムによるメソッド:StartRefreshing() と EndRefreshing()
- サイズとレイアウトに関する考慮事項
カスタムテンプレート
📄 参照: references/templates.md
参照するタイミング:プル中および更新中のカスタムビューの作成
- PullingViewTemplate プロパティ
- RefreshingViewTemplate プロパティ
- テンプレートでの SfCircularProgressBar の使用
- カスタム進行状況インジケーター用の DataTemplate の作成
- Pulling イベントとテンプレートの統合
- 更新ビューのアニメーション化
- テンプレートのカスタマイズ例
MVVM とコマンド
📄 参照: references/mvvm-commands.md
参照するタイミング:PullToRefresh での MVVM パターンの実装
- MVVM 互換性の概要
- IsRefreshing を ViewModel のプロパティにバインドする
- RefreshCommand と RefreshCommandParameter の使用
- 更新操作を制御する CanExecute() メソッド
- INotifyPropertyChanged の実装
- ViewModel の完全な例
- ViewModel からプル操作をキャンセルする
イベント
📄 参照: references/events.md
参照するタイミング:プルして更新する際のライフサイクルイベントを処理するとき
- PullingEventArgs を使用する Pulling イベント
- ポインターを離したときの Refreshing イベント
- 完了時の Refreshed イベント
- 更新を防止するための Cancel プロパティ
- プル距離を追跡するための Progress プロパティ
- イベント処理のパターンと例