silverlight3的"伪"3D续--图片横向轮换
2009-10-31 19:48
232 查看
上一篇里,已经知道了“伪3D”是怎么回事,今天结合以前的做的图片广告轮换,又弄了一个图片切换的小东东,不知道以后有什么用,先贴在这里备份:
效果图:
<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
转载请注明来自菩提树下的杨过(/article/4607766.html)
效果图:
<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
转载请注明来自菩提树下的杨过(/article/4607766.html)
相关文章推荐
- silverlight3中的"伪"3D
- javascript 3D图片轮换
- 图片横向移动
- 用javascript实现的仿Flash广告图片轮换效果
- 简单的图片自动轮换
- 简单的图片自动轮换
- 一个图片轮换效果的JS
- Android UI控件之Gallery --拖动、覆盖、循环、3D图片浏览 效果之一
- UIWebView加载本地html控制横向滚动条消失,并且显示html中的本地图片
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- 基于jQuery带标题的图片3D切换焦点图
- jquery 实现简单的图片轮换
- JS 横向图片跑马灯效果
- jquery 图片轮换效果
- JS实现横向图片无缝滚动
- 图片轮换
- jquery 图片幻灯轮换效果
- DD_belatedPNG 与 unitpngfix 两种解决 IE6 中 PNG 图片透明问题方案横向对比
- CSS3之图片3D翻转效果(网页效果--每日一更)
- swiper3d横向滚动多张炫酷切换banner