wp7上實現coverflow控件

 

 

效果圖如上

 

 

 

 

 

1.      引入Coverflow控件類

 

下載地址如下：

 

 http://download.csdn.net/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;