silverlight 模仿淘宝预览图片

1.先贴个效果图，看看哦。

2. 分为两个silverlight，左侧是小图（HoverImageSmall.xap），右侧为大图（HoverImageLarge.xap）,web项目承载两个silverlight，并负责两个sl之间的通讯。

3.小图（HoverImageSmall.xap）部分，源码如下

//这个声明要加的，否则JS调用不到
    [ScriptableType]
    public partial class MainPage : UserControl
    {
        //遮罩块的宽、高
        double thumbWidth, thumbHeight;
        //是否需要局部放大显示
        bool IsHoverView = true;

        //这个构造可以从html传参数进来
        public MainPage(IDictionary<string, string> InitParams)
        {
            InitializeComponent();

            //从html接收的参数 这样子获取
            var parm1 = InitParams["parm1"].ToString();

            canMove.MouseMove += new MouseEventHandler(ImgThumb_MouseMove);
            canMove.MouseEnter += new MouseEventHandler(ImgThumb_MouseEnter);
            canMove.MouseLeave += new MouseEventHandler(ImgThumb_MouseLeave);

            ImgOriginal.ImageOpened += new System.EventHandler<RoutedEventArgs>(ImgOriginal_ImageOpened);
            ImgThumb.ImageOpened += new System.EventHandler<RoutedEventArgs>(ImgThumb_ImageOpened);

            //注册js调用的宿主名称
            HtmlPage.RegisterScriptableObject("HoverImageSmall", this);
        }

        #region image event
        //小图载入后，计算遮罩块的尺寸，最小20*20
        void ImgThumb_ImageOpened(object sender, RoutedEventArgs e)
        {
            thumbWidth = ImgThumb.ActualWidth;
            thumbHeight = ImgThumb.ActualHeight;

            recMove.Width = 400 / (ImgOriginal.ActualWidth / ImgThumb.ActualWidth);
            if (recMove.Width > ImgThumb.ActualWidth)
                recMove.Width = ImgThumb.ActualWidth;

            recMove.Height = 400 / (ImgOriginal.ActualHeight / ImgThumb.ActualHeight);
            if (recMove.Height > ImgThumb.ActualHeight)
                recMove.Height = ImgThumb.ActualHeight;

            if (recMove.Width < 20)
                recMove.Width = 20;

            if (recMove.Height < 20)
                recMove.Height = 20;
        }

        //判断当前图是否小于大图尺寸，如果小于，不需要此功能
        void ImgOriginal_ImageOpened(object sender, RoutedEventArgs e)
        {
            if (ImgOriginal.ActualWidth < 400 && ImgOriginal.ActualHeight < 400)
            {
                recMove.Visibility = System.Windows.Visibility.Collapsed;
                IsHoverView = false;
            }
        }

        //鼠标离开小图
        void ImgThumb_MouseLeave(object sender, MouseEventArgs e)
        {
            this.Cursor = Cursors.Arrow;
            hoverPosition = "Visibility:0";
            if (HoverChanged != null)
                HoverChanged(this, null);
        }

        //鼠标进入小图区域
        void ImgThumb_MouseEnter(object sender, MouseEventArgs e)
        {
            this.Cursor = Cursors.Hand;
            hoverPosition = "Visibility:1";
            if (HoverChanged != null)
                HoverChanged(this, null);
        }

        //查看指定区域
        void ImgThumb_MouseMove(object sender, MouseEventArgs e)
        {
            if (!IsHoverView)
            {
                hoverPosition = "NoHover:";
                if (HoverChanged != null)
                    HoverChanged(this, null);
                return;
            }
            Point p = e.GetPosition(ImgThumb);
            double moveLeft = p.X - recMove.Width / 2;
            double moveTop = p.Y - recMove.Height / 2;
            if (moveLeft < 0) moveLeft = 0;
            if (moveTop < 0) moveTop = 0;

            if (moveLeft > thumbWidth - recMove.Width)
                moveLeft = thumbWidth - recMove.Width;
            if (moveTop > thumbHeight - recMove.Height) moveTop = thumbHeight - recMove.Height;

            Canvas.SetLeft(recMove, moveLeft);
            Canvas.SetTop(recMove, moveTop);

            double newLeft = moveLeft * ImgOriginal.ActualWidth / thumbWidth;
            double newTop = moveTop * ImgOriginal.ActualHeight / thumbHeight;

            hoverPosition = "Position:" + newLeft + "," + newTop;
            if (HoverChanged != null)
                HoverChanged(this, null);
        }


        #endregion

        #region 更换图片
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog ofg = new OpenFileDialog();
            ofg.Multiselect = false;
            ofg.Filter = "All files (*.*)|*.*|PNG Images (*.png)|*.png";

            if (ofg.ShowDialog() == true)
                AddFile(ofg.File.OpenRead(), ofg.File.Name);
        }

        void AddFile(FileStream fs, string fileName)
        {
            byte[] bytes = new byte[fs.Length];
            fs.Read(bytes, 0, bytes.Length);

            imgBase64 = Convert.ToBase64String(bytes);

            string imgFormat = "<img id=\"testImg\" style=\"500px; height:400px;\" src=\"data:image/png;base64,{0}\"; />";
            imgHtml = string.Format(imgFormat, imgBase64);

            BitmapImage bitImg = new BitmapImage();
            bitImg.SetSource(fs);

            ImgThumb.Source = bitImg;
            ImgOriginal.Source = bitImg;

            #region xx
            if (bitImg.PixelWidth < 400 && bitImg.PixelHeight < 400)
            {
                recMove.Visibility = System.Windows.Visibility.Collapsed;
                IsHoverView = false;
            }
            else
            {
                IsHoverView = true;
                recMove.Visibility = System.Windows.Visibility.Visible;
            }

            if (bitImg.PixelWidth <= 160 && bitImg.PixelHeight <= 160)
            {
                thumbWidth = bitImg.PixelWidth;
                thumbHeight = bitImg.PixelHeight;
            }
            else if (bitImg.PixelWidth < 160)
            {
                thumbHeight = 160;
                thumbWidth = 160 * bitImg.PixelWidth / bitImg.PixelHeight;
            }
            else if (bitImg.PixelHeight < 160)
            {
                thumbWidth = 160;
                thumbHeight = 160 * bitImg.PixelHeight / bitImg.PixelWidth;
            }
            else
            {
                if (bitImg.PixelWidth > bitImg.PixelHeight)
                {
                    thumbWidth = 160;
                    thumbHeight = 160 * bitImg.PixelHeight / bitImg.PixelWidth;
                }
                else
                {
                    thumbHeight = 160;
                    thumbWidth = 160 * bitImg.PixelWidth / bitImg.PixelHeight;
                }
            }

            recMove.Width = 400 / (bitImg.PixelWidth / thumbWidth);
            if (recMove.Width > thumbWidth)
                recMove.Width = thumbWidth;

            recMove.Height = 400 / (bitImg.PixelHeight / thumbHeight);
            if (recMove.Height > thumbHeight)
                recMove.Height = thumbHeight;

            if (recMove.Width < 20)
                recMove.Width = 20;

            if (recMove.Height < 20)
                recMove.Height = 20;
            #endregion

            if (FileSelected != null)
                FileSelected(this, null);
        }
        #endregion

        #region ScriptableMemberAttribute
        [ScriptableMemberAttribute]
        public string imgBase64 { get; set; }

        [ScriptableMemberAttribute]
        public string imgHtml { get; set; }

        [ScriptableMemberAttribute]
        public string hoverPosition { get; set; }

        [ScriptableMemberAttribute]
        public string imgViewVisible { get; set; }
        #endregion

        #region ScriptableEvent
        [ScriptableMember()]
        public event EventHandler FileSelected;

        [ScriptableMember()]
        public event EventHandler MoveOnImage;

        [ScriptableMember()]
        public event EventHandler ViewVisibilityChanged;

        [ScriptableMember()]
        public event EventHandler HoverChanged;
        #endregion

        #region Scriptable members to control functions via javascript

        [ScriptableMember]
        public void EnableDrop()
        {
            //button1 image1.AllowDrop = true;
        }

        [ScriptableMember()]
        public event EventHandler MaximumFileSizeReached;

        #endregion
    }

4. 大图 （HoverImageLarge.xap），这个部分比较简单。

public partial class MainPage : UserControl
    {
        double newLeft, newTop;

        public MainPage()
        {
            InitializeComponent();
            HtmlPage.RegisterScriptableObject("HoverImageLarge", this);
        }

        void messageReceiver_MessageReceived(object sender, MessageReceivedEventArgs e)
        {
            string msg;
            if (e.Message.StartsWith("Position:"))
            {
                msg = e.Message.Replace("Position:", "");
                string[] arr = msg.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
                newLeft = double.Parse(arr[0]);
                newTop = double.Parse(arr[1]);
                Canvas.SetLeft(img2, -newLeft);
                Canvas.SetTop(img2, -newTop);
            }

            if (e.Message.StartsWith("NoHover:"))
            {
                Canvas.SetLeft(img2, 0);
                Canvas.SetTop(img2, 0);
            }

            if (e.Message.StartsWith("Visibility:"))
            {
                msg = e.Message.Replace("Visibility:", "");
                if (Int32.Parse(msg) == 1)
                {
                    img2.Visibility = System.Windows.Visibility.Visible;
                }
                else
                {
                    img2.Visibility = System.Windows.Visibility.Collapsed;
                }
            }

        }

        #region script method
        [ScriptableMember()]
        public void SetImage(string imageBase64)
        {
            if (imageBase64 == null) return;
            MemoryStream pFileStream = new MemoryStream();
            byte[] imgByte = Convert.FromBase64String(imageBase64);
            pFileStream.Write(imgByte, 0, imgByte.Length);
            BitmapImage bitmap = new BitmapImage();
            bitmap.SetSource(pFileStream);
            img2.Source = bitmap;
        }

        [ScriptableMember()]
        public void SetPosition(string msg)
        {
            if (msg == null) return;
            if (msg.StartsWith("Position:"))
            {
                msg = msg.Replace("Position:", "");
                string[] arr = msg.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
                newLeft = double.Parse(arr[0]);
                newTop = double.Parse(arr[1]);
                Canvas.SetLeft(img2, -newLeft);
                Canvas.SetTop(img2, -newTop);
            }

            if (msg.StartsWith("NoHover:"))
            {
                Canvas.SetLeft(img2, 0);
                Canvas.SetTop(img2, 0);
            }

            if (msg.StartsWith("Visibility:"))
            {
                msg = msg.Replace("Visibility:", "");
                if (Int32.Parse(msg) == 1)
                {
                    img2.Visibility = System.Windows.Visibility.Visible;
                }
                else
                {
                    img2.Visibility = System.Windows.Visibility.Collapsed;
                }
            }
        }

        #endregion
    }

5.由于最近比较忙，没空详细写，呵呵。源代码在这里，各位看官那自己下载分析吧。

源码下载selectFile仿淘宝预览图片.rar