网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单,在桌面游戏还停留在四态按钮的时候,网页应用都已经入动感时代了,这次,使用Silverlight实现一个小菜单,体验一下动感吧

  当鼠标移入的时候,目标的图标就会放大,形成一个阶梯的效果,要实现这个效果,将需要使用自定义控件和StackPanel的知识。

  现在在一个Silverlight工程中添加新控件,用来制作小圆圈图标,你需要准备一些ICON作为资源,我这里使用了Silverlight 游戏开发小技巧:实现街霸4的选人界面的资源。

  为了方便控制,把UserContorl的大小设定为64x64,在LayoutRoot里面添加一个Image控件,起名为IconImage,这个我们会在自定义属性中控制图片的来源:

  IconCard.cs中代码写成如下:

public partial class IconCard : UserControl
{
  public IconCard()
  {
    // Required to initialize variables
    InitializeComponent();
  }
  private int _iconindex = 1;
  public int IconIndex
  {
    get { return _iconindex; }
    set
    {
      _iconindex = value;
      var uri = new Uri("/AppleMenu;component/Res/" + value + ".png", UriKind.Relative);
      IconImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);
    }
  }
}

  这个可以使用IconIndex来设置具体显示哪一个图片Icon,同时这个属性可以为将来的选定事件做索引。

  当然了,如果你进行了编译,可以在Blend中选定控件,找到扩展属性直接修改:

  现在在MainPage中添加一个StackPanel命名为Group1,并将显示方式修改成为“水平”,里面添加一些刚才做制作的图标控件,

  上面的Group2是另外一个效果,暂时不需要管他,自定义的控件在Asset(资产)的Project(项目)中查找,如果没有,则需要编译一下Crrl+Alt+B

  添加到StackPanel方法也很简单,双击或者拖动都可以,

  好了,现在转入到后台中写代码吧,在Blend或VS中打开MainPage.cs,MainPage构造函数中添加如下代码:

for (int i = 0; i < 9; i++)
{
  var c = Group1.Children[i] as IconCard;
  if (c == null)
    continue;
  c.IconIndex = i;
  c.RenderTransformOrigin = new Point(0.5, 0.5);
  c.RenderTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };
}

  这段代码的意思是,从Group1这个控件中取得一个元素,转换元素成为IconCard控件,如果为null就不是,否则就可以制定一个索引给它,而它的索引属性会帮我们更改,这个操作你可以参照上面的内容在Blend里完成,而后面的代码是指定变换的中心点为整个控件的(50%,50%)位置,并且指定一个放缩变换给它,不要着急我们后面会用上。

  现在给Group1添加一个鼠标的移动事件和鼠标离开事件。

Group1.MouseMove+=new MouseEventHandler(Group1_MouseMove);
Group1.MouseLeave += new MouseEventHandler(Group1_MouseLeave);

  并且在鼠标移动和离开事件写入如下的代码:

void Group1_MouseLeave(object sender, MouseEventArgs e)
{
  for (int i = 0; i < Group1.Children.Count; i++)
  {
    var c = Group1.Children[i] as IconCard;
    if (c == null)
      continue;
    (c.RenderTransform as ScaleTransform).ScaleX = 1;
    (c.RenderTransform as ScaleTransform).ScaleY = 1;
  }
}
void Group1_MouseMove(object sender, MouseEventArgs e)
{
  var pt = e.GetPosition(Group1);
  int offest = (int)pt.X / 64;
  if (offest >= Group1.Children.Count)
    offest = Group1.Children.Count - 1;
  else
    if (offest < 0)
      offest = 0;
    double size = 1.5;
  for (int i = offest; i < Group1.Children.Count; i++)
  {
    var c = Group1.Children[i] as IconCard;
    if (c == null)
      continue;
    (c.RenderTransform as ScaleTransform).ScaleX = size;
    (c.RenderTransform as ScaleTransform).ScaleY = size;
    size -= 0.25;
    if (size <= 1)
      size = 1;
  }
  size = 1.5;
  for (int i = offest; i >=0; i--)
  {
    var c = Group1.Children[i] as IconCard;
    if (c == null)
      continue;
    (c.RenderTransform as ScaleTransform).ScaleX = size;
    (c.RenderTransform as ScaleTransform).ScaleY = size;
    size -= 0.25;
    if (size <= 1)
      size = 1;
  }
}

  这段代码虽然写的有点啰嗦,但是看起来并不困难,通过鼠标的X坐标位置取得偏移点,计算出偏移位置上是第几个控件,然后倒退和前进的方式设置其他控件的大小,这样就能出来一个类似波浪的效果。

  现在已经完毕,在下面的DEMO中,会看到最终效果,以及用类似方式做出来的旋转效果:)

  本篇工程源代码下载地址如下:点击直接下载

一起谈.NET技术,Silverlight 游戏开发小技巧:动感小菜单相关推荐

  1. Silverlight 游戏开发小技巧:角色升级特效

    这次我们将使用Projection完成一些有趣的RPG游戏中常用的特效:升级和传送点特效,我们不需要请特效师制作复杂绚丽的特效,而是只需要他们提供关键的几张图片或者设计样式,如果了您有本领教会他们使用 ...

  2. Silverlight 游戏开发小技巧:动感小菜单2

    Silverlight 游戏开发小技巧:动感小菜单2 动感小菜单其实是想模仿Apple的菜单按钮设计制作,但是画虎不成反类犬,看起来有点别扭,昨天各位园友提了这方面的建议,感觉太硬如果加入动画可能更好 ...

  3. Silverlight 游戏开发小技巧:轨迹跟随效果

    Silverlight 游戏开发小技巧:轨迹跟随效果 我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...

  4. Silverlight 游戏开发小技巧:实现街霸4的选人界面

    Silverlight 游戏开发小技巧:实现街霸4的选人界面 上一篇只是一个引子,用来说明Projection的基本操作,游戏研发都是用这些小的基本功能慢慢组合出来,其实这一篇仍然是Projectio ...

  5. Silverlight 游戏开发小技巧:扇形排列元素

    Silverlight 游戏开发小技巧:扇形排列元素 斗地主风靡了大江南北,在春晚都做免费性推广,棋牌游戏平台几乎将其作为标配,但是牌类游戏总是一成不变的样子--横向排列,如果扇形排列应该更加符合真实 ...

  6. 视频教程-Layabox3D游戏开发入门-微信3D小游戏案例 -微信开发

    Layabox3D游戏开发入门-微信3D小游戏案例 有多年Unity程序开发经验,有策划和美术设计的经验.愿意在csdn这个平台和大家一起分享! 金龙 ¥29.00 立即订阅 扫码下载「CSDN程序员 ...

  7. Silverlight 游戏开发小技巧:星球大战字幕效果

    各位科幻迷可能对星球大战的字幕效果印象深刻,这个电影字幕表现手法曾经风靡大小美国影片,甚至超人影片和电视也曾经用此来做开场和结尾字幕,今天我就将这个效果在blend里面制作技巧告诉大家,下面是星球大战 ...

  8. Silverlight 游戏开发:可重用的拖拽控件

    游戏中有各种各样的拖拽需求,大到窗口,小到图标,在游戏界面操作中,点击和拖拽占据了用户操作的大部分行为,如何做好一个拖拽控件至关重要,做一个可重用的拖拽控件更加重要,我的这些实现方法可能比较另类,但只 ...

  9. 增强现实技术与游戏开发

    你还在为连输排位怒删王者荣耀后的无聊而担心吗?你还在为无法真实体验吃鸡的快乐而深感遗憾吗?你还在为无法得到现实的关爱而精神空虚吗?而AR确实可以能帮助你解决这一类技术. 增强现实技术(Augmente ...

最新文章

  1. orm框架有哪些_java技术哪些是必学的?
  2. python面试-马哥教育官网-专业Linux培训班,Python培训机构
  3. v 3437 powered by ipb_奔驰V系改装订制版 目前最安全的商务车_凤凰网汽车
  4. Nginx(五):动静分离
  5. linux安装gcc运行时库,Linux安装gcc-6.1.0
  6. Redisson 实现分布式锁
  7. Sqlserver常用函数例子说明
  8. 阿里云搭建图片服务器,图片资源服务器搭建
  9. 米家扫地机器人怎么加水_时隔两年半终于更新 贵了500元的小米米家扫地机器人1S值得买吗?...
  10. 【漏扫工具】AWVS12使用介绍
  11. 电子书阅读软件的功能
  12. 机器学习的四种学习方法
  13. 基于WDF的驱动开发
  14. 设计一个小型的物联网应用系统_点赞 | 面向能源物联网的智能传感芯片设计与应用...
  15. pandas中怎么把第一列删掉_pandas删除某一列的方法
  16. 5G产业(一):5G超低延时噱头?
  17. Drag and drop拖放框架
  18. JVM垃圾清理机制详解 ✨ 每日积累
  19. Monorail学习笔记
  20. [喵咪大数据]Hive2搭建和基本操作

热门文章

  1. 雷军旗下金山云冲刺IPO:3年营收74亿,小米系贡献23%,CEO王育林仅持股2.1%
  2. 阿里达摩院青橙奖再颁发!10名大陆青年科学家各获100万,最小获奖者28岁
  3. 深入分析 java 8 编程语言规范:Threads and Locks
  4. 【CSS练习】IT修真院--练习4-移动端界面
  5. javascript:12种JavaScript MVC框架之比较
  6. 在Nginx和Apache服务器配置https
  7. Java 深、浅克隆
  8. php 超长用省略号代替
  9. Qt 使用#define+qDebug()输出调试信息
  10. IE6-IE9兼容性问题列表及解决办法_补遗漏之一:button的type默认值改变为submit了。...