syncfusion-wpf-circular-progressbar

SfCircularProgressBar の実装（WPF）

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

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

• 既知のタスクの円形／放射状の進捗状況を表示する（確定的）
• 進捗状況が不明な間、確定的でないスピナーを表示する
• プライマリとセカンダリ（バッファ）の進捗状況を同時に可視化する
• 進捗状況をセグメントに分割する（例：ワークフローのステップ）
• 円弧の角度をカスタマイズする（半円、全円、部分円弧）
• 進捗リングの色、グラデーション、範囲に応じた色をスタイル設定する
• リングの中央にカスタムコンテンツ（テキスト、ボタン、画像）を配置する

アセンブリ： Syncfusion.SfProgressBar.WPF 名前空間： Syncfusion.UI.Xaml.ProgressBar XAML スキーマ： http://schemas.syncfusion.com/wpf 主要クラス： SfCircularProgressBar

---

クイックスタート

<Window
    xmlns:Syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        
        <Syncfusion:SfCircularProgressBar
            Progress="70"
            ShowProgressValue="True"
            Width="150" Height="150" />
    </Grid>
</Window>

using Syncfusion.UI.Xaml.ProgressBar;

SfCircularProgressBar circular = new SfCircularProgressBar();
circular.Progress = 70;
circular.ShowProgressValue = true;
circular.Width = 150;
grid.Children.Add(circular);

---

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

はじめに

📄 参照： references/getting-started.md

• NuGet／アセンブリのインストール（Syncfusion.SfProgressBar.WPF）
• XAML 名前空間とスキーマの宣言
• XAML とコードビハインドでのコントロールの宣言
• Progress プロパティの設定
• SfSkinManager によるテーマの統合

状態

📄 参照： references/states.md

• ShowProgressValue を使用する確定状態（デフォルト）
• 進捗状況が不明な場合の確定的でない状態（IsIndeterminate="True"）
• バッファ状態（SecondaryProgress、SecondaryProgressColor）
• 状態の使い分けガイド

外観とカスタマイズ

📄 参照： references/appearance.md

• StartAngle／EndAngle による円弧の形状
• 半径と太さ：IndicatorOuterRadius、IndicatorInnerRadius、TrackOuterRadius、TrackInnerRadius
• 単色：ProgressColor、TrackColor
• 範囲に応じた色：Start、End、Color を指定した RangeColor
• グラデーション効果：RangeColor.IsGradient
• 端の丸み：IndicatorCornerRadius
• アニメーション：AnimationDuration、AnimationEasing

セグメントとカスタムコンテンツ

📄 参照： references/segments-and-custom-content.md

• リングを個別のステップに分割する SegmentCount
• 中央の UI（テキスト、ボタン、画像）に使用する ProgressContent
• 中央のテキストを Progress 値にバインドする
• DispatcherTimer パターンを使用した再生／一時停止ボタン

---

主なプロパティ

プロパティ	型	デフォルト	用途
Progress	double	0	現在の進捗値（0～100）
ShowProgressValue	bool	false	中央に数値の％を表示
IsIndeterminate	bool	false	確定的でない回転アニメーション
SecondaryProgress	double	0	バッファ／セカンダリの進捗値
StartAngle	double	-90	円弧の開始角度（度）
EndAngle	double	270	円弧の終了角度（度）
SegmentCount	int	0	セグメント数（0 = なし）
ProgressColor	Brush	theme	進捗円弧の色
TrackColor	Brush	theme	トラック円弧の色
IndicatorCornerRadius	double	0	進捗円弧の端の丸み
AnimationDuration	TimeSpan	3000ms	確定的でないアニメーションのサイクル時間
ProgressContent	object	null	中央に表示するカスタムコンテンツ

---

一般的なユースケース

• ファイルアップロードインジケーター — ShowProgressValue="True" を指定した確定的な表示
• ローディングスピナー — 確定的でない状態（IsIndeterminate="True"）
• メディアプレーヤー — 再生／一時停止ボタンを含む ProgressContent
• ステップトラッカー — 合計ステップ数に合わせた SegmentCount
• CPU／メモリゲージ — 緑／黄／赤のゾーンを RangeColors にマッピング
• 半円ゲージ — StartAngle="180" EndAngle="360"