This example show how to make an iTunes like "CoverFlow" layout animation in XAML (Silverlight/WPF).

Code samples don't show reflection of elements. You can make it easily with a copy of CoverFlow canvas (with some transformations and opacity). Don't make reflection of each element.. Make reflection of whole "list" to do a correct reflection.

Silverlight Coverflow sample (Download):

This example show how to make an iTunes like "CoverFlow" layout animation in XAML (Silverlight/WPF).

Notes:

·         This was written to WPF, can easily converted to Silverlight!

·         Underline values are width of element

·         You can set animation duration and perspective of elements

·         Perspective value and height of element are related

CoverFlow Layout (C#)

private void SelectCover(int index)

{

    // Setup

    double coverwidth = 100;

    double coverwidth2 = coverwidth / 2;

    double center = (coverflowcontrol.ActualWidth - coverwidth) / 2;

    double perspectivetop = 25;

    double perspectivebotton = 10;

    double scaley = 0.8;

    double scalex = scaley * (1.0 - perspectivetop / coverwidth);

    double offset = coverwidth * 0.8;

    // Layout

    for (int i = 0; i < coverflowcontrol.Children.Count; i++)

    {

        Canvas cover = (Canvas)coverflowcontrol.Children[i];

        if (i < index)

        {

            Canvas.SetZIndex(cover, i);

            Storyboard sb = (Storyboard)cover.Resources[cover.Name + "_anim"];

            ((DoubleAnimation)sb.Children[0]).To = scalex;

            ((DoubleAnimation)sb.Children[1]).To = scaley;

            ((DoubleAnimation)sb.Children[2]).To = -perspectivebotton;

            ((DoubleAnimation)sb.Children[3]).To = center - (offset + ((index - 1) - i) * coverwidth2);

            ((PointAnimation)sb.Children[4]).To = new Point(0, 0);

            ((PointAnimation)sb.Children[5]).To = new Point(coverwidth, perspectivetop);

            sb.Begin(cover);

        }

        else if (i > index)

        {

            int ii = (i - index - 1);

            Canvas.SetZIndex(cover, (coverflowcontrol.Children.Count - 1) - ii);

            Storyboard sb = (Storyboard)cover.Resources[cover.Name + "_anim"];

            ((DoubleAnimation)sb.Children[0]).To = scalex;

            ((DoubleAnimation)sb.Children[1]).To = scaley;

            ((DoubleAnimation)sb.Children[2]).To = perspectivebotton;

            ((DoubleAnimation)sb.Children[3]).To = center + (offset + ii * coverwidth2);

            ((PointAnimation)sb.Children[4]).To = new Point(0, perspectivetop);

            ((PointAnimation)sb.Children[5]).To = new Point(coverwidth, 0);

            sb.Begin(cover);

        }

        else

        {

            Canvas.SetZIndex(cover, coverflowcontrol.Children.Count);

            Storyboard sb = (Storyboard)cover.Resources[cover.Name + "_anim"];

            ((DoubleAnimation)sb.Children[0]).To = 1;

            ((DoubleAnimation)sb.Children[1]).To = 1;

            ((DoubleAnimation)sb.Children[2]).To = 0;

            ((DoubleAnimation)sb.Children[3]).To = center;

            ((PointAnimation)sb.Children[4]).To = new Point(0, 0);

            ((PointAnimation)sb.Children[5]).To = new Point(coverwidth, 0);

            sb.Begin(cover);

        }

    }

}

This example show how to make an iTunes like "CoverFlow" layout animation in XAML (Silverlight/WPF).

Notes:

·         This was written to WPF, can easily convert to Silverlight!

·         Underline values are width of element

·         You can set animation duration and perspective of elements

·         Perspective value and height of element are related

Cover Element (XAML)

<!--CoverFlow Control (List)-->

<Canvas Name="coverflowcontrol">

(...)

<!--CoverFlow Element-->

<Canvas Name="coverXPTO" RenderTransformOrigin="0.5,0.5" Width="100" Height="100" Background="Black">

    <Canvas.Resources>

        <Storyboard x:Key="coverXPTO_anim">

            <DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="coverXPTO" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" />

            <DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="coverXPTO" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" />

            <DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetName="coverXPTO" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" />

            <DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetName="coverXPTO" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(TranslateTransform.X)" />

            <PointAnimation To="0,0" Duration="0:0:0.2" Storyboard.TargetName="coverXPTO" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" />

            <PointAnimation To="100,0" Duration="0:0:0.2" Storyboard.TargetName="coverXPTO" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" />

        </Storyboard>

    </Canvas.Resources>

    <Canvas.RenderTransform>

        <TransformGroup>

            <ScaleTransform ScaleX="1" ScaleY="1" />

            <SkewTransform AngleX="0" AngleY="0" />

            <TranslateTransform X="0" Y="0" />

        </TransformGroup>

    </Canvas.RenderTransform>

    <Canvas.Clip>

        <PathGeometry>

            <PathFigure StartPoint="0,100" IsClosed="True">

                <PathFigure.Segments>

                    <LineSegment Point="0,0"/>

                    <LineSegment Point="100,0"/>

                    <LineSegment Point="100,100"/>

                </PathFigure.Segments>

            </PathFigure>

        </PathGeometry>

    </Canvas.Clip>

    <!--Child Elements (Image, Text, etc...)-->

</Canvas>

(...)

</Canvas>