Silverlight实现类似Mac Dock特效

首先，看一下最终的效果图。我采用的开发环境是Visual Studio 2010。

其实，这里要点，主要有两个，一个是计算鼠标位置到每个图像子元素中心位置的函数，另一个是计算放大倍数，放大倍数是鼠标位置到到每个图像子元素中心位置的距离的，具体如下：

下面是计算标位置到每个图像子元素中心位置的距离二次函数

/// <summary>
/// 计算鼠标位置到SilverDockItem元素的中心距离
/// </summary>
/// <param name="mouseArgs">The <see cref="MouseButtonEventArgs"/> instance containing the event data.</param>
/// <param name="target">The target.</param>
/// <returns></returns>
private double CalculateDistance(MouseEventArgs mouseArgs, SilverDockItem target)
{
	double mouseX = mouseArgs.GetPosition(target).X - (target.ActualWidth / 2);
	double mouseY = mouseArgs.GetPosition(target).Y - (target.ActualHeight / 2);
	double distance = Math.Sqrt(mouseX * mouseX + mouseY * mouseY);
	return distance;
}

下面是计算放大的倍数

/// <summary>
/// 计算SilverDockItem元素的放大倍数
/// </summary>
/// <param name="maxZoom">放大倍数上限，即最大的放大倍数</param>
/// <param name="maxDistance">感知长度，超过这个距离后放大倍数保持在1</param>
/// <param name="distanceToItem">鼠标到目标Item中心的距离</param>
/// <returns></returns>
private double Zoom(double maxZoom, double maxDistance, double distanceToItem)
{
	//计算放大的倍数，这里放大倍数和鼠标到SilverDockItem元素的中心距离为二次函数关系
	double zoom = (maxZoom * (distanceToItem - maxDistance) * (distanceToItem - maxDistance)) / (maxDistance * maxDistance + 1);

	//如果计算放大倍数小于1，返回1，即不进行放大也不缩小
	//也就是说鼠标到子元素中心距离大于一定值时就不进行缩放了
	if (zoom < 1)
	{
		return 1;
	}
	else
	{
		return zoom;
	}
}

具体开发过程如下：

1. 新建图像子元素SilverDockItem，代码如下：

<UserControl x:Class="SilverControl.SilverDockItem"
    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" Height="60" Width="60" SizeChanged="UserControl_SizeChanged">
    
    <Grid x:Name="LayoutRoot">
        <Rectangle d:DesignHeight="60" d:DesignWidth="60"  MouseMove="Rectangle_MouseMove" MouseLeave="Rectangle_MouseLeave">
            <Rectangle.Fill>
                <ImageBrush x:Name="ContentImage" Stretch="Fill" />
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</UserControl>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;

namespace SilverControl
{
    public partial class SilverDockItem : UserControl
    {
        public static readonly double ORIGNSIZE = 60;
        
        //宿主容器，即容纳SilverDock元素的父控件
        internal SilverDock Dock { get; set; }

        public SilverDockItem(String uri)
        {
            InitializeComponent();
            //设置图像的ImageSource依赖属性，即要显示的图像元素
            //下面两句是同样的效果
            //ContentImage.SetValue(ImageBrush.ImageSourceProperty, new BitmapImage(new Uri(uri, UriKind.Relative)));
            ContentImage.ImageSource = new BitmapImage(new Uri(uri, UriKind.Relative));
        }

        /// <summary>
        /// 计算SilverDockItem元素的放大倍数
        /// </summary>
        /// <param name="maxZoom">放大倍数上限，即最大的放大倍数</param>
        /// <param name="maxDistance">感知长度，超过这个距离后放大倍数保持在1</param>
        /// <param name="distanceToItem">鼠标到目标Item中心的距离</param>
        /// <returns></returns>
        private double Zoom(double maxZoom, double maxDistance, double distanceToItem)
        {
            //计算放大的倍数，这里放大倍数和鼠标到SilverDockItem元素的中心距离为二次函数关系
            double zoom = (maxZoom * (distanceToItem - maxDistance) * (distanceToItem - maxDistance)) / (maxDistance * maxDistance + 1);

            //如果计算放大倍数小于1，返回1，即不进行放大也不缩小
            //也就是说鼠标到子元素中心距离大于一定值时就不进行缩放了
            if (zoom < 1)
            {
                return 1;
            }
            else
            {
                return zoom;
            }
        }

        /// <summary>
        /// 计算鼠标位置到SilverDockItem元素的中心距离
        /// </summary>
        /// <param name="mouseArgs">The <see cref="MouseButtonEventArgs"/> instance containing the event data.</param>
        /// <param name="target">The target.</param>
        /// <returns></returns>
        private double CalculateDistance(MouseEventArgs mouseArgs, SilverDockItem target)
        {
            double mouseX = mouseArgs.GetPosition(target).X - (target.ActualWidth / 2);
            double mouseY = mouseArgs.GetPosition(target).Y - (target.ActualHeight / 2);
            double distance = Math.Sqrt(mouseX * mouseX + mouseY * mouseY);
            return distance;
        }

        /// <summary>
        /// Handles the MouseMove event of the Rectangle control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
        private void Rectangle_MouseMove(object sender, MouseEventArgs e)
        {
            foreach (var item in Dock.items)
            {
                double distance = CalculateDistance(e, item);
                double zoom = Zoom(Dock.MaxZoom, Dock.MaxDistance, distance);
                item.Width = zoom * Dock.Size;
                item.Height = zoom * Dock.Size;
            }
        }

        /// <summary>
        /// Handles the MouseLeave event of the Rectangle control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
        private void Rectangle_MouseLeave(object sender, MouseEventArgs e)
        {
            foreach (var item in Dock.items)
            {
                item.Width = ORIGNSIZE;
                item.Height = ORIGNSIZE;
            }
        }

        /// <summary>
        /// Handles the SizeChanged event of the UserControl control.
        /// 当每个SilverDockItem元素的大小改变时，动态修改其承载元素StackPanel的长度，可以可以确保StackPanel始终居中显示
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="SizeChangedEventArgs"/> instance containing the event data.</param>
        private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            double totalWidth = 0;
            foreach (var item in Dock.items)
            {
                totalWidth += item.Width;
            }
            Dock.ContentPanel.Width = totalWidth;
        }
    }
}

2.新建承载的StackPanel，代码如下：

<UserControl x:Class="SilverControl.SilverDock"
    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" Height="100" Width="900" BorderBrush="Black" BorderThickness="1">
    
    <Grid x:Name="LayoutRoot">
    	<Rectangle Fill="#55000000" Stroke="Black" RadiusX="9" RadiusY="9">
    		<Rectangle.Effect>
    			<DropShadowEffect/>
    		</Rectangle.Effect>
    	</Rectangle>
        <StackPanel x:Name="ContentPanel" Orientation="Horizontal" />
    </Grid>
</UserControl>

using System.Collections.Generic;
using System.Windows.Controls;

namespace SilverControl
{
    public partial class SilverDock : UserControl
    {
        internal List<SilverDockItem> items = new List<SilverDockItem>();

        public double Size { get; set; } //SilverDockItem子元素的尺寸，这里SilverDockItem长宽相等
        public double MaxDistance { get; set; } //感知长度，超过这个距离后放大倍数保持在1
        public double MaxZoom { get; set; } //放大倍数上限，即最大的放大倍数

        public SilverDock()
        {
            InitializeComponent();
        }


        /// <summary>
        /// 给SilverDock工具条动态添加子元素item
        /// </summary>
        /// <param name="item">SilverDockItem子元素</param>
        public void AddItem(SilverDockItem item)
        {
            item.Dock = this;
            item.Height = Size;
            item.Width = Size;
            items.Add(item);
            ContentPanel.Children.Add(item);
        }

        /// <summary>
        /// 从SilverDock工具条中移除SilverDockItem子元素
        /// </summary>
        /// <param name="item">SilverDockItem子元素</param>
        public void RemoveItem(SilverDockItem item)
        {
            items.Remove(item);
            ContentPanel.Children.Remove(item);
        }
    }
}

3.主页面MainPage，代码如下：

<UserControl x:Class="SilverControl.MainPage"
    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"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

using System.Windows.Controls;


namespace SilverControl
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();


            SilverDock silverDock = new SilverDock();
            silverDock.MaxZoom = 1.5;
            silverDock.MaxDistance = 600;
            silverDock.Size = 60;
            silverDock.Size = 60;
            LayoutRoot.Children.Add(silverDock);


            for (int i = 0; i <= 13; i++ )
            {
                SilverDockItem item = new SilverDockItem("images/" + i + ".png");
                silverDock.AddItem(item);
            }
        }
    }
}

有需要源码的同学可以从我的网盘下载。源码下载地址如下：http://yunpan.cn/QI7KHpACMfiXa