CircularPanel

Creates an empty circular panel that spreads its children evenly round the whole ring, starting at the right-hand side.

Gets or sets whether the children are spread evenly round the whole ring or across the angle in ItemsGapAngleFactor.

With the default ItemsGapAngleFactor of a full turn, both strategies place the children identically.

Gets or sets how far in from the panel's edge the ring of children sits: the larger the value, the smaller and tighter the ring.

At 2 the ring touches the panel's edges, so the children's centres lie on the edge and half of each child hangs outside. Above 2 the ring moves inwards; the room left between a child and the edge is size * (0.5 - 1 / factor) - childSize / 2. At the default of 2.5 that is a tenth of the panel's size less half the child's, so a 480-pixel panel leaves 4 logical pixels round an 88-pixel child – and a smaller panel leaves less than nothing. Raise the factor, or enlarge the panel, when large children run over the edge.

Below 2 the ring is larger than the panel and the children sit outside it. They are still drawn, which suits a ring deliberately spread round a central picture, but inside anything that clips they disappear. Values closer to zero than 0.1, and values that are not a finite number, are read as 0.1.

<!-- A ring that sits well inside its panel, leaving room in the middle for a logo. -->
<Grid Width="360" Height="360">
    <Image Source="Images/logo.png" Width="96" Height="96" />
    <panels:CircularPanel ItemsClosenessFactor="3.2">
        <TextBlock Text="Plan" />
        <TextBlock Text="Build" />
        <TextBlock Text="Test" />
        <TextBlock Text="Release" />
    </panels:CircularPanel>
</Grid>

Gets or sets the angle, in radians, that the children share between them when AngleCalculationStrategy is GapAngleCalculationStrategy.Custom.

The gap from one child to the next is this angle divided by the number of children, so the children cover the angle less one gap: four children with Math.PI (a half turn) sit 0, 45, 90 and 135 degrees round from RenderAngle. To fan n children so that the first and last are exactly an angle A apart, set this to A * n / (n - 1).

A negative angle runs the children anticlockwise. Ignored when AngleCalculationStrategy is GapAngleCalculationStrategy.Dynamic. A value that is not a finite number is read as a full turn.

<!-- Five actions fanned across the top half of the ring, from left to right. -->
<panels:CircularPanel AngleCalculationStrategy="Custom"
                      RenderAngle="3.1416"
                      ItemsGapAngleFactor="3.927">
    <Button Content="Reply" />
    <Button Content="Reply all" />
    <Button Content="Forward" />
    <Button Content="Archive" />
    <Button Content="Delete" />
</panels:CircularPanel>

Gets or sets where on the ring the first child is placed, which turns the whole ring of children.

Every other child follows on from the first, so changing this turns the whole arrangement: -Math.PI / 2 (-1.5708) puts the first child at the top, Math.PI (3.1416) on the left. A value that is not a finite number is read as 0.

The panel lays itself out again whenever the angle changes, so it can be animated with a DoubleAnimation to spin the ring, or bound to a slider to let the user turn it. The children themselves are moved, not rotated: text stays upright.

// Turn the ring a quarter turn clockwise, smoothly, each time the user clicks "Next".
double target = ring.RenderAngle + Math.PI / 2;
ring.BeginAnimation(CircularPanel.RenderAngleProperty,
    new DoubleAnimation(target, TimeSpan.FromMilliseconds(400)) { FillBehavior = FillBehavior.Stop });
ring.RenderAngle = target;

Places each child, at the size it asked for, centred on its point on the ring.

finalSize: the panel always uses all the area it is given.

A RenderAngle or ItemsGapAngleFactor that is not a finite number is read as 0 and a full turn respectively, so a stray binding value cannot place the children at an impossible position.

Measures each child at the size it wants, and works out how much room the panel needs.

On each axis: all the room on offer when it is a finite amount; otherwise enough for the largest child to sit on the ring inside the panel – the child's size times factor / (factor - 2), where factor is ItemsClosenessFactor, or three times the child's size when the factor is 2 or less.

Children are measured with unlimited room, so each one is laid out at its natural size and never squeezed by the panel.

Identifies the AngleCalculationStrategy dependency property.

Identifies the ItemsClosenessFactor dependency property.

Identifies the ItemsGapAngleFactor dependency property.

Identifies the RenderAngle dependency property.