CODEWITHSUNDEEP
c#xamllistviewuwppanel
Thomas
Thomas

Reputation: 4297

UWP: Show ListView Items arranged in a circle

I have a ListView with <12 items bound to it. I would like to arrange these items in a circle while still being able to use the ListView features (selectedItem etc.). Scrolling is not required though.

I found this blog post doing a similar thing in WPF, could this be rewritten to be used in UWP?

Upvotes: 2

Views: 469

Answers (1)

Justin XL
Justin XL

Reputation: 39006

The link you provided should work in UWP and it's the right approach to do so. You just need to update the namespaces as such:

using System;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace SomeNamespace
{
    public class CircularPanel : Panel
    {
        protected override Size MeasureOverride(Size availableSize)
        {
            foreach (UIElement child in Children)
                child.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));

            return base.MeasureOverride(availableSize);
        }

        // Arrange stuff in a circle
        protected override Size ArrangeOverride(Size finalSize)
        {
            if (Children.Count > 0)
            {
                // Center & radius of panel
                Point center = new Point(finalSize.Width / 2, finalSize.Height / 2);
                double radius = Math.Min(finalSize.Width, finalSize.Height) / 2.0;
                radius *= 0.8;   // To avoid hitting edges

                // # radians between children
                double angleIncrRadians = 2.0 * Math.PI / Children.Count;

                double angleInRadians = 0.0;

                foreach (UIElement child in Children)
                {
                    Point childPosition = new Point(
                        radius * Math.Cos(angleInRadians) + center.X,
                        radius * Math.Sin(angleInRadians) + center.Y);

                    child.Arrange(new Rect(childPosition, child.DesiredSize));

                    angleInRadians += angleIncrRadians;
                }
            }

            return finalSize;
        }
    }
}

Upvotes: 1

Related Questions