syncfusion-maui-toolkit-circular-progressbar

.NET MAUI で円形プログレスバーを実装する

Syncfusion .NET MAUI の円形プログレスバー（SfCircularProgressBar）は、さまざまなカスタマイズオプションを備え、進捗を円形で表示します。確定状態と不確定状態、滑らかなアニメーション、セグメント化された進捗、グラデーションカラー、カスタム角度、中央コンテンツに対応しています。タスクの完了状況、読み込みインジケーター、ダッシュボード、進捗の追跡に最適です。

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

次のようなニーズがある場合に、このスキルを使用してください。

• タスク、ダウンロード、アップロード、処理の進捗を円形インジケーターで表示する
• 完了率が既知（0～100％）の確定的な進捗を実装する
• 所要時間が不明な場合（読み込み、処理中）に不確定な進捗を表示する
• 複数ステップのワークフローや順次実行されるタスク向けに、セグメント化された進捗を作成する
• 角度、色、グラデーション、太さ、角のスタイルを使って外観をカスタマイズする
• イージング効果を使ったアニメーションで、進捗を滑らかに遷移させる
• 中央にカスタムコンテンツ（テキスト、アイコン、ボタン、画像）を表示する
• 進捗イベントを処理して、値の変化や完了に応答する
• カスタム角度で半円または円弧の進捗インジケーターを作成する
• 複数の色で進捗範囲を可視化し、状態を区別する

コンポーネントの概要

SfCircularProgressBar コントロールが提供する機能は次のとおりです。

• 柔軟な状態： 確定（進捗が既知）と不確定（所要時間が不明）
• 外観のカスタマイズ： 角度、太さ、色、グラデーション、角のスタイル
• セグメント化： 設定可能な間隔を設けて、進捗を複数のセグメントに分割
• アニメーションのサポート： カスタマイズ可能な時間とイージングによる滑らかな遷移
• 範囲の設定： カスタムの最小値／最大値（既定値は 0～100）
• 中央コンテンツ： 任意の MAUI ビュー（テキスト、ボタン、画像）を中央に追加
• イベント： 操作に対応する ProgressChanged と ProgressCompleted
• 豊富なグラデーションのサポート： 単色またはグラデーション遷移による複数の色範囲

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• MauiProgram.cs で Syncfusion ハンドラーを登録
• 基本的な円形プログレスバーの実装（XAML と C#）
• 最初に動作するサンプル

状態と進捗モード

📄 参照： references/states.md

• 確定状態（既定。進捗が既知の場合）
• 不確定状態（所要時間が不明な場合）
• 各状態を使用する場面
• 確定モードと不確定モードの組み合わせ

セグメント

📄 参照： references/segments.md

• 複数の連続したタスクを可視化する
• SegmentCount プロパティで進捗を分割する
• セグメント間の間隔をカスタマイズする
• セグメント化された進捗のユースケース

外観のカスタマイズ

📄 参照： references/appearance.md

• 半円や円弧向けの角度カスタマイズ（StartAngle、EndAngle）
• GradientStops による範囲色（単色とグラデーション）
• 太さと半径の設定（Pixel と Factor）
• 角のスタイルのカスタマイズ（フラット、曲線）
• 進捗色とトラック色のカスタマイズ

アニメーション

📄 参照： references/animation.md

• 確定状態と不確定状態のアニメーション時間
• イージング効果（Linear、CubicInOut、BounceIn など）
• カスタムアニメーションに対応する SetProgress() メソッド
• アニメーションの速度と動作の制御

範囲の設定

📄 参照： references/range.md

• カスタム進捗範囲の定義
• Minimum プロパティと Maximum プロパティ
• 比率の値（0～1）とパーセンテージ（0～100）の使い分け

カスタムコンテンツ

📄 参照： references/custom-content.md

• 中央へのビューの追加（Content プロパティ）
• データバインディングを使ったカスタムテキスト
• 進捗を制御するボタン
• インジケーターとしての画像とアイコン
• レイアウトの例

イベント

📄 読む： references/events.md

• 値の変更を示す ProgressChanged イベント
• 完了を示す ProgressCompleted イベント
• イベント引数の処理
• 進捗に応じた動的な動作