RingSlice
The RingSlice shape renders a portion (or the entire circle) of a ring shape. Its start/end angles, radius, thickness, and other stroke properties can be set.
Several RingSlice shapes combined to create an appealing radial graph
Ring slice shapes can be combined in many interesting ways within UI, primarily used to create progress indicators.
Angles, Radius, and Thickness
The shape renders a ring slice between two angles, specified in degrees, where 0
is upward and the degree values increase as they go clockwise, meaning 90
degrees is to the right. To render a quarter circle ring from the top to the right, use a StartAngle of 0
and an EndAngle of 90
.
Several RingSlice controls used to render a four-step circular progress indicator
The control also has two properties that control its radius and thickness. The Radius property specifies the outer radius of the ring. The StrokeThickness
property specifies the thickness of the ring, extending inward from the outer radius.
Tip
Use a StrokeThickness
value that is the same as the Radius to render a pie slice.
Other Stroke Properties
RingSlice also supports all of the standard stroke properties found on a shape control. This includes setting line caps to achieve flat, round or square line ends, or setting properties to render dashed lines.
xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:RingSlice Radius="60" EndAngle="270"
Stroke="#9e5aac" StrokeThickness="6" StrokeLineCap="Round" StrokeDashArray="3" StrokeDashOffset="-1" />
Entire Circle
When the StartAngle and EndAngle are the same value, the ring slice will by default render a full circular ring. The IsRenderedWhenFullCircle property can be set to false
to disable this behavior. When set to false
and the angles are the same, nothing will be rendered.
Note
Degree angles are normalized when comparing equality. Therefore, the angles 0
and 360
are considered to be the same angle.