上一篇里,已经知道了“伪3D”是怎么回事,今天结合以前的做的图片广告轮换,又弄了一个图片切换的小东东,不知道以后有什么用,先贴在这里备份:

效果图:

silverlight3的_xml

因为silverlight的xml读取策略等其它原因,没办法直接在博客中贴出来 

思路:

1.将每个图片以及下面的标题文字,封装成控件


 1silverlight3的_图片轮换_02<UserControl x:Class="ControlTest.model.ImgItem"

 2silverlight3的_图片轮换_02    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3silverlight3的_图片轮换_02    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4silverlight3的_图片轮换_02    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

 5silverlight3的_图片轮换_02    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 6silverlight3的_图片轮换_02    mc:Ignorable="d" >

 7silverlight3的_图片轮换_02

 8silverlight3的_图片轮换_02    <UserControl.Resources>

 9silverlight3的_图片轮换_02        <Storyboard x:Name="sbShow">

10silverlight3的_图片轮换_02            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.Opacity)">

11silverlight3的_图片轮换_02                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.0"/>

12silverlight3的_图片轮换_02                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1.0"/>

13silverlight3的_图片轮换_02            </DoubleAnimationUsingKeyFrames>

14silverlight3的_图片轮换_02        </Storyboard>

15silverlight3的_图片轮换_02    </UserControl.Resources>

16silverlight3的_图片轮换_02

17silverlight3的_图片轮换_02    <StackPanel Orientation="Vertical">

18silverlight3的_图片轮换_02        <Image  x:Name="img" Width="300" Cursor="Hand" Grid.Row="0">

19silverlight3的_图片轮换_02            <Image.Projection>

20silverlight3的_图片轮换_02                <PlaneProjection RotationY="60" RotationZ="4" x:Name="pp"></PlaneProjection>

21silverlight3的_图片轮换_02            </Image.Projection>

22silverlight3的_图片轮换_02        </Image>

23silverlight3的_图片轮换_02

24silverlight3的_图片轮换_02        <TextBlock x:Name="txtTitle" Text="Image's Title" TextAlignment="Center" TextWrapping="Wrap" Grid.Row="0" Visibility="Collapsed" HorizontalAlignment="Center" Margin="0,5,0,0">

25silverlight3的_图片轮换_02        </TextBlock>

26silverlight3的_图片轮换_02    </StackPanel>

27silverlight3的_图片轮换_02    

28silverlight3的_图片轮换_02</UserControl>


 

2.动态加载xml数据源,xml配置如下:


 1silverlight3的_图片轮换_02<?xml version="1.0" encoding="utf-8" ?>

 2silverlight3的_图片轮换_02<data>

 3silverlight3的_图片轮换_02  <item src="img/001.jpg" title="第一张图片(点击将跳转到百度)" link="http://www.baidu.com/" />

 4silverlight3的_图片轮换_02  <item src="img/002.jpg" title="第二张图片" link="img/002.jpg" />

 5silverlight3的_图片轮换_02  <item src="img/003.jpg" title="第三张图片(点击将跳转到我的博客)" link="javascript:void(0)/" />

 6silverlight3的_图片轮换_02  <item src="img/004.jpg" title="第四张图片" link="img/004.jpg" />

 7silverlight3的_图片轮换_02  <item src="img/005.jpg" title="第五张图片" link="img/005.jpg" />

 8silverlight3的_图片轮换_02  <item src="img/006.jpg" title="第六张图片" link="img/006.jpg" />

 9silverlight3的_图片轮换_02  <item src="img/007.jpg" title="第七张图片" link="img/007.jpg" />

10silverlight3的_图片轮换_02  <item src="img/008.jpg" title="第八张图片" link="img/008.jpg" />

11silverlight3的_图片轮换_02  <item src="img/009.jpg" title="第九张图片" link="img/009.jpg" />

12silverlight3的_图片轮换_02  <config canvasleft="150" smallImgTop="100" smallImgWidth="240" bigImgTop="10" bigImgWidth="500" itemSpace="80" midIndex="4" adjustWidth="70"/>

13silverlight3的_图片轮换_02</data>

14silverlight3的_图片轮换_02


 

3.动态生成1中封装的控件,然后动态加载到主界面中的Canvas 中

详情见源代码

仍有很多改进之外,比如图片太多时,横向可考虑用左右箭头移动,而且现在这种直接渐变出大图的效果也很粗糙,如果有朋友抽空改进了,记得通知我一起分享(目前国内的silverlight研究氛围太淡,需要更多人的关注...)

 

作者:菩提树下的杨过