wp7 上实现coverflow效果

效果图如上

1.      引入Coverflow控件类

下载地址如下：

 http://download.youkuaiyun.com/detail/sxchao2008/4263806

2.      选择要展示的页面 

 

<UserControl.Resources>

        <DataTemplate x:Key="DataTemplate1">

            <Grid RenderTransformOrigin="0.5,0.5">

                <Grid.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform/>

                        <SkewTransform/>

                        <RotateTransform/>

                        <TranslateTransform Y="100"/>

                    </TransformGroup>

               </Grid.RenderTransform>

                <Grid.RowDefinitions>

                    <RowDefinition/>

                    <RowDefinition Height="5"/>

                    <RowDefinition/>

                </Grid.RowDefinitions>

                <Image Source="{Binding Mode=OneWay}">         

                </Image>

                <Image Source="{Binding Mode=OneWay}" Grid.Row="2" RenderTransformOrigin="0.5,0.5">

                    <Image.OpacityMask>

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

                            <GradientStop Offset="0.5"/>

                            <GradientStop Offset="1" Color="#7F000000"/>

                        </LinearGradientBrush>

                    </Image.OpacityMask>

                    <Image.RenderTransform>

                        <TransformGroup>

                            <ScaleTransform ScaleY="-1"/>

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

                            <RotateTransform Angle="0"/>

                            <TranslateTransform/>

                        </TransformGroup>

                    </Image.RenderTransform>

                </Image>

            </Grid>

        </DataTemplate>

        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">

            <local:CollectionFlowPanel ItemHeight="600" ItemWidth="400" FocusedItemOffset="120" UnfocusedItemOffset="20" ItemVisibility="5" RenderTransformOrigin="0.5,0.5"/>

        </ItemsPanelTemplate>

    </UserControl.Resources>

 

该资源文件也可以定义与App.xaml.cs当中的<Application.Resources>

之间，作为全局资源使用.

 

 

 

 

 

2．展示控件，要想控件拥有数据我们使用 ImageList.ItemSource=集合数据

 

<local:CollectionFlow x:Name="ImageList" Width="480" Height="550" VerticalAlignment="Top" ItemTemplate="{StaticResource DataTemplate1}" 

                           ItemsPanel="{StaticResource ItemsPanelTemplate1}" DoubleTap="ImageList_DoubleTap">

                <toolkit:GestureService.GestureListener>

                        <toolkit:GestureListener  Flick="GestureListener_Flick"/>

                    </toolkit:GestureService.GestureListener>

            </local:CollectionFlow>

 

 

 

List<WriteableBitmap>bitmaps =newList<WriteableBitmap>();

Bitmaps.add()

。。。。

 

ImageList.ItemSource= Bitmaps;