syncfusion-maui-toolkit-shimmer

.NET MAUI Shimmer（SfShimmer）の実装

SfShimmer は、コンテンツがバックグラウンドで読み込まれている間に、アニメーション付きのシマー・プレースホルダーを表示し、アプリの応答性を体感しやすくします。7 種類の組み込みレイアウト、ShimmerView のシェイプを使った完全カスタムビュー、幅広いウェーブアニメーションのカスタマイズに対応しています。

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

次のような場合に、このスキルを使用します。

• データやコンテンツを取得する前にローディング用プレースホルダーを追加する
• API 呼び出しが完了するまでスケルトンスクリーンを表示する
• スピナーを、コンテンツの形状に合わせたローディングアニメーションに置き換える
• シマーの色、ウェーブの方向、またはアニメーション速度をカスタマイズする
• 実際の UI を模したカスタムシマーレイアウトを作成する

コンポーネントの概要

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

• 組み込みレイアウトタイプ：あらかじめデザインされた 7 種類のシマーパターン（CirclePersona、SquarePersona、Profile、Article、Video、Feed、Shopping）
• カスタムビューのサポート：Circle、Rectangle、RoundedRectangle のシェイプを使って、ShimmerView でカスタムシマーレイアウトを作成
• ウェーブアニメーションの制御：設定可能なウェーブの方向（5 種類）、幅、アニメーション時間
• 色のカスタマイズ：独立した Fill（背景）プロパティと WaveColor（ハイライト）プロパティ
• 繰り返しパターン：RepeatCount プロパティを使用して、シマーレイアウトを縦方向に積み重ねて表示
• コンテンツの切り替え：IsActive プロパティを使用して、シマーと読み込み済みコンテンツをスムーズに切り替え
• 柔軟な統合：子コンテンツとして、任意の .NET MAUI View に対応
• パフォーマンスを最適化：軽量なアニメーションによって、アプリの応答性を体感しやすくします

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

はじめに

📄 参照： references/getting-started.md

• Syncfusion.Maui.Toolkit NuGet パッケージのインストール
• MauiProgram.cs でのハンドラーの登録
• XAML と C# での SfShimmer の追加
• IsActive によるシマーとコンテンツの切り替え

組み込みビュータイプ

📄 参照： references/built-in-views.md

• 7 種類の組み込み ShimmerType 値：CirclePersona、SquarePersona、Profile、Article、Video、Feed、Shopping
• XAML と C# での Type プロパティの設定
• デフォルトのタイプと、各レイアウトを選ぶ場面

カスタムビュー

📄 参照： references/custom-views.md

• CustomView と BoxView を使ったカスタムシマーレイアウトの作成
• ShapeType（Circle、Rectangle、RoundedRectangle）を指定した ShimmerView の使用
• 複雑なカスタムレイアウトのための、XAML と C# による完全な例

カスタマイズとアニメーション

📄 参照： references/customization.md

• Fill — シマーの背景色
• WaveColor — シマーのハイライト色
• WaveWidth — ウェーブのハイライトの幅
• WaveDirection — 5 種類の方向（Default、LeftToRight、RightToLeft、TopToBottom、BottomToTop）
• RepeatCount — シマーパターンを縦方向に繰り返す
• AnimationDuration — ミリ秒単位でアニメーション速度を制御