silverlight3的"僞"3D續--圖檔橫向輪換

效果圖：

因為silverlight的xml讀取政策等其它原因，沒辦法直接在部落格中貼出來，下面是線上示例位址：

<a href="http://images.24city.com/jimmy/projection/default.htm" target="_blank">http://images.24city.com/jimmy/projection/default.htm</a>

思路：

1.将每個圖檔以及下面的标題文字，封裝成控件

 1

&lt;UserControl x:Class="ControlTest.model.ImgItem"

 2

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

 3

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

 4

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

 5

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 6

    mc:Ignorable="d" &gt;

 7

 8

    &lt;UserControl.Resources&gt;

 9

        &lt;Storyboard x:Name="sbShow"&gt;

10

            &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;

11

                &lt;EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.0"/&gt;

12

                &lt;EasingDoubleKeyFrame KeyTime="00:00:01" Value="1.0"/&gt;

13

            &lt;/DoubleAnimationUsingKeyFrames&gt;

14

        &lt;/Storyboard&gt;

15

    &lt;/UserControl.Resources&gt;

16

17

    &lt;StackPanel Orientation="Vertical"&gt;

18

        &lt;Image  x:Name="img" Width="300" Cursor="Hand" Grid.Row="0"&gt;

19

            &lt;Image.Projection&gt;

20

                &lt;PlaneProjection RotationY="60" RotationZ="4" x:Name="pp"&gt;&lt;/PlaneProjection&gt;

21

            &lt;/Image.Projection&gt;

22

        &lt;/Image&gt;

23

24

        &lt;TextBlock x:Name="txtTitle" Text="Image's Title" TextAlignment="Center" TextWrapping="Wrap" Grid.Row="0" Visibility="Collapsed" HorizontalAlignment="Center" Margin="0,5,0,0"&gt;

25

        &lt;/TextBlock&gt;

26

    &lt;/StackPanel&gt;

27

28

&lt;/UserControl&gt;

2.動态加載xml資料源,xml配置如下:

&lt;?xml version="1.0" encoding="utf-8" ?&gt;

&lt;data&gt;

  &lt;item src="img/001.jpg" title="第一張圖檔(點選将跳轉到百度)" link="http://www.baidu.com/" /&gt;

  &lt;item src="img/002.jpg" title="第二張圖檔" link="img/002.jpg" /&gt;

  &lt;item src="img/003.jpg" title="第三張圖檔(點選将跳轉到我的部落格)" link="http://yjmyzz.cnblogs.com/" /&gt;

  &lt;item src="img/004.jpg" title="第四張圖檔" link="img/004.jpg" /&gt;

  &lt;item src="img/005.jpg" title="第五張圖檔" link="img/005.jpg" /&gt;

  &lt;item src="img/006.jpg" title="第六張圖檔" link="img/006.jpg" /&gt;

  &lt;item src="img/007.jpg" title="第七張圖檔" link="img/007.jpg" /&gt;

  &lt;item src="img/008.jpg" title="第八張圖檔" link="img/008.jpg" /&gt;

  &lt;item src="img/009.jpg" title="第九張圖檔" link="img/009.jpg" /&gt;

  &lt;config canvasleft="150" smallImgTop="100" smallImgWidth="240" bigImgTop="10" bigImgWidth="500" itemSpace="80" midIndex="4" adjustWidth="70"/&gt;

&lt;/data&gt;

3.動态生成1中封裝的控件，然後動态加載到主界面中的Canvas 中

詳情見源代碼

仍有很多改進之外，比如圖檔太多時，橫向可考慮用左右箭頭移動，而且現在這種直接漸變出大圖的效果也很粗糙，如果有朋友抽空改進了，記得通知我一起分享(目前國内的silverlight研究氛圍太淡，需要更多人的關注...)