上一篇裡,已經知道了“偽3D”是怎麼回事,今天結合以前的做的圖片廣告輪換,又弄了一個圖片切換的小東東,不知道以後有什麼用,先貼在這裡備份:
:
因為silverlight的xml讀取策略等其它原因,沒辦法直接在部落格中貼出來,下面是線上樣本地址:
http://images.24city.com/jimmy/projection/default.htm
思路:
1.將每個圖片以及下面的標題文字,封裝成控制項
1<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" >
7
8 <UserControl.Resources>
9 <Storyboard x:Name="sbShow">
10 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.Opacity)">
11 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.0"/>
12 <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1.0"/>
13 </DoubleAnimationUsingKeyFrames>
14 </Storyboard>
15 </UserControl.Resources>
16
17 <StackPanel Orientation="Vertical">
18 <Image x:Name="img" Width="300" Cursor="Hand" Grid.Row="0">
19 <Image.Projection>
20 <PlaneProjection RotationY="60" RotationZ="4" x:Name="pp"></PlaneProjection>
21 </Image.Projection>
22 </Image>
23
24 <TextBlock x:Name="txtTitle" Text="Image's Title" TextAlignment="Center" TextWrapping="Wrap" Grid.Row="0" Visibility="Collapsed" HorizontalAlignment="Center" Margin="0,5,0,0">
25 </TextBlock>
26 </StackPanel>
27
28</UserControl>
2.動態載入xml資料來源,xml配置如下:
1<?xml version="1.0" encoding="utf-8" ?>
2<data>
3 <item src="img/001.jpg" title="第一張圖片(點擊將跳轉到百度)" link="http://www.baidu.com/" />
4 <item src="img/002.jpg" title="第二張圖片" link="img/002.jpg" />
5 <item src="img/003.jpg" title="第三張圖片(點擊將跳轉到我的部落格)" link="http://yjmyzz.cnblogs.com/" />
6 <item src="img/004.jpg" title="第四張圖片" link="img/004.jpg" />
7 <item src="img/005.jpg" title="第五張圖片" link="img/005.jpg" />
8 <item src="img/006.jpg" title="第六張圖片" link="img/006.jpg" />
9 <item src="img/007.jpg" title="第七張圖片" link="img/007.jpg" />
10 <item src="img/008.jpg" title="第八張圖片" link="img/008.jpg" />
11 <item src="img/009.jpg" title="第九張圖片" link="img/009.jpg" />
12 <config canvasleft="150" smallImgTop="100" smallImgWidth="240" bigImgTop="10" bigImgWidth="500" itemSpace="80" midIndex="4" adjustWidth="70"/>
13</data>
14
3.動態產生1中封裝的控制項,然後動態載入到主介面中的Canvas 中
詳情見原始碼
仍有很多改進之外,比片太多時,橫向可考慮用左右箭頭移動,而且現在這種直接漸層出大圖的效果也很粗糙,如果有朋友抽空改進了,記得通知我一起分享(目前國內的silverlight研究氛圍太淡,需要更多人的關注...)
原始碼:http://files.cnblogs.com/yjmyzz/Projection.rar
轉載請註明來自菩提樹下的楊過(http://www.cnblogs.com/yjmyzz/archive/2009/10/31/1593643.html)