In This Article

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.

Screenshot

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.

Screenshot

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.