专栏首页菩提树下的杨过silverlight3的"伪"3D续--图片横向轮换

silverlight3的"伪"3D续--图片横向轮换

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

效果图:

因为silverlight的xml读取策略等其它原因,没办法直接在博客中贴出来,下面是在线示例地址:

http://images.24city.com/jimmy/projection/default.htm

思路:

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

<UserControl x:Class="ControlTest.model.ImgItem"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d" >
     <UserControl.Resources>
       <Storyboard x:Name="sbShow">
           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.Opacity)">
               <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.0"/>
               <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1.0"/>
           </DoubleAnimationUsingKeyFrames>
       </Storyboard>
   </UserControl.Resources>
    <StackPanel Orientation="Vertical">
       <Image  x:Name="img" Width="300" Cursor="Hand" Grid.Row="0">
           <Image.Projection>
               <PlaneProjection RotationY="60" RotationZ="4" x:Name="pp"></PlaneProjection>
           </Image.Projection>
       </Image>
        <TextBlock x:Name="txtTitle" Text="Image's Title" TextAlignment="Center" TextWrapping="Wrap" Grid.Row="0" Visibility="Collapsed" HorizontalAlignment="Center" Margin="0,5,0,0">
       </TextBlock>
   </StackPanel>
   
</UserContro>

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

<?xml version="1.0" encoding="utf-8" ?>
 <data>
 <item src="img/001.jpg" title="第一张图片(点击将跳转到百度)" link="http://www.baidu.com/" />
 <item src="img/002.jpg" title="第二张图片" link="img/002.jpg" />
 <item src="img/003.jpg" title="第三张图片(点击将跳转到我的博客)" link="http://yjmyzz.cnblogs.com/" />
 <item src="img/004.jpg" title="第四张图片" link="img/004.jpg" />
 <item src="img/005.jpg" title="第五张图片" link="img/005.jpg" />
 <item src="img/006.jpg" title="第六张图片" link="img/006.jpg" />
 <item src="img/007.jpg" title="第七张图片" link="img/007.jpg" />
 <item src="img/008.jpg" title="第八张图片" link="img/008.jpg" />
 <item src="img/009.jpg" title="第九张图片" link="img/009.jpg" />
 <config canvasleft="150" smallImgTop="100" smallImgWidth="240" bigImgTop="10" bigImgWidth="500" itemSpace="80" midIndex="4" adjustWidth="70"/>
</data>

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

详情见源代码

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

源代码:http://files.cnblogs.com/yjmyzz/Projection.rar

转载请注明来自菩提树下的杨过

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript实现数字转大写金额的函数

    <SCRIPT type="text/javascript" Charset="GB2312"> function convertCurrency(curre...

    菩提树下的杨过
  • “AS3.0高级动画编程”学习:第三章等角投影(上)

    什么是等角投影(isometric)? 刚接触这个概念时,我也很茫然,百度+google了N天后,找到了一些文章: [转载]等角(斜45度)游戏与数学 [转载]...

    菩提树下的杨过
  • “AS3.0高级动画编程”学习:第四章 寻路(AStar/A星/A*)算法 (中)

    上一部分提到了节点(Node),代价(Cost),估价公式等基本概念,有了这些知识铺垫 就可以正式开启寻路之旅了! ? 如上图,这是一个5行8列的网格,黄色节点...

    菩提树下的杨过
  • 数据安全实践之数据资产管理

    在企业安全建设中,资产管理是很多安全工作的基础。而数据资产管理可以帮助我们更准确的发现安全风险,执行更有效的控制措施,在数据安全体系化建设中也有着举足轻重的作用...

    FB客服
  • ASCII码表

    ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)是基于拉丁字母的一套电脑...

    bboysoul
  • 史上全网最清晰后缀自动机学习(四)后缀自动机里的DAG结构

    通过【1】、【2】、【3】, 我们学习了后缀自动机这种精巧的数据结构. 它本质上是利用了根据endpos对所有子串的等价类划分这一优美的结构. 【1】我们学习了...

    ACM算法日常
  • mysql 层级结构查询

    描述:最近遇到了一个问题,在mysql中如何完成节点下的所有节点或节点上的所有父节点的查询? 在Oracle中我们知道有一个Hierarchical Queri...

    用户1217611
  • 图解KVM安装CentOS7.6操作系统

    近日服务器安装了CentOS7.6系统,装了KVM,想装Linux虚拟服务器使用。本文图解说明KVM安装CentOS7.6操作系统的过程(介绍图形界面安装方式。...

    技术训练营
  • 【IoT应用创新大赛】非接触式智能存取柜

    谭广健
  • 7617:输出前k大的数

    7617:输出前k大的数 查看 提交 统计 提问 总时间限制:10000ms单个测试点时间限制:1000ms内存限制:65536kB描述 给定一个数组,统计前k...

    attack

扫码关注云+社区

领取腾讯云代金券