WPF - 径向菜单

Question

我最近创建了一个HTML页面，我使用了这个菜单（见图）。我需要在WPF中创建类似的东西。有没有人知道如何实现这一目标。谢谢。 Codepen menu -
Radial menu preview

Answer 1

Infragistics有一个Radial Menu control，但它不是免费的。

Answer 2

有很多例子。

This可能是最好的之一。

基本上，开始的方法是创建一个径向布局的面板 - 即圆形。大多数示例都是从Panel类继承的。然后覆盖MeasureOverride和ArrangeOverride方法。一个相当简单的例子是下面的代码。我们假设一个固定的项目大小（ItemHeight和ItemWidth）。有一个字段'UseFerrisWheelLayout'，允许您根据其在圆圈中的位置来控制项目是直的还是变换的。

public class RadialPanel : Panel
{
  protected override Size MeasureOverride(Size constraint)
  {
    if (constraint.Width == double.PositiveInfinity || constraint.Height == double.PositiveInfinity)
        return Size.Empty;

    foreach (UIElement child in InternalChildren)
    {
        child.Measure(new Size(ItemWidth, ItemHeight));
    }
    return constraint;
  }

  protected override Size ArrangeOverride(Size finalSize)
  {
    // Calculate radius
    double radiusX = (finalSize.Width - ItemWidth) * 0.5;
    double radiusY = (finalSize.Height - ItemHeight) * 0.5;

    double count = InternalChildren.Count;

    // Sector angle between items
    double deltaAngle = 2 * Math.PI / count;

    // Center of the ellipse
    Point center = new Point(finalSize.Width / 2, finalSize.Height / 2);


    for (int i = 0; i < count; i++)
    {
        UIElement child = InternalChildren[i];

        // Calculate position
        double angle = i * deltaAngle;
        double x = center.X + radiusX * Math.Cos(angle) - ItemWidth / 2;
        double y = center.Y + radiusY * Math.Sin(angle) - ItemHeight / 2;

        if (UseFerrisWheelLayout)
        {
            child.RenderTransform = null;
        }
        else
        {
            child.RenderTransformOrigin = new Point(0.5, 0.5);
            child.RenderTransform = new RotateTransform(angle * 180 / Math.PI);
        }

        child.Arrange(new Rect(x, y, ItemWidth, ItemHeight));
    }
    return finalSize;
  }
} 

这可能是最佳起点，然后您可以开始根据自己的需求进行定制。