Windows Phone开发手记－WinRT下自定义圆形ItemsControl

//CircleItemsPanel.cs
using System;
using Windows.Foundation;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml;

namespace CustomItemsPanel
{
    public class CircleItemsPanel :Panel
    {
        public double Radius {
            get {
                return (Double)GetValue(RadiusProperty);
            }
            set {
                SetValue(RadiusProperty, value);
            } }
        public static readonly DependencyProperty RadiusProperty = DependencyProperty.Register(
            "Radius", typeof(Double),typeof(CircleItemsPanel),new PropertyMetadata(100d,RadiusCallBack));

        private static void RadiusCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var radialPanel = (CircleItemsPanel)d;
            radialPanel.InvalidateArrange();
        }

        protected override Size MeasureOverride(Size availableSize)
        {
            var s= base.MeasureOverride(availableSize);
            foreach (var element in this.Children)
            {
                element.Measure(availableSize);
            }
            return s;
        }
        protected override Size ArrangeOverride(Size finalSize)
        {
            this.Clip = new RectangleGeometry {Rect=new Rect (0,0,finalSize.Width,finalSize.Height) };
            var i = 0;
            var degreesOffset = 360.0 / this.Children.Count;
            foreach(var elemet in this.Children)
            {
                var centerX = elemet.DesiredSize.Width / 2.0;
                var centerY = elemet.DesiredSize.Height / 2.0;
                var degreesAngle = degreesOffset * i++;
                var transform = new RotateTransform { CenterX=centerX,CenterY=centerY,Angle=degreesAngle };
                elemet.RenderTransform = transform;
                var radianAngle = (Math.PI * degreesAngle) / 180.0;
                var x = this.Radius * Math.Cos(radianAngle);
                var y = this.Radius * Math.Sin(radianAngle);
                var rectX = x + finalSize.Width / 2 - centerX;
                var rectY = y + finalSize.Height / 2 - centerY;
                elemet.Arrange(new Rect(rectX,rectY,elemet.DesiredSize.Width,elemet.DesiredSize.Height));
            } 
            return finalSize;
        }
    }
}

<Page
    x:Class="CustomItemsPsnnel.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomItemsPsnnel"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    DataContext="{Binding Path=Main, Source={StaticResource Locator}}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TextBlock HorizontalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}" Text="{Binding Title}"/>
        <GridView HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <local:CircleItemsPanel Radius="100" Height="600" VerticalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.Items>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
                <Image Width="50" Source="iTunesArtwork.png"/>
            </GridView.Items>
        </GridView>
    </Grid>
</Page>