Programming with Deep Zoom - Microsoft Silverlight 4 Step by Step

So far, you’ve seen the Deep Zoom Composer tool and the viewer application that lets you preview Deep Zoom compositions . But you probably want to know how you can program these projects yourself .

So in this section, you’ll explore programming with Deep Zoom in Silverlight . You’ll still use Deep Zoom Composer to create the image tiles, but you’ll consume them through a Silverlight application of your own, which will show you the basics of how to program the MultiScaleImage control .

Program a Deep Zoom project

1 . Use Deep Zoom Composer to create a new project and name it SbSCh5_3 . 2 . Add two images and position them side by side .

3 . Click the Export tab and select the template Empty Project + Source .

4 . When the export completes, click View Project Folder . This will open Windows Explorer

and display the contents of the project folder .

5 . Double-click the DeepZoomProject .sln file to open the project in Visual Web Developer

Express . Because Deep Zoom Composer outputs the source code in an older format (Microsoft Visual Studio 2008), Visual Web Developer will display a dialog box that asks whether you want to convert the project . Click through each dialog box to finish the wizard .

6 . Using Solution Explorer, locate and open the project’s MainPage .xaml file . Open the

XAML view and add a MultiScaleImage control as a child of the Grid element like this:

</Grid>

7 . The Source attribute of the control will be flagged with a warning . You don’t need to

worry about this . The warning occurs because the XAML resides in the Silverlight por- tion of the project, but the path that the Source attribute references resides elsewhere .

That path is in the Web part of the project, so Silverlight will see it properly at run time even though it doesn’t see the path at design time .

8 . Press F5 to run the application . When you run the application, you’ll see that Silverlight

renders the images, but you won’t be able to interact with them yet . You’ll see how to enable image interaction in the next steps .

When you close the browser, Visual Web Developer takes you out of debug mode . Make sure you’re viewing the XAML view, and then follow these steps to enable image interaction in the application .

Enable image interaction

1 . Due to the Source attribute warning described a moment ago, Visual Web Developer

will not allow you to drag controls onto the design surface . Delete the Source attribute from the MultiScaleImage tag . Also, at this point it’s good to give the MultiScaleImage control a name . To do this, add an x:Name attribute and set its value to msi, like so:

2 . Drag two StackPanel controls into the XAML view . Edit the code so that it looks like this:

3 . Add Orientation parameters to the StackPanel controls, setting the first StackPanel so its

Orientation is Vertical and the second so its Orientation is Horizontal . <Grid x:Name="LayoutRoot" Background="White">

</Grid>

4 . Move the MultiScaleImage control so that it is a child of the first StackPanel (the Vertical

one) .

</Grid>

5 . Add four buttons to the horizontal StackPanel . Name them btnLeft, btnRight, btnUp,

and btnDown . Set their Content attribute values accordingly—to Left, Right, Up, and

Down .

</StackPanel> </Grid>

6 . Now switch to the code view and open MainPage .xaml .cs . First, you’ll need to add

some code to set the image source of the MultiScaleImage control so it will render at run time . (Remember, you removed it from the XAML to avoid the error, so you need to add it back in here .) In C#, this is easy . Just create a Uri object and point

it at the location of the XML . Now you can use the Uri object to initialize a new

DeepZoomImageTileSource instance . Set the MultiScaleImage control’s Source prop-

erty to this new DeepZoomImageTileSource and you’re done .

It’s simpler than it might sound . In fact, you can do all this in the MainPage() construc- tor . Here’s the code:

Uri uri = new Uri("GeneratedImages/dzc_output.xml", UriKind.RelativeOrAbsolute); msi.Source = new DeepZoomImageTileSource(uri);

7 . You can also add Click event handlers (or any event handler) in code, rather than speci-

fying them in the XAML . As an example, type btnUp .Click +=, and you’ll see a hint asking if you want to create the default event handler . Press the Tab key to finish the statement, and then press it again to create the event handler . This is a great shortcut! The event declaration should look like this:

btnUp.Click += new RoutedEventHandler(btnUp_Click);

8 . The newly created event handler will look something like this:

voidbtnUp_Click(object sender, RoutedEventArgs e) {

throw new NotImplementedException(); }

Note It’s important that you understand how the MultiScaleImage control works . You specify the part of the composition that you are presently viewing with the ViewPortOrigin property, which tells you which part of the image is at the top left hand side of the control . When you first load an image, the ViewPortOrigin is set to 0,0 . In other words, the top left corner of the control is also the top left corner of the image . To manipulate the view, you simply change the ViewPortOrigin point . Note that the values for the origin are between 0 and 1, where 0 is the top (or left) of each axis and 1 is the bottom or right of the axis, where the axis is either the width or height of the picture . Thus, to move the zoomed area up in the image, you change the Y value of the ViewPointOrigin coordinate by adding to it .

9 . Now you can add some code to the event handler . Place this code into the btnUp_Click

voidbtnUp_Click(object sender, RoutedEventArgs e) { Point o = msi.ViewportOrigin; o.Y += 0.1; msi.ViewportOrigin = o; }

10 . As an exercise, implement appropriate Click events for the other three buttons . To

move left and right, manipulate the X property of the Point .

11 . Now go back and add two new buttons, called btnIn and btnOut . You’ll use these to

zoom in and out of the image .

12 . Add a Click handler for the btnIn button in the same way as you did for btnUp—by

specifying it in the MainPage() constructor function .

13 . Add a class-level variable—under the class declaration, but above the MainPage()

function—to keep track of the zoom factor:

double zoom = 1.0;

14 . VWDE will create a btnIn_Click function . To zoom into the scene, you multiply the cur-

rent zoom factor by a value greater than 1 . To zoom out, you multiply it by a value less than 1 . You then call the ZoomAboutLogicalPoint function, passing it the new zoom factor and a point on the image to use as the center of your zoom . As an example, the following code will zoom in, using the origin as the zoom center point:

voidbtnIn_Click(object sender, RoutedEventArgs e) {

zoom *= 1.3;

msi.ZoomAboutLogicalPoint(zoom,

msi.ViewportOrigin.X, msi.ViewportOrigin.Y); }

15 . Now you can run your application . Pressing the In button will zoom into the image . As

an exercise, try implementing zoom out functionality in the same way .

Note When you use Deep Zoom Composer, if you choose to export using the Deep Zoom Classic + Source template, you’ll get a full Visual Studio solution that contains all the code you need to provide a full Deep Zoom experience . This includes mouse and mouse wheel control so users can pan and zoom around your image using a mouse .

In document Microsoft Silverlight 4 Step by Step (Page 114-119)