| Gustavo 的个人资料mentas日志列表SkyDrive | 帮助 |
|
9月29日 XAML CoverFlow ElementThis 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> |
|
|