Radial layout controls

[MikeBarker-MSFT]

I would like to propose radial layout controls.

I would envisage:

1. A "RadialCanvas" where a child elements position is specified in polar co-ordinates, the combination of Radius and Angle.
   • The XAML would be similar to:

     <RadialCanvas>
         <Button RadialCanvas.Radius="20" RadialCanvas.Angle="0" Content="Click Me" />
         <TextBlock RadialCanvas.Radius="50" RadialCanvas.Angle="0.71" Text="Label" />
     </RadialCanvas>

   • The origin (Radius=0) should be the centre of the layout control.
   • The Radius and Angle should indicate the centre of the child control.

2. An "CircularLayout" where child elements are laid-out in a circle (or an arc there-of).
   • Child elements are evenly spaced over the specified arc.
   • The radius of the circle is automatically calculated such that elements take up all space available to them; unless...
     • If an infinite width and height are available to the layout, a minimum radius is chosen such that there is no overlap between elements.

An example of these controls are here:

• RadialCanvas
• CircularPanel

[niels9001]

@MikeBarker-MSFT FYI, transferred this to our new Labs repo where we incubate new controls and additions to the Toolkit :)

[michael-hawker]

We have the OrbitView in the existing Toolkit, but it's very rigid/particular. So, this proposal would really be a re-imagining of that which provides a bit more flexibility.

It's also similar to the CanvasView/Layout #310 #311 panels which allow for similar setups but with cartesian coordinates over polar coordinates, so these may be able to be attached property/extensions for those as well, maybe?

[MikeBarker-MSFT]

I agree. When I looked at it for my use case the OrbitView was far too specific for my needs.

You are right Michael, the RadialCanvas could indeed be implemented as attached properties. The CircularLayout, however, (now implemented as a slightly more generic EllipticalLayout) is quite a bit more specialized as it must calculate the polar radius in a way that "makes sense" for a given choice of configuration input, children and available size. I don't immediately see a good way for it to be implemented as an attached property.. though I am happy to be proven wrong! :-)

I was wondering if it would make sense to make the EllipticalLayout slightly more generic yet, by having a "RadiusDefinitions" property (similiar to Grid's RowDefinitions) so that controls can then be assign to a radius "group", such that the "groups" form a set of concentric "layout circles". Children controls are then located on the "layout circle" that they are assigned to.
The OrbitView would then become a specialization of this layout panel.

[MikeBarker-MSFT]

A use-case I had thought this style of layout (elliptical) lends itself very well to, is to view a graph; where the centre node is the "current", "primary" or "root" node, and its direct relations are laid out in a circle around it, with their relations further around them, and so on.

The OrbitView has targeted this already, but solved it in a very specialized and opinionate way. By "nesting" these circular/elliptical layouts together it would be possible to build up a fairly complex graph visualisation fairly quickly. Obviously it is a fairly big step from a "circular layout" to a full graph though... but I was thinking that would be the next 'click stop'.