Gustavo 的个人资料mentas日志列表SkyDrive 工具 帮助
9月29日

XAML CoverFlow Element

This example show how to make an iTunes like "CoverFlow" single element in XAML (Silverlight/WPF).
Note that underline values are related to adjust angle and perspective of element.
 

<Canvas

       xmlns="http://schemas.microsoft.com/client/2007"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       Width="640" Height="480"

       x:Name="Page"

       >

  <Canvas.Clip>

    <RectangleGeometry Rect="0,0,640,480" />

  </Canvas.Clip>

  <Canvas.Background>

    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

      <GradientStop Color="#FFB7C1DA" Offset="0"/>

      <GradientStop Color="#FFE2EAFF" Offset="0.5"/>

      <GradientStop Color="#FF394157" Offset="1"/>

    </LinearGradientBrush>

  </Canvas.Background>

  <!--Cover-->

  <Canvas Width="200" Height="200" x:Name="Cover" Canvas.Left="230" Canvas.Top="100" RenderTransformOrigin="0.5,0.5" Clip="M0,0L200,50 200,200 0,200z">

    <Canvas.RenderTransform>

      <TransformGroup>

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

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

      </TransformGroup>

    </Canvas.RenderTransform>

    <Image Source="Assets/sample.jpg" Stretch="Fill" Width="200" Height="200"/>

    <Path Stroke="White" Data="M0,0L200,50 200,200 0,200z" StrokeThickness="15"/>

    <Path Stroke="#FF000000" Data="M0,0L200,50 200,200 0,200z" StrokeThickness="3" Opacity="0.25"/>

  </Canvas>

  <!--Cover Reflection-->

  <Canvas Width="200" Height="200" x:Name="Cover_Reflection" Canvas.Left="230" Canvas.Top="300" RenderTransformOrigin="0.5,0.5" Clip="M0,0L200,50 200,200 0,200z" Opacity="0.5">

    <Canvas.RenderTransform>

      <TransformGroup>

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

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

      </TransformGroup>

    </Canvas.RenderTransform>

    <Canvas.OpacityMask>

      <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

        <GradientStop Color="#00000000" Offset="0.5"/>

        <GradientStop Color="#FF000000" Offset="1"/>

      </LinearGradientBrush>

    </Canvas.OpacityMask>

    <Image Stretch="Fill" Width="200" Height="200" Source="Assets/sample.jpg"/>

    <Path Stroke="White" Data="M0,0L200,50 200,200 0,200z" StrokeThickness="15"/>

  </Canvas>

</Canvas>