mcpField
S
syncfusion-maui-popup

syncfusion-maui-popup

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

syncfusion-maui-popup について

Syncfusion SfPopupの実装とレイアウト設定を扱う、.NET MAUI開発者向けのスキルガイドです。配置、コンテンツテンプレート、アニメーション、モーダル操作を解説し、Volume 3 2025以降は機能強化が終了する旨も記載しています。

主な機能

  1. 01中央・座標・ビュー相対の配置
  2. 02ヘッダー、フッター、コンテンツのテンプレート
  3. 031ボタン・2ボタンのレイアウト
  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-popup

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

同梱ファイル

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

references/
advanced-integration.md
events-and-modal.md
getting-started.md
layout-customization.md
positioning.md
sizing-and-animations.md
styling-and-appearance.md

詳細

.NET MAUI ポップアップの実装

Syncfusion .NET MAUI Popup（SfPopup）コントロールを実装し、豊富な位置指定とカスタマイズのオプションを使って、アラートメッセージ、カスタムビュー、モーダルダイアログを表示するための包括的なスキルです。

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

次のことが必要な場合に、このスキルを使用してください。

  • .NET MAUI アプリでアラートメッセージ、確認メッセージ、通知を表示する
  • ユーザー操作が必要なモーダルダイアログを表示する
  • カスタムヘッダー、フッター、コンテンツを備えたポップアップを作成する
  • 特定の位置（中央、絶対位置、ビューを基準とした位置）にポップアップを配置する
  • 新しいページに移動せずに情報のオーバーレイを表示する
  • ツールチップ、コンテキストメニュー、フライアウトコンテンツを実装する
  • 読み込みインジケーターや進行状況ダイアログを表示する
  • 全画面のモーダルエクスペリエンスを作成する
  • ポップアップにカスタムビュー（ListView、DataGrid、フォーム）を表示する
  • ボタンのコールバックでユーザーの承諾／拒否アクションを処理する

コンポーネントの概要

**Syncfusion .NET MAUI Popup（SfPopup）**は、次の機能を備えたカスタマイズ可能なポップアップを表示する、多目的なレイアウトコントロールです。

  • 柔軟な位置指定：中央、絶対座標、任意のビューを基準とした位置、全画面
  • カスタマイズ可能なレイアウト：テンプレートのサポートとカスタムスタイルを備えたヘッダー、本文、フッター
  • 外観モード：ボタン1つまたは2つのフッターレイアウト
  • モーダルのサポート：ポップアップが閉じられるまで、背景との操作を防止
  • アニメーション：ズーム、フェード、スライドの組み込みアニメーション
  • 自動サイズ調整：コンテンツのサイズに合わせて自動的に調整
  • MVVM のサポート：データバインディングとコマンドを完全にサポート

お知らせ： Volume 3 2025（2025年9月中旬）以降、このコントロールの機能強化は Syncfusion パッケージで提供されなくなります。引き続きサポートを受けるには、Syncfusion Toolkit for .NET MAUIに切り替えてください。

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

はじめにとインストール

📄 参照： references/getting-started.md

  • NuGet パッケージのインストール（Syncfusion.Maui.Popup）
  • MauiProgram.cs でのハンドラー登録
  • 基本的なポップアップの初期化（XAML と C#）
  • ポップアップの表示と閉じる方法
  • 最初のポップアップの実装
  • ネイティブへの埋め込み（Android/iOS）
位置指定オプション

📄 参照： references/positioning.md

  • IsOpen または Show() による中央配置
  • x、y 座標による絶対位置への配置
  • 任意のビューを基準とした位置指定
  • オフセットを使用した絶対相対位置指定
  • 全画面モード
  • MVVM の位置指定パターン
  • 表示時間による自動終了
  • アクションバーの上への配置
  • ShowAsync() による結果の返却
レイアウトのカスタマイズ

📄 参照： references/layout-customization.md

  • 外観モード（OneButton、TwoButton）
  • ヘッダー、フッター、閉じるボタンの表示／非表示
  • カスタムヘッダーテンプレート
  • カスタムフッターテンプレート
  • カスタムコンテンツテンプレート
  • ヘッダーとフッターの高さ
  • ボタンテキストのカスタマイズ
  • Message プロパティ
  • オーバーレイの背景を無効化
サイズとアニメーション

📄 参照： references/sizing-and-animations.md

  • 幅と高さの設定
  • 自動サイズ調整モード（Height、Width、Both、None）
  • 全画面ポップアップモード
  • アニメーションの種類（Zoom、Fade、SlideOnLeft、SlideOnRight、SlideOnTop、SlideOnBottom）
  • アニメーションの時間とイージング
  • カスタムアニメーション効果
イベントとモーダルの動作

📄 参照： references/events-and-modal.md

  • ポップアップのライフサイクルイベント（Opening、Opened、Closing、Closed）
  • イベント引数とキャンセル
  • モーダルモードの設定
  • オーバーレイの操作設定
  • オーバーレイのタップ時に閉じる動作
  • 承諾ボタンと拒否ボタンのイベント
スタイルと外観

📄 参照： references/styling-and-appearance.md

参照するタイミング： ヘッダー、フッター、メッセージのスタイルを設定してポップアップの外観をカスタマイズするとき。オーバーレイとストロークのカスタマイズ。

内容：

  • ヘッダーのスタイル設定
  • フッターのスタイル設定
  • メッセージ／コンテンツのスタイル設定
  • 枠線のカスタマイズ
  • オーバーレイ背景のスタイル設定
  • ぼかし効果
  • 背景のスタイル設定
  • 影の効果
  • スタイル設定の例
高度な統合と例

📄 参照： references/advanced-integration.md

  • ポップアップ内での ListView の表示
  • DataGrid のセルタップ統合
  • Switch コントロールのバインド例
  • コマンドを使用した MVVM パターン
  • ローカライズのサポート
  • リキッドガラス効果のスタイル設定
  • 旧バージョンからの移行
  • ベストプラクティスとパターン

コメント

Markdown 対応