silverlight3的”偽”3D續–圖片橫向輪換

來源:互聯網
上載者:User

上一篇裡,已經知道了“偽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)

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.