[Silverlight]打造具有放大缩小效果的图片导航

ok,先看效果

我们可以看到，当鼠标指向Logo的时候该Logo产生了平滑的放大效果，当鼠标移出的时候又变回原样。另外我们可以通过点击该Logo跳转至其他页面。

这个页面的Xaml十分简单

<Canvas x:Name="LayoutRoot">
    <Image Cursor="Hand" MouseLeftButtonDown="imgLogo1_MouseLeftButtonDown" MouseEnter="imgLogo1_MouseEnter" MouseLeave="imgLogo1_MouseLeave" Canvas.ZIndex="1" x:Name="imgLogo1" Canvas.Left="100" Canvas.Top="60" Source="Image/logo1.jpg">
        <Image.RenderTransform>
            <ScaleTransform x:Name="LogoScale" CenterX="90" CenterY="96">
            
            </ScaleTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

可以看到，我们为Image对象添加了MouseEnter、MouseLeave事件用来根据鼠标的行为控制其动画效果。而使用MouseLeftButtonDown事件处理点击Logo的情况。在这个例子里我们并没有使用HyperLinkButton，一方面因为HyperLinkButton会在控件四周产生边框，我还未找到相应处理办法；另一方面我们也要借此说明一下如何用代码的方式新开一个窗口，我在下面的c#代码中将会提及。

我们使用ScaleTransform来为图片的RenderTransform添加效果。ScaleTransform可以方便的在二维 x-y 坐标系内缩放对象。另外注意CenterX和CenterY属性，在这个例子中它们大概是宽度和高度的2/3。

好的，一切准备完毕，赶快进入后台代码开始code…

        private System.Windows.Threading.DispatcherTimer timer;
        private ScaleDirection scaleDirection ;
        public Page()
        {
            InitializeComponent();
            timer = new System.Windows.Threading.DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(50);
            timer.Tick += new EventHandler(timer_Tick);
        }

        void timer_Tick(object sender, EventArgs e)
        {
            AdjustScale(scaleDirection, LogoScale);
        }

        void AdjustScale(ScaleDirection scaleDirection, ScaleTransform scale)
        {
            if (scaleDirection == ScaleDirection.Down)
            {
                if (scale.ScaleX < 1.3)
                {
                    scale.ScaleX += 0.05; scale.ScaleY += 0.05;
                }
                else
                    timer.Stop();
            }
            else
            {
                if (scale.ScaleX > 1.0)
                {
                    scale.ScaleX -= 0.05;
                    scale.ScaleY -= 0.05;
                }
                else
                    timer.Stop();
            }
        }

        enum ScaleDirection
        {
            Up,
            Down
        }

        private void imgLogo1_MouseEnter(object sender, MouseEventArgs e)
        {
            scaleDirection = ScaleDirection.Down;
            timer.Start();
        }

        private void imgLogo1_MouseLeave(object sender, MouseEventArgs e)
        {
            scaleDirection = ScaleDirection.Up;
            timer.Start();
        }

        private void imgLogo1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            System.Windows.Browser.HtmlPopupWindowOptions option = new System.Windows.Browser.HtmlPopupWindowOptions();
            System.Windows.Browser.HtmlPage.PopupWindow(new Uri("http://www.51mvc.com"), "51mvc", option);
        }

代码不难理解，我们定义了一个枚举来标记是放大还是缩小。同过DispatcherTimer来控制动画的间隔及行为。

这里说一下上面提到的打开新窗口的方式。就是利用System.Windows.Browser.HtmlPage.PopuWindow这个静态方法，它的构造函数需要三个参数，前面两个就不说了，最后的System.Windows.Browser.HtmlPopuWindowOptions类型的参数可以控制新打开窗口的大小，位置，是否可以改变大小，是否带有边框标题等等属性。整个这个方法相当于js中的window.open。这里做一个归纳：

名称	说明
Directory	确定在弹出窗口中是否显示 Internet Explorer 链接工具栏或 Firefox 个人/书签工具栏。
Height	设置弹出窗口的高度。
Left	设置弹出窗口左边缘的位置。
Location	设置弹出窗口的 URL。
Menubar	控制菜单栏在弹出窗口中的可见性。
Resizeable	确定是否可调整弹出窗口的大小。
Scrollbars	控制滚动条在弹出窗口中的可见性。
Status	控制状态栏在弹出窗口中的可见性。
Toolbar	控制工具栏在弹出窗口中的可见性。
Top	设置弹出窗口上边缘的位置。
Width	设置弹出窗口的宽度。