Silverlight 2 hand (one) Deep zoom

Silverlight 2 hand (one) Deep zoom

The following example describes how to quickly implement a deep zoom application using a quarter of an hour.

1. StartDeep zoom composerPreview version

2. Use deep zoom composer to create an SDI (sea dragon index) file set

Select use photo

Photo placement

Output SDI File

Output result

3. Use Visual Studio 2008 to create a Silverlight website application

If you have not installed the Silverlight 2 beta1 plug-in, you can download it here.

4. Add the SDI file set to the clientbin directory.

5. Use <multiscaleimage> to reference info. Bin

<Multiscaleimage X: Name = "deepzoomcan" Source = "[yourfolder]/info. bin "Height =" 294 "width =" 456 "canvas. left = "68" canvas. top = "51"/>

Use the multiscaleimage tag in page. XAML to reference the compilation file info. Bin generated by DZC package.

6. Compile and preview

7. Enter user prompt information

You can adjust the position and size of the text in expression blend 2.5 preview, or use the <textblock/> label in vs2008 to adjust the text information.

8. Add the mouse and keyboard to respond to events

Add the Event Response to the mouse and keyboard in page. XAML. cs. The Code is as follows:

   1: namespace DeepZoomTest1

   2: {

   3:     public partial class Page : UserControl

   4:     {

   5:         Point mousePosition = new Point();

   6:  

   7:         public Page()

   8:         {

   9:             InitializeComponent();

  10:             InitializeMouseEvent();

  11:         }

  12:  

  13:         private void InitializeMouseEvent()

  14:         {

  15:             this.MouseMove += new MouseEventHandler(Page_MouseMove);

  16:             this.KeyDown += new KeyEventHandler(Page_KeyDown);

  17:         }

  18:  

  19:         void Page_KeyDown(object sender, KeyEventArgs e)

  20:         {

  21:  

  22:             if (e.Key == Key.W)

  23:             {

  24:                 Zoom(1.2f, mousePosition);

  25:  

  26:             }

  27:  

  28:             else if (e.Key == Key.X)

  29:             {

  30:                 Zoom(0.8f, mousePosition);

  31:             }

  32:             else

  33:             {

34: htmlpage. Window. Alert ("Enter W or X for scaling! ");

  35:             }

  36:         }

  37:  

  38:         void Page_MouseMove(object sender, MouseEventArgs e)

  39:         {

  40:             mousePosition = e.GetPosition(this);

  41:         }

  42:         public void Zoom(double zoom, Point pointToZoom)

  43:         {

  44:             Point logicalPoint = this.DeepZoomCan.ElementToLogicalPoint(pointToZoom);

  45:             this.DeepZoomCan.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);

  46:         }

  47:     }

  48: }

9. Add the alert event prompted to the user

Silverlight 2 originally supported Dom calling on the page !!! To give users more prompts, you can add the following keyboard event judgment in Silverlight 2 to give users better tips:

   1: else

   2: {

3: htmlpage. Window. Alert ("enter" W "or" X "for scaling! ");

   4: }

Note:You need to add the following namespace references to the default reference of the Silverlight 2 project.

   1: using System.Windows.Browser;

10. Final Results

You can download the project source file at the following address:

 

For more information, refer to the following blog:

Expression product group blog

Dan Waters's blog

Published 30 March 08 :17 by jijia filed under: Silverlight