syncfusion-maui-circular-progressbar

.NET MAUI 円形プログレスバーの実装

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

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

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

• 円形の進行状況インジケーターを表示する（タスク、ダウンロード、アップロード、処理など）
• 確定進行状況を実装する（完了率が既知の状態、0～100％）
• 不確定進行状況を表示する（所要時間が不明な読み込みや処理など）
• セグメント化された進行状況を作成する（複数ステップのワークフローや連続したタスク向け）
• 外観をカスタマイズする（角度、色、グラデーション、太さ、角のスタイル）
• アニメーションを追加する（スムーズな進行状況の遷移にイージング効果を適用）
• カスタムコンテンツを中央に表示する（テキスト、アイコン、ボタン、画像）
• 進行状況イベントを処理する（値の変更や完了に応答）
• 半円または円弧の進行状況インジケーターを構築する（カスタム角度を使用）
• 進行状況の範囲を視覚化する（状態ごとに複数の色を使用）

コンポーネントの概要

SfCircularProgressBar コントロールは、次の機能を提供します。

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

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• MauiProgram.cs でハンドラーを登録
• 基本的な円形プログレスバーの実装（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 イベント
• イベント引数の処理
• 進捗に応じた動的な動作