Silverlight打造特效工具栏

移动光标到图片上面，图片将会放大到一个预设值，当鼠标离开图片的时候，又回到原来的大小。
我们通过下面几步来实现：
用Visual Studio 2008创建一个新的SilverLight应用。 
在你的解决方案窗口，在你的SilverLight应用右键，选择 “Add New Item…”。 
选择 "Silverlight Control” 更改名字为 “Toolbar.xaml”。 
将你希望用到你 toolbar 上的每张图片添加到 Silverlight 应用中。 为了添加，右键你的 Silverlight 应用，选择“Add->Existing item…”，选择图片，点OK按钮添加。 下一步是在 Toolbar.xaml 声明每张图片：
下面是工具栏的一张图片的代码段。本文中只设置一张图像。因为其他的图像只是重复代码而已。
每个图像，为了缩放，指定 RenderTransform 和 ScaleTransform。设置 CenterX 和 CenterY 确定 ScaleTransform 缩放中心非常重要。还有，别忘记设置控件的 Width 和 Height 确定尺寸。 我用了5幅图片，656 pixels 宽，大概 84 pixels 高。

<UserControl x:Class="SLDev.Toolbar" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="656" Height="84"> <Canvas> <Image x:Name="HomeImage" Source="images/home.png" MouseEnter="DoMouseEnter" MouseLeave="DoMouseLeave" Width="96" Height="96" Canvas.Left="0" > <Image.RenderTransform> <ScaleTransform x:Name="HomeScale" CenterX="64" CenterY="64"></ScaleTransform> </Image.RenderTransform> </Image> ... aditional images </Canvas></UserControl>

在Toolbar.xaml.cs，为每幅图，添加一个 StoryBoard 设置动画 animation，另外一个标签来表示缩放的方向 (1=up, 0=down, -1=not zooming)。 一个标签表示鼠标是否在图片上：

public partial class Toolbar : UserControl{ private Storyboard _homeTimer; private int _homeDir = -1; private bool _homeMouseOver = false; ...

在 Toolbar 构造函数中，我们给我们的每幅图创建和开始计数器：

public Toolbar(){ InitializeComponent(); _homeTimer = new Storyboard(); _homeTimer.Duration = TimeSpan.FromMilliseconds(50); _homeTimer.Completed += new EventHandler(HomeTimer); _homeTimer.Begin();}

在我们的计数器的回调事件中，我们将根据图像状态调整图像。比如，如果状态时 “1” 并且没有达到我们预定的大小 “1.3” ，我们以步长 “0.05”增加，如果已经达到 “1.3”， 我们的状态是鼠标在图片上，设置 direction = “0”。否则，我们开始以步长 “0.05” 来缩小图像，直到变回原来的 “1.0”。调整这些数字到你觉得可以的范围，来定制你自己的工具栏。

private int AdjustScale(int direction, ScaleTransform scale, bool mouseOver, Storyboard timer){ if(direction == 1) { if (scale.ScaleX < 1.3) { scale.ScaleX += 0.05; scale.ScaleY += 0.05; } else if (false == mouseOver) { direction = 0; } } else if(scale.ScaleX > 1.0) { scale.ScaleX -= 0.05; scale.ScaleY -= 0.05; } timer.Begin(); return direction;} private void HomeTimer(object sender, EventArgs e){ _homeDir = AdjustScale(_homeDir, HomeScale, _homeMouseOver, _homeTimer);}

最后，我们需要处理鼠标离开和进入图像的 DoMouseLeave 和 DoMouseEnter 事件。如果离开图像，我们设置 _homeMouseOver = false。如果我们进入图像，我们设置 true ，原始大小比例为 “1”。

private void DoMouseLeave(object sender, MouseEventArgs e){ if (sender == HomeImage) _homeMouseOver = false;} private void DoMouseEnter(object sender, MouseEventArgs e){ if (sender == HomeImage) { _homeMouseOver = true; _homeDir = 1; }}

这样，你就有个超酷的工具条了。最后看看效果！