silverlight图片局部放大效果

本文参考：菩提树下的杨过的silverlight图片局部放大效果。

效果图：

前台代码：

<UserControl x:Class="SilverlightApplication1.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"
    Width="630" Height="270">

    <Canvas x:Name="LayoutRoot" Background="#FFB8BEBA" Loaded="LayoutRoot_Loaded">

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded" >
                <BeginStoryboard>
                    <Storyboard x:Name="sb" RepeatBehavior="2x">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                            <EasingDoubleKeyFrame KeyTime="00:00:01" Value="6">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <BackEase EasingMode="EaseOut"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                            <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <BackEase EasingMode="EaseInOut" Amplitude="4"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                            <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-3">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <BackEase EasingMode="EaseOut"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>

        <Rectangle Stroke="Black" Width="200" Height="125" Canvas.Left="10" Canvas.Top="10">
            <Rectangle.Fill>
                <ImageBrush ImageSource="img/1.jpg" Stretch="Uniform"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" Height="50" Width="80" Fill="#99FFFFFF" StrokeThickness="0" Cursor="Hand" Canvas.Left="70" Canvas.Top="40" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" x:Name="rect">

        </Rectangle>
        <TextBlock x:Name="txtName" Canvas.Left="63" Canvas.Top="144" Text="图片局部放大效果" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
			<TextBlock.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform Angle="-719.885"/>
					<TranslateTransform X="1" Y="1"/>
				</TransformGroup>
			</TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Canvas.Left="10" Canvas.Top="244" Text="by 菩提树下的杨过" TextWrapping="Wrap"/>
        <TextBlock x:Name="txtResult" Canvas.Left="10" Canvas.Top="182" TextWrapping="Wrap" Width="200" TextAlignment="Center" Height="38"/>

        <Canvas Width="400" Height="250" Canvas.Top="10" Canvas.Left="220" x:Name="cBig">
            <Canvas.Clip>
                <RectangleGeometry Rect="0,0,400,250">
                </RectangleGeometry>
            </Canvas.Clip>
            <Image x:Name="img" Height="625" Width="1000" Canvas.Left="0" Canvas.Top="0" Source="img/1.jpg" Stretch="None">

            </Image>
        </Canvas>

        <Rectangle Width="400" Height="250" Stroke="Black" Canvas.Top="10" Canvas.Left="220"/>
    </Canvas>
</UserControl>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Diagnostics;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        bool trackingMouseMove = false;
        Point mousePosition;

        public MainPage()
        {
            InitializeComponent();
        }
        
        private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            Adjust();
        }
        
        private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;
            mousePosition = e.GetPosition(element);
            trackingMouseMove = true;

            if (null != element)
            {
                element.CaptureMouse();
                element.Cursor = Cursors.Hand;
            }

            Adjust();
            Debug();
            sb.Begin();//标题动画，可去掉

        }

        private void Rectangle_MouseMove(object sender, MouseEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;

            if (trackingMouseMove)
            {
                double deltaV = e.GetPosition(element).Y - mousePosition.Y;
                double deltaH = e.GetPosition(element).X - mousePosition.X;
                double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);
                double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);

                if (newLeft <= 10)
                {
                    newLeft = 10;
                }
                if (newLeft >= 130)
                {
                    newLeft = 130;
                }

                if (newTop <= 10) { newTop = 10; }
                if (newTop >= 85) { newTop = 85; }
                element.SetValue(Canvas.TopProperty, newTop);
                element.SetValue(Canvas.LeftProperty, newLeft);
                mousePosition = e.GetPosition(element);

                Adjust();
                if (mousePosition.X <= 0 || mousePosition.Y <= 0) { return; }
                Debug();
            }

        }

        private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;
            trackingMouseMove = false;
            element.ReleaseMouseCapture();
            mousePosition.X = mousePosition.Y = 0;
            element.Cursor = null;
        }

        /// <summary>
        /// 调试信息
        /// </summary>
        void Debug()
        {
            txtResult.Text = "鼠标相对坐标：" + mousePosition.ToString() + "\n小框left：" + rect.GetValue(Canvas.LeftProperty) + ",小框top：" + rect.GetValue(Canvas.TopProperty) + "\n大图left：" + ((double)img.GetValue(Canvas.LeftProperty)).ToString("F0") + ",大图right：" + ((double)img.GetValue(Canvas.TopProperty)).ToString("F0");
        }

        /// <summary>
        /// 调整右侧大图的位置
        /// </summary>
        void Adjust()
        {
            double n = cBig.Width / rect.Width;
            double left = (double)rect.GetValue(Canvas.LeftProperty) - 10;
            double top = (double)rect.GetValue(Canvas.TopProperty) - 10;
            double newLeft = -left * n;
            double newTop = -top * n;

            img.SetValue(Canvas.LeftProperty, newLeft);
            img.SetValue(Canvas.TopProperty, newTop);
        }
    }

}