SilverLight开发系列第3步：制作鼠标跟随效果，顺便熟悉一些基本概念：群组 和 动画

上一篇：SilverLight开发系列第2步：使用vs2008和Blend 2.5打造Hellow World程序

 

SL 2.0 目前扩展到了5种用来布局的群组(Group):Grid，Canvas，StackPanel，ScrollViewer，Border。Blend 2.5把它们放在一个工具位上。

我自己的理解，简单来说，Grid相当于Html的表格(<table>)，用来进行复杂布局（html的table多行多列、嵌套，在web2.0没来之前，我们一直用的布局方式）；Canvas就是一张单行单列的简单表格；StackPanel相当于单列多行、或者单行多列的表格；ScrollViewer是带滚动条的表格；border是只有边框的布局对象（不带背景的）。良好的习惯，一个页面至少带一个Group对象。当然你一定不放Group对象也行，只是做效果、定位等会麻烦很多。

 

SL2.0 分两种基本动画类别：“From/To/By”动画和关键帧动画（做过flash的朋友对于关键桢动画都有所了解）。这两种类别是纯概念，NET3.5框架没有具体实现他们的基类（可能我没发现）。下表描述了动画类别和命名约定

类别	描述	命名约定
"From/To/By" 动画	在开始值和目标值之间的动画，或者给开始值添加一个偏移值。 要指定开始值，设置动画的 From 属性。 要指定结束值，设置动画的 To 属性。 要指定偏移值，设置动画的 By 属性。 本部分中的例子使用这些动画，因为他们使用起来都是最简单的。	<Type>Animation
关键帧动画	通过使用关键帧对象在指定的一系列值之间进行动画。关键帧动画比 From/To/By 动画更强大，这是因为你可以指定任意数目的目标值，甚至控制它们的内插方法。某些类型只能使用关键帧动画。	<Type>AnimationUsingKeyFrames

 

SL2.0 按变化效果（属性）分，有三种常用动画对象(Animation Object)，位于NET3.5框架的System.Windows.Media.Animation名称空间下。动画对象都是继承自时间线(Timeline对象，借鉴的Flash的概念)。

 下表显示了几张常见的动画类型和他们使用的属性。

属性类型	对应的基本 From/To/By 动画	对应的关键帧动画	使用例子
Color	ColorAnimation	ColorAnimationUsingKeyFrames	改变颜色
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	改变高度和宽度
Point	PointAnimation	PointAnimationUsingKeyFrames	旋转

 

概念可能有点枯燥，这两种基本概念对以后的学习都很重要。如果暂时不理解也无所谓。

 

下面跟我来一起做一个简单的鼠标跟随效果。目前Blend2.5支持PNG,JPG两种常用WEB用图片格式，GIF不支持，其他格式未测试。

新建一个项目，新建一个Images目录，拷贝一个png鼠标图象

然后拖放到工作区中。

 

 

 Canvas背景可以设置。首先选择

 

进入属性面板，看到Background了吧：）自己去玩玩 。

 

 

这些好了之后，选择Page.xaml，点右键 ，选择“Edit in Visual Studio”进入VS2008。

 

给Canvas和图片设置x:Name,并给Canvas添加MouseMove事件。XAML和CS代码分别如下。

 

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="MouseFollow.Page" xmlns:MouseFollow="clr-namespace:MouseFollow">    
    <Canvas x:Name="bg" Height="800" Width="1024" Background="Gray" MouseMove="bg_MouseMove">
        <Image x:Name="myImage" Canvas.Left="180" Canvas.Top="62" Height="26.663" Width="26.663" Source="Images/cursor.png" Stretch="Fill"/>
    </Canvas>
</UserControl>

 注意我删除了UserControl的高度和宽度属性，为的是让他自动适应浏览器高宽。仅仅是让UserControl自动适应，在本例Canvas不会自适应浏览器高宽。

 

namespace MouseFollow
{
    public partial class Page : UserControl
    {
        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
        }

        private void bg_MouseMove(object sender, MouseEventArgs e)
        {
            Point p = e.GetPosition(sender as FrameworkElement);//获取鼠标位置            
            myImage.SetValue(Canvas.LeftProperty, p.X);//设置鼠标图象x坐标
            myImage.SetValue(Canvas.TopProperty, p.Y);//设置鼠标图象y坐标
            bg.Cursor = Cursors.None;//在画布上隐藏鼠标
            myImage.Cursor = Cursors.None;//这里加一个，在图片上也隐藏鼠标
        }
    }
}

cs代码我都写注释了，应该很好懂。只要熟悉了WPF的类库，SL开发不难。

 

最后测试效果看看，成功！

 

 

最后附上源码MouseFollow.rar