zoukankan      html  css  js  c++  java
  • 一个Silverlight图片切换效果

    首先来看这个效果:

     

    下面一步步实现这个效果

     

    l  打开Blend 4,新建一个 Silverlight 4.0 项目 SwitchImage

    l  新建一个数据源,添加一个Image字段为Image类型,并且自动添加好了图片

    image

    l  新建两个ListBox控件,DocklayoutRoot

    image

    l  把数据源分别拖拽到两个ListBox上面,Blend会自动生成相应的ItemTemplate。我们在Resources面板里把两个ItemTemplate分别改名为:ThumbnailItemTemplatePickingItemTemplate

    image

    l  ThumbnailSelectedIndex双向绑定到PickingSelectedIndex

    l  下一步就开始编辑两个ListBox的相应模板,首先对Picking进行编辑

    n  新建一个ItemsPanelTemplate,把生成的StackPanel的布局进行如下修改

    image

    n  ItemTemplate Image替换成Ellipse。大小为15,填充颜色为蓝色

    n复制一个新的PickingListBoxItemStyle,把其中的fillColorfillColor2FocusVisualElement删除,只留下一个contentPresenter

    n  修改默认的VSM,把SelectionStatesSelected修改为ScaleX=1.5ScaleY=1.5

    n  增加两个Transition

    image

    n  ItemTemplate增加一个States,其中MouseEnterellipse的填充颜色修改为红色

    image

    n  拖拽两个GoToStateActionellipse,分别设置好MouseEnterMouseLeave

    image image

    n  到这一步就完成了Picking的设计

    l  下一步设计Thumbnail

    n  和前面一样先修改ItemsPanelTemplate

    n  这一步制作水面投影的效果,编辑ThumbnailItemTemplate

    n  复制一个Image,依次编辑第二个ImageOpacityMaskFlip Y Effect,具体值如图所示

    imageimageimageimage

    nPicking一样,删除多余控件,修改默认VSM,把SelectionStatesSelected修改为ScaleX=2.5ScaleY=2.5ZIndex=65535

    l  到这一步就完成了基本的设计,然后对样式做一些细节性调整即可

     

    点击这里下载完整代码

  • 相关阅读:
    35 点击全图后发现地图“不见了”
    34 文件地理数据库(GDB)变文件夹了怎么办
    33 ArcToolBox学习系列之数据管理工具箱——投影与变换(Projections and Transformations)未完待续……
    32 ArcToolBox学习系列之数据管理工具箱——属性域(Domains)的两种创建及使用方式
    30 ArcGIS 许可管理器常见问题(持续更新中……)
    算法竞赛入门经典 第三章 简要题解
    SCOI2003 字符串折叠 & NEERC2002 Folding 题解
    Vjios 1617 超级教主
    Codeforces Round #652 题解
    Codeforces Round #655 题解
  • 原文地址:https://www.cnblogs.com/Aimeast/p/1983640.html
Copyright © 2011-2022 走看看