mcpField
S
syncfusion-maui-backdrop

syncfusion-maui-backdrop

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

syncfusion-maui-backdrop について

Syncfusion の SfBackdropPage を .NET MAUI で実装するためのガイドです。前面の画面をスライドさせ、背面のメニューや関連コンテンツを表示するページの開発に役立ちます。

主な機能

  1. 01前面と背面のレイヤー構成
  2. 02ツールバー、ジェスチャー、コードによる操作
  3. 03自動または全画面の展開高さ
  4. 04エッジ形状とヘッダーアイコンの設定
  5. 05展開状態の変更イベント

活用シーン

  1. 01スライド式ナビゲーションメニューの追加
  2. 02フィルターや検索パネルの構築
  3. 03背景レイヤーの展開状態の追跡

インストール

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

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

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

同梱ファイル

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

references/
events.md
getting-started.md
header-configuration.md
liquid-glass-effect.md
reveal-and-corner-customization.md

詳細

Backdrop Pages の実装（.NET MAUI）

Syncfusion の SfBackdropPage は、2 つのサーフェスを持つレイヤー構造のページです。

  • Back Layer — 操作可能なコンテキストコンテンツ（ナビゲーションメニュー、フィルターなど）を配置します
  • Front Layer — 常に表示される主要コンテンツを配置し、下にスライドして Back Layer を表示します

Back Layer は、ツールバーアイコン、タッチ／スワイプ、またはプログラムから表示／非表示にできます。

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

次のことが必要な場合に、このスキルを使用します。

  • スライド式の Front Layer を使ったメニュー主導のナビゲーションを実装する
  • 主要コンテンツの背後からスライドして表示されるフィルターパネルや検索パネルを構築する
  • レイヤー構造のページに表示／非表示アニメーションを追加する
  • Backdrop のヘッダーアイコン、角の形状、表示時の高さをカスタマイズする
  • 状態を追跡するために BackLayerStateChanged イベントを処理する
  • Backdrop レイヤーにLiquid Glass Effect を適用する

コンポーネントの概要

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

  • 2 レイヤーアーキテクチャ：コンテキストアクション用の Back Layer と、空間的な階層を持つ主要コンテンツ用の Front Layer
  • 複数の表示方法：プログラム API、ツールバーアイコンのタップ、スワイプ／フリングジェスチャー
  • 適応型の表示高さ：Auto モード（コンテンツに合わせる）または Fill モード（画面全体に拡張）
  • カスタマイズ可能な Front Layer：独立した角丸設定が可能な、曲線またはフラットなエッジ形状
  • ヘッダーとの統合：カスタマイズ可能なアイコンとテキストによる、NavigationPage および FlyoutPage へのシームレスな対応
  • 滑らかなアニメーション：表示／非表示の遷移に組み込まれた Material Design モーション
  • 状態の追跡：表示率をパーセンテージで追跡する BackLayerStateChanged イベント
  • 最新のエフェクト：透過デザイン向けの Liquid Glass Effect に対応（iOS/macOS 26 以降、.NET 10）

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

はじめに

📄 参照： references/getting-started.md

  • NuGet パッケージのインストール（Syncfusion.Maui.Backdrop）
  • MauiProgram.cs でのハンドラー登録
  • SfBackdropPage の初期化（XAML と C#）
  • BackdropBackLayer および BackdropFrontLayer コンテンツの追加
  • プログラム、タッチ、スワイプによる表示／非表示
ヘッダーの設定

📄 参照： references/header-configuration.md

  • NavigationPage でのラップ（ヘッダーに必須）
  • NavigationPage と FlyoutPage での既定アイコン
  • カスタムアイコン画像（OpenIconImageSource、CloseIconImageSource）
  • カスタムアイコンテキスト（OpenText、CloseText）
表示高さと角の形状のカスタマイズ

📄 参照： references/reveal-and-corner-customization.md

  • BackLayerRevealOption：Fill と Auto
  • Front Layer の RevealedHeight
  • EdgeShape：Curved と Flat
  • LeftCornerRadius／RightCornerRadius
イベント

📄 参照： references/events.md

  • BackLayerStateChanged イベント
  • BackLayerStateChangedEventArgs.Percentage
  • XAML と C# でのイベント接続パターン
Liquid Glass Effect

📄 参照： references/liquid-glass-effect.md

  • Front Layer または Back Layer での EnableLiquidGlassEffect の有効化
  • ガラスエフェクト向けの透過背景の設定
  • プラットフォーム要件（iOS 26 以降、macOS 26 以降、.NET 10）

コメント

Markdown 対応