mcpField
S
syncfusion-maui-toolkit-linear-progressbar

syncfusion-maui-toolkit-linear-progressbar

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

syncfusion-maui-toolkit-linear-progressbar について

Syncfusion SfLinearProgressBar の実装とカスタマイズを扱う、.NET MAUI 開発者向けスキルです。確定・不確定・バッファ状態に加え、セグメント、アニメーション、範囲色、進捗イベントを解説します。

主な機能

  1. 01確定・不確定・バッファ状態
  2. 02複数セグメントの進捗表示
  3. 03色・グラデーション・サイズの調整
  4. 04アニメーション時間とイージングの設定
  5. 05進捗範囲ごとの色設定
  6. 06進捗変更・完了イベント

活用シーン

  1. 01ファイルのアップロードやダウンロード状況の表示
  2. 02所要時間が不明なタスクの進捗表示
  3. 03動画のバッファと主進捗の表示
  4. 04セグメントバーで複数手順のタスクを追跡

インストール

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

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

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

同梱ファイル

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

references/
animation.md
appearance.md
events.md
getting-started.md
range.md
segments.md
states.md

詳細

Linear ProgressBar の実装

Syncfusion .NET MAUI Linear ProgressBar（SfLinearProgressBar）コントロールを実装およびカスタマイズするための包括的なガイドです。このコンポーネントは、長方形の形状でタスクの進行状況を表示します。確定および不確定の状態、セグメント、滑らかなアニメーションに対応し、範囲色を含む表示をカスタマイズできます。

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

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

  • 進行状況インジケーターを実装する：ファイルのアップロード、ダウンロード、データ処理タスクなど
  • 確定した進行状況を表示する：完了率（0～100％）がわかっている場合
  • 不確定な進行状況を表示する：タスクの所要時間が不明、または計算できない場合
  • バッファー状態を視覚化する：主と副の両方の進行状況を表示する場合（動画のバッファリングなど）
  • 複数セグメントの進行状況バーを作成する：順次タスクや複数ステップのタスクの場合
  • 進行状況の表示をカスタマイズする：色、グラデーション、サイズ、角の半径、アニメーションなど
  • 範囲に基づく色を適用する：異なる進行状況のゾーン（成功、警告、危険など）を表示する場合
  • 進行状況のアニメーションを追加する：カスタムの再生時間やイージング効果を使用する場合
  • 進行状況イベントを処理する：進行状況の変更時や完了時に応答する場合

コンポーネントの概要

SfLinearProgressBar は、長方形の横棒でタスクの進行状況を表示する .NET MAUI コントロールです。次の機能に対応しています。

  • 複数の状態：確定（進行状況が既知）、不確定（所要時間が不明）、バッファー（二重の進行状況）
  • セグメント：順次タスク用に進行状況を複数のセクションに分割
  • 豊富なカスタマイズ：色、グラデーション、太さ、パディング、角の半径
  • 滑らかなアニメーション：設定可能な再生時間とイージング関数
  • 範囲色：進行状況の範囲ごとに異なる色を設定
  • イベント：進行状況の変更と完了を追跡

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

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください。

  • Linear ProgressBar コントロールをインストールして設定する
  • NuGet パッケージ（Syncfusion.Maui.Toolkit）を追加する
  • Syncfusion Core ハンドラーを登録する
  • 最初の基本的な進行状況バーを作成する
  • 名前空間のインポートと初期化について理解する
進行状況の状態

📄 参照： references/states.md

次のような場合に参照してください。

  • 確定状態（既定、進行状況が既知）を理解する
  • 所要時間が不明なタスクに不確定状態を有効にする
  • 副の進行状況を含むバッファー状態を実装する
  • ユースケースに適した状態を選択する
  • 複雑なシナリオで状態を組み合わせる
セグメント

📄 参照： references/segments.md

次のような場合に参照してください。

  • 1 つの進行状況バーで複数の順次タスクを視覚化する
  • SegmentCount を使用して進行状況バーをセグメントに分割する
  • SegmentGapWidth を使用してセグメント間の間隔をカスタマイズする
  • 複数ステップの進行状況を段階的に表示する
表示のカスタマイズ

📄 参照： references/appearance.md

次のような場合に参照してください。

  • GradientStops で範囲色（単色またはグラデーション）を適用する
  • トラック、進行状況、副の進行状況の高さをカスタマイズする
  • 進行状況インジケーターの周囲のパディングを調整する
  • 角を丸めるために角の半径を設定する
  • 進行状況の塗りつぶし、トラックの塗りつぶし、副の進行状況の色を変更する
アニメーション

📄 参照： references/animation.md

次のような場合に参照してください。

  • 状態ごとにアニメーションの再生時間を設定する
  • イージング効果（Linear、CubicInOut、BounceIn など）を適用する
  • SetProgress() メソッドを使用して、一度だけアニメーション設定を上書きする
  • 不確定アニメーションの動作をカスタマイズする
  • 滑らかでインタラクティブな進行状況の遷移を作成する
範囲のカスタマイズ

📄 参照： references/range.md

次のような場合に参照してください。

  • Minimum と Maximum の値をカスタム定義する
  • パーセンテージの代わりに係数値（0.0～1.0）を使用する
  • 特定のシナリオに合わせて進行状況の範囲を調整する
  • 標準とは異なる進行状況のスケールを扱う
イベント

📄 読む： references/events.md

次のことを行う必要がある場合：

  • 進捗の更新に対応するため、ProgressChanged イベントを処理する
  • 進捗が最大値に達したときに、ProgressCompleted イベントを処理する
  • 進捗値に応じて外観を動的に変更する
  • 進捗の節目で実行されるカスタムロジックを実装する

コメント

Markdown 対応