XAMLでArchを書く

ArchSegment

XAMLにはデフォルトでArchや円グラフのような、円の端が切れていてその端の長さを自由に選択できるような図形がありません。

そこでXAMLにはArchSegmentというPathのFigure内にArchを書く要素が存在します。

がArchSegmentは始点と終点を絶対座標で指定し、しかもその座標間が短いかどうかでも描画されるArchが変化し、非常に使いづらいです。

標準の使い方はこちらにのっています。

 

ではどうすれば角度を指定して、その通りに円の端が切れるようなArchが書けるのかというと、ArchSegmentの終点の座標を三角関数で導く必要があります。

というわけでそういうユーザーコントロールを用意しました。以下をコピーしていただければ使えると思います。

RateProgressRing.xaml

RateProgressRing.xaml.cs

 

使い方としてはこんな感じでRateプロパティに0.0~1.0の値を指定することでその割合を円グラフっぽく表示してくれます。

DependencyPropertyなのでBindingもOK

GIF