wpf 幻灯片 – 我的学习园地

XAML


    <Grid>

        <!--  将 Canvas 作为一个 200*200 的视窗，然后在里面放置 StackPanel, StackPanel 中平铺相片，  -->
        <!--  每次点击时，移动 StackPanel 一个相片的位置，实现图片轮播效果。  -->
        <!--  有一个缺点，如果移动相片的过程中，再次点击，会在当前正在移动的位置上再移动一个相片的位置，从而造成相片错位  -->
        <!--  我用过 gird 代替 Canvas, 但是 StackPanel 移动，相片不移动  -->
        <Canvas
            Width="200" Height="200"
            ClipToBounds="True">

            <Canvas.Triggers>

                <!--  每点击一次触发动画，移动一个相片的位置  -->
                <EventTrigger RoutedEvent="MouseLeftButtonUp">
                    <BeginStoryboard>
                        <Storyboard TargetName="ImagesStackPanel">
                            <DoubleAnimation
                            <!-- 每个图片 200， 这样每次移动一个图片 -->
                                By="-200" SpeedRatio="1.5"
                                Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:1">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>

            <StackPanel
                x:Name="ImagesStackPanel"
                Canvas.Left="0"
                HorizontalAlignment="Left" VerticalAlignment="Center"
                Orientation="Horizontal">

                <Image
                    Width="200" Height="200"
                    Source="/Resource/Images/BearAndFox1.jpg" Stretch="Uniform" />
                <Image
                    Width="200" Height="200"
                    Source="/Resource/Images/BearAndFox2.jpg" Stretch="Uniform" />
                <Image
                    Width="200" Height="200"
                    Source="/Resource/Images/BearAndFox3.jpg" Stretch="Uniform" />
                <Image
                    Width="200" Height="200"
                    Source="/Resource/Images/BearAndFox4.jpg" Stretch="Uniform" />
                <Image
                    Width="200" Height="200"
                    Source="/Resource/Images/BearAndFox5.jpg" Stretch="Uniform" />
            </StackPanel>

        </Canvas>

        <TextBlock
            Margin="12" VerticalAlignment="Bottom"
            Opacity=".5" Text="点击相片进行幻灯片播放" />

    </Grid>
XAML

代码
