Jaime Rodriguez : silverlight

What is new in WPF and Cider on the .NET Framework 4 and VS2010 beta 2 release

jaimer — Fri, 23 Oct 2009 14:39:00 GMT

This post is a quick recap of the most important changes for WPF and Silverlight developers in this Beta 2 release. I definitely will return to a few of these topics over the next few weeks, so stay tuned for updates and new posts. Please note that this post is NOT all-inclusive; there are lots of features and smaller bug fixes that I am leaving out. I will try to dig those up as we go along in the next few weeks!

Also, I've listed links to the Beta 1 posts at the bottom of the post for those needing a refresh. I've also sprinkled links to the videos in our “WPF in VS2010 Beta 2 series” throughout the post, as well as listing them at the end.

New in the Visual Studio 2010 Cider designer

You can see a video with most of the Beta 2 updates in this 14 minute video with Mark Wilson Thomas.
In the video, Mark shares a MUST USE registry key to improve the performance of Visual Studio 2010 Beta 2.

For the record, this is in the readme, it is not a hack and Mark has documented it on his announcement:

Registry Switch for improved performance
Because of a late-breaking change, you will need to make a configuration change to see the best designer performance. This configuration change will not be necessary in the final released versions of the product.
NOTE: Editing the registry can cause serious problems that may require you to reinstall Windows. Microsoft cannot guarantee that problems resulting from the incorrect use of Registry Editor can be solved. Use Registry Editor at your own risk. Refer to the article on registry editing for your OS (e.g http://support.microsoft.com/kb/136393) for advice.
1. Close any open VS instances
2. Open RegEdit (as an administrator as needed)
3. Select the HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\10.0 key
4. Right click and add key, type ClrHost
5. In the newly created key, right click and add a DWORD32 with the name StartupFlags
6. Set its value to 5
7. Close RegEdit
8. Start up Visual Studio and use as normal

[10/28 update. Mark now has a disclaimer and it is in bold red on his page, so it must be important, go read it:

The registry hack might create instability or increased Virtual Memory Usage in some VS scenarios. If you see this, feel free to remove the config change and report it on Connect.
Also, if you are not using Cider designer a lot (for WPF and Silverlight) the configuration change is not helping you. So don't enable it unless you are using the designer a lot. ]

Here are my cliff-notes from the video:

For WPF developers

The designer continues to stabilize. All the features introduced in Beta1 – including improvements on the designer, brush editor, IntelliSense on binding markup extensions, data sources window- have been cleaned up and the performance has been boosted.
The property browser has been updated with a new view that tells you what is the source for the value of a property (e.g. is the source set locally, from a style, binding, etc.). This feature is proving incredibly handy based just on my one week of using it!
Support for StaticResources in app.xaml. Finally! No more long pack://application,,,/ syntax required.
Improved error handling, much like Blend, where the designer can isolate errors to a specific user control; the designer now ‘recovers’ and gives you meaningful information about the error.
Now there is design-time data support; compatible with Blend.

For Silverlight developers,

You finally get an interactive designer where you can drag & drop and get all the designer features available in WPF - zero to 70 MPH in a single release- Cha-Ching!!

New Graphics (minus text) features for the WPF run-time?
You can watch demos for most of these in this video with David Teitlebaum. You can get the demos for this video here.

Cached Composition. This feature allows you to “cache” any UI Element as a bitmap that can be persisted in video memory. The cache supports dirty regions, so it redraws when needed (with out you needing to detect it).
Cached elements can be live objects (e.g. a textblock) and can be transformed, rotated, etc.
This feature is incredibly powerful for WPF scalability. If you watch David’s video you will see how he went from ~10fps on a live drawing, to 60fps when he cached it. I recently had a similar experience in a 3D viewer; my CPU decreased by 80% for all my drag & drops once I cached the 3D scene during the drags.
Layout Rounding allows WPF to avoid the blurriness that results in images and text when they are using layout with sub-pixel positioning. This feature is in Silverlight 2; again, nice to have compatibility.
Pixel Shader 3 support expands the effects pipeline significantly since PS3 has a lot more instructions. A good reference on difference on # od instructions between PS2 and PS2 is at wikipedia.
Note: The gotcha for this features is that Pixel Shader 3 does not default back to software rendering, so you will need to test to see if hardware supports the feature before you use it.
Animation easing functions allow designers to create more realistic, fluid animations. This feature matches the easing functions in Silverlight 3 and provides XAML compatibility. Out of the box, you get CircleEase, BackEase, ExponentialEase, Quadraticease, CubicEase, QuarticEase, Quinticease, PowerEase, Elasticease, BounceEase, and SineEase. There is also an interface (IEasingFunction), so you can create your own easing functions and plug them into any of the existing animations via a new Dependency property on all stock animations.
RenderOptions.ClearTypeHint allows you to turn ClearType on in scenarios where the system previously turned it off.

New Text Features
You can watch most of these improvements with insightful explanations in this Channel9 video with Chipalo Street.

A new text rendering stack improves the clarity and puts the application developer in control of the rendering and formating options. With this new stack you choose between the old world WPF text (which worked well for some scenarios), and new text with comparable sharpness to Win32/GDI.
Configuring the text enhancements is handled mostly via two new attached properties:

TextOptions.TextFormatingMode allows you to control the metrics for formatting text. You get two options:

Ideal – is the old WPF, the glyphs maintain high fidelity with their outlines, and placement of the final glyph is not taken into account
Display – uses GDI compatible metrics and ensures glyph widths are in whole pixels (clarity of the text is much higher when text aligns to whole pixels)

TextOptions.TextRenderingMode allows you to control how the text is rendered.

Auto – respects the system setting; this is usually ClearType for most systems
ClearType – forces the rendering to Cleartype -this is what we were doing in earlier versions of WPF
GrayScale – renders grayscale, antialiased text
Aliased – no antialiasing is used.
Note: Per Chipalo, aliased vs. antialiased does not lead to perf differences; this surprised me.

Embedded bitmaps adds support for (mostly) East Asian fonts that contain bitmaps for some characters at small sizes.
Bindable Run is simply the old Run, fixed so that Run.Text is a dependency property and can be data bound.
Customization support for Caret Brush allows you to replace the Caret in TextBox, PasswordBox and RichTextBox. You can replace the CaretBrush with any brush. Go crazy! You can also customize SelectionBrush and SelectionOpacity on all controls that support selection –including TextBox, RichTextBox, PasswordBox, FlowDocumentPageViewer, FlowDocumentScrollViewer and FlowDocumentReader.
Custom Dictionaries allows you to customize the dictionary used for spell checking in WPF applications. In previous releases, WPF used the OS dictionary, but did not allow you to extend it. Now with Custom dictionaries you can extend the dictionary to include your specialized industry lingo.

New Control & Data binding features

VisualStateManager support. VSM actually ships in the platform and all the controls have been tweaked to support Visual States. This means you can now customize Control templates using VSM and get higher compatibility with Silverlight.
Note: Despite the VSM support in all the controls, the actual control templates were not changed, you will need to replace the template to use VSM.
Inheritance Context for Input Binding enables the MVVM scenario of binding InputBinding.Command to a command in a ViewModel. The Key and Modifiers property in KeyBinding are now Dependency Properties; same for MouseAction and MouseBinding.
DependencyObject.SetCurrentValue is a new method introduced mostly for Custom Control authors. SetCurrentValue method changes the effective value of the property, but existing triggers, data bindings, and styles will continue to work because the ValueSource for the property is not changed. A lot of the controls in WPF were tweaked to use this, so their old SetValue calls were replaced with SetCurrentValue. I hear the recommendation is for custom control authors to use this method instead of SetValue; reccomendation makes sense, I am not sure if it applies 100% of the time, or just 99%; so use with 1% caution.
Databinding support for DynamicObjects. With .NET 4’s support for dynamic keyword, a lot of people will be using DynamicObject (and I DynamicMetaObjectProvider). You will be able to bind to these dynamic objects using the same syntax than a property of any other object. You will even be able to use typed DataTemplates (as long as you are using concrete typesthat derive from DynamicObject.

New Windows 7 features

MultiTouch is fully functional in Beta2. WPF now has full support for multitouch including manipulation, inertia, and raw-touch events. The support is at UIElement, UIElement3D and ContentElement –which means every thing with LIFE in WPF supports Multitouch.
This topic is going to get its own blog post (and hopefully a video) soon, so stay tuned.
Taskbar support for Windows 7, including jumplists, progress bar, overlay icon, and thumbnail buttons (with WPF commanding support). This topic will also get its own blog post soon.

Deployment update
You can watch a demo and get the whole picture from this Channel 9 video interview with Jossef Goldberg.

Client profile is critical to the deployment of the framework outside of managed enterprises. By subsetting the full framework to a client SKU, we will decrease download size, and improve the framework install times.
In Beta 2, client profile is near feature complete:

You can see it as its own separate, serviceable SKU
The tools have support for it, including the References dialog in VS2010 filtering for assemblies only in client profile SKU if that is what you are targeting.
A few assemblies that were not in client profile SKU are now included, this increased the size to 30 MB, which is still a great improvement compared to full framework.

Hopefully this gets you caught up on beta2. Time to play! Download visual Studio 2008 beta2. Stay tuned for a few more posts on the topics above.

LINK ROLL!!

Beta 2 links:

Beta 1 (but still relevant links)

Cider in VS 2010 beta1 has a long list of improvements for WPF and Silverlight developers in VS2010. All of these are still IN!
Multitouch in WPF with Anson Tsao, this was recorded after Beta 1, so shows some Beta 2 roadmap/features.

Expression Studio TuTorialS Starter Kit

jaimer — Wed, 12 Aug 2009 09:26:06 GMT

Via Arturo Toledo (internal email). The Expression team released four great Expression starter kits today..

Introduction to Prototyping with Sketchflow in Expression Blend 3
Discover Sketchflow, a new feature set in Expression Blend 3 that helps you define the concept for user experiences in early stages of the design process. From sketches to wireframes to protoypes of simple or high definition, Sketchflow provides you the right tools to communicate your ideas and gather feedback from others.

Venture into Gaming with Behaviors in Expression Blend 3
Learn more about how to build a traditional "bricks" game using Expression Blend 3 Behaviors. Simply drag and drop Behaviors over objects in your artboard to easily add powerful and sophisticated functions like animation, physics, interactivity, data connection, effects and more. All without coding. The ever growing Behaviors Gallery at expression.microsoft.com is always available for you to download new behaviors.

Discovering SuperPreview in Expression Web 3
Learn more about SuperPreview, a new visual diagnostics tool in Expression Web 3. In this Starter Kit you will be provided with detailed guidance on how to leverage SuperPreview to diagnose issues across multiple browser, all with full rendering fidelity and detailed control.

Support for Silverlight in Expression Web 3
Learn how to leverage the new and easy to use Silverlight support features in Expression Web 3. Then take your websites and publish them to an FTP location without having to leave Expression Web.

-------

I just got done watching the Sketchflow tutorial videos; they were excellent!! Moving to behaviors next :)

Enjoy!!

New release of WPF Toolkit, now with charts!

jaimer — Fri, 26 Jun 2009 07:57:00 GMT

The June release of the WPF toolkit went live today, it now includes the charts that come with the Silverlight toolkit.

David Anson has the scoop and a great sample on the charts.

The other controls (Datagrid, VSM, and DatePicker) also include a few minor fixes (check the release notes).

There is not an update for the WPF ribbon; we are still hopingthe update to ribbon comes after (or around same time) as .NET4 beta2.

Enjoy the charts and the new toolkit, please don’t forget to send feedback.

PS. – Congrats to David Anson for the release; he has been the biggest advocate for the charts making it into WPF. I am sure he put some ‘over-time’ given how much they are doing with the Silverlight control toolkit too. Thanks David!

Programming differences between WPF and SIlverlight, a WHitePaper

jaimer — Tue, 09 Jun 2009 19:46:06 GMT

Wintellect just posted a great 70 page white paper on codeplex about the “programming differences between WPF and Silverlight”.

I have not dissected it yet, but from a quick scan it looks very useful.
I will be printing it and dissecting it on my flight to the next (and last) WPF for LOB Tour stop: Chicago.

Please share feedback on the paper. Is it useful?? What is it missing?? Is it a fair assessment of the status on our continuum.

WPF effects Library running in Silverlight 3

jaimer — Thu, 26 Mar 2009 02:37:00 GMT

At MIX last week, we announced that Silverlight 3 supports effects, written in HLSL 2.0 ..

If you remember from this previous post, we have a codeplex WPF library with 20+ effects and greater number of transition effects. Charles Bissonette, in the Blend team ported the library to Silverlight, and we have now merged it into codeplex.

The effects included in this first release are:
BandedSwirl, Bloom, BrightExtract, ColorKeyAlpha, ColorTone, ContrastAdjust, DirectionalBlur, Embossed, Gloom, GrowablePoissonDiskEffect, InvertColor, LightStreak, Magnify, Monochrome, Pinch, Pixelate, Ripple, Sharpen, SmoothMagnify, Swirl, Tone, Toon, and ZoomBlur

The transition effects include:
BandedSwirl, Blings, Blood, CircleReveal, CircleStretch, CircularBlur, CloudReveral, Cloudy, Crumble, Dissolve, DropFade, Fade, LeastBright, LineReveal, MostBright, PixelateIn, PixelateOut, Pixelate, RadialBlur, RadialWiggle, RandomCircleReveal, Ripple, Rotate, Saturate, Shrink, SlideIn, SmoothSwirl, Swirl, Water, Wave.

If you have Silverlight 3 and want to see the library in action, click here, or in the image below.

To play with the sample app:

Select type of media ( vector or image)
Click on the checkbox by the effect name to apply an effect.
You can apply multiple effects at same time.
Tweak the sliders and textboxes to configure the effect.
Note: the textboxes save changes on lost focus, so will need to tab out and back in.

My favorite is the transitions.

Click on the top right button to see the show. Each 3 seconds the transition will change. The first time they repeat twice so you can see the details, later they get random.

If you do not have Silverlight 3, Adam Kinney and I recorded an impromptu video for you to see watch the demo with out needing to update your bits to SL3).

Geeking it out (aka the details):

Porting the library was trivial, there is probably a total of < 50 #if SILVERLIGHT in the project. They mostly relate to dependency properties ( SL does not do UIPropertyMetadata) and or the use of Vector (not in SL, but Point serves the purpose)..
SL effects are not hardware accelerated ( due to security) but it performs pretty well on my machine.. Let us know if you see otherwise.
Silverlight does not have VisualBrushes, but you can use the new WriteableBitmap to create a snapshot of a visual ala RenderTargetBitmap in WPF so you can create cool transitions. I did it for the start/stop transitions (though I must say I picked some really funky effects for the transitions).

The source is in codeplex.
Packaging will likely change. Right now it is WPF project with SL project linking to the WPF files (the way I keep it in source control) but I think for easier download, it will become separate zips and I can duplicate the files just for releases (source can still be single shared file).
Please check the pre-requisites in codeplex, you will need latest DirectX SDK, .NET 3.5 SP1 ( or VS 2008 SP1), the Shader Effect build task from WPF Futures and of course SL3 and SL3 tools if you want to run the SL bits.

More effects pictures:

Pinch + Inverted colors. Embossed

Enjoy, please report bugs/issues if needed.

Microsoft Client Continuum in action: The Silverlight toolkit charts, running in WPF

jaimer — Mon, 17 Nov 2008 10:05:38 GMT

The Silverlight toolkit CTP released at PDC includes some new charting functionality (Column, Bar, Pie, Line, and Scatter).
The long-term plan is for all of these controls to be ported to WPF; but inspired by Rudi’s work on porting the themes, I peeked into the task to see if the Microsoft continuum would hold for the controls too.

The results were darn good, I had the charts project compiled in WPF in ~20 mins; and after that, I only had to make a few run-time tweaks to get the project running… ( look for the #WPF pre-processor in the code.. there is only a handful).

Since the charting library is an early "preview" quality, I will probably not do a full port or any testing, but in case some one wants to carry it further, the source code is here..

Screenshot follows… These are the same charts as in the SL Toolkit sample but running in a WPF app (named Window1 for Rob)..

Working with Collections in Deep Zoom.

jaimer — Tue, 24 Jun 2008 09:29:00 GMT

In the Deep Zoom run-time, you can load two types of compositions:

A single image composition is when you interact with a single image at run-time. This does not mean you started with a single image, you could start with many images and compose a scene, then you export from Composer and all of the images get 'stitched' into a single composition that you can interact with at run-time. You interact (like zooming, opacity, etc.) with your image by changing the properties of your MultiScaleImage.
A "Collection of Images" is when you compose a scene but export it as a collection of images (duh jaime do u get paid by the word? word, word?)
At run-time, you can still interact with each of the individual images in your composition.
The images are exposed via the SubImages collection of your MultiScaleImage. You can still set properties in the MultiScaleImage and these properties will affect all the images in the collection [for example if I Zoom-in to 200% in MSI, that would impact which SubImages are visible] but with collections I also get the benefit of interacting with the SubImages directly.

Collections have a lot more flexibility of course, but I also caution of two tiny concerns:

when dealing with collections, you likely end up downloading a few more tiles as you go. Not a huge deal
Your images load independently; this again is not a huge deal unless you have huge discrepancies in size; in that case you will see your small images load earlier than your bigger ones. [To solve this you could play with Opacity]

This post is about working with Collections, so let's assume I decided the two issues above are not in play (that is the case for most people).

To find out what we can do with a MultiScaleSubImage, all we need is to look at the class definition:

AspectRatio - readonly property == width/height.
Opacity = self-explains; 0== transparent. 1.0 == Opaque
ViewportOrigin == top-left corner of the image. Stay tuned for a lot more below. This is a really interesting property and 1/3 the point of this post
ViewportWidth == width of the area to be displayed. This value is in logical coordinates. For example:

a value of 1 displays the entire image (no zoom),
a value of 0.5 is 200% zoomed in and a value of 0 is completely zoomed (user cannot see the image at all).
A value above 1 is zooming out from the image. For example, a value of 2 means that the image will take up half the size of the MultiScaleImage control area (50% zoom).

ZIndex -- self explains; higher numbers are in front of lower ones.

A few of the less obvious options for dealing with collections are:

Tags
If you have used Deep Zoom Composer you might have noticed that composer has a property called "Tag" for each image. As of beta2 tag is not exposed via the MultiScaleSubImage. So, how can you get to this Tag?

The tags are stored in the metadata.xml file generated by Deep Zoom Composer.
You can easily get to this file using WebClient or HttpWebRequest networking APIs in SL2. It is a trivial two step process:

Make call to read XML file. I did it from ImageOpenSucceded to not compete with download traffic for image and to know for sure that when WebClient callback happened I could access the images in the collection.

void msi_ImageOpenSucceeded(objectsender, RoutedEventArgs e)
{

        WebClient wc = newWebClient();
        wc.DownloadStringCompleted += newDownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
        wc.DownloadStringAsync(newUri("GeneratedImages/Metadata.xml", UriKind.Relative));
}
Then we read the results.    The code is below. I used LINQ to XML -that makes it trivial :)
The only thing worth highlighting from the code is the "map" between tags and MultiScaleSubImages.
metadata.xml has a ZOrder, which is a 1-based index of the position of the image in the collection.   Despite its name (ZOrder), this has nothing to do with MultiScaleImage.ZIndex .

The actual collection is 0 based, so we subtract one to the value read from metadata.xml    I have put red, highlighted comments on top the two most relevant lines .

void wc_DownloadStringCompleted(objectsender, DownloadStringCompletedEventArgs e)
{
    if(e.Cancelled == false&& e.Error == null)
    {
        strings = e.Result;
        XDocument doc = XDocument.Parse(s);
        var images = froma indoc.Element("Metadata").Descendants("Image")
                     selecta;


        foreach ( XElement image inimages )
        {
            CollectionImage ci =
            newCollectionImage
            {
                 Height = (double) image.Element("Height"),
                 Width = (double) image.Element("Width"),

//here we read the ZOrder from metadata.xml and subtract one
                 ZOrder = ((int) image.Element("ZOrder")) -1 ,
                 Tag = (string) image.Element("Tag"),
                 Location = newPoint{ X = (double)image.Element("x"), Y = (double) image.Element("y")}
             }
             ;

//here we map from the SubImages collection based on the ZOrder we read
            ci.Image = msi.SubImages[ci.ZOrder];
            _images.Add ( ci ) ;

        }

        items.ItemsSource = _images;

    }
}

If you look at the code, I created a CollectionImage which aggregates the stuff from metadata.xml and the corresponding MultiScaleSubImage.
This means I could now filter, or do any thing since the data is merged. Kirupa has an example of using tags to filter (so I will stop here on that topic and move to Viewports).

ViewportOrigin:

ViewportOrigin represents the left(x), top(y) corner of your SubImage relative to the MultiScaleImage control.
The surprise (for me at least) is that:

They are normalized relative to the viewportWidth of the subimage you are dealing with.
Moving towards the right in the horizontal ( X) direction is actually a negative offset, so is moving towards the bottom.

Got it?? OK! you are done.
If you are like me you might want to see a sample. Here are some below:

	This is a DeepZoom composition w/ two images. Blue is 1200x800 ( Aspect ratio = 1.5 ) Yellow is 600x400 ( AR = 1.5 ) At this point ViewportOrigin = 0,0 for both... Looks good to me. It is worth mentioning [if you try to make sense as you go ] that the ViewportWidth for blue == 1.0 [takes the whole width available] ViewportWidth for yellow == 2.0 [takes 1/2 the width available to the control] The numbers on the images are "approximations".. if you read a coord of say 900,600 that means it is around there, but not quite exact Let's now start changing ViewportOrigin.
	Here I simply changed viewportOrigin in yellow image. My first instinct looking at this one would be 1,0 ... [since it is 600 pixels left of 0,0] I was wrong!! This is actually ViewportOrigin = -1, 0.. Remember, when you move an image to right or bottom, the offsets are negative. You want to know what would happen if VO was 1,0?? The demo is at http://www.cookingwithxaml.com/recipes/DeepZoomCollection/default.html You can play with ZIndex, Opacity and ViewportOrigin for each image [their values are databound on the grid].
	Having explained that the ViewportOrigins offsets (to right,bottom) are negative numbers. Can you guess what the offset is for the image to the right? My guess was ( 0, -1) but then I was wrong again! The ViewportOrigin here is ( 0, -.66666666666) Why? Because the offsets are relative to the Width and in this case it is 600. So a viewport of (0,-1) would have been lower in the y axis [instead of at 400, it would be at 600]
	This is 0,-1 and exactly what we expected for this one (after reading line above).
	I know you have it by now, but just for fun, this is ( -1.5, -.3333) aka ( 900,200) Notice how half of our yellow image is clipped.
	This is ViewportOrigin ( 0.5, -.3333 ) ... I figured I should show you some thing with a positive value for Viewport Origin...

Again, you can play with the ugly but hopefully useful sample here..
Just change the ViewportOrigin, or any other property and see what happens.
You can use the same sample to play with Opacity, ZIndex and ViewportWidth.. this will show you the flexibility in collections.
Don't get tricky with the values as there is no validation.

Mapping SubImages to Element Coordinates
Now that we understand ViewportWidth and ViewportOrigin, we can map from logical coordinates to element coordinates so we can put overlays on our MultiScaleImage. Or do hit testing or any thing similar.

What I did is put a small pink rectangle in the page and I am going to listen to MouseMove on the MultiScaleImage and then do kind of a "hit testing" to see which Image I am over. I used ZIndex to select only the single image on the front. If you did not use ZIndex you can select multiple.

So, what does the map look like?? The whole code is below commented in detail.. I hope that makes it easiest to explain -instead of my rambles-.

/// <summary>
/// Gets a rectangle representing the top-most image that the mouse is over
/// </summary>
/// <param name="elementPoint">Mouse Position, in Element Coordinates</param>
/// <returns> Rectangle reprsenting Element Coordinates for the image or 0,0,0,0 if not over an image</returns>
Rect SubImageHitTestUsingElement(Point elementPoint)
{
    Rect resultRect = new Rect(0, 0, 0, 0);
    int zIndex = 0;

    // We loop through all our images. 
    for (int i = 0; i < _images.Count; i++)
    {
        try
        {
            // Selct our MSSI. 
            MultiScaleSubImage subImage = _images[i].Image;

            // NOTICE the scale is a mutliplication of the size of our image (1 / subImage.ViewportWidth)
            // and the current Zoom level ( 1 / msi.ViewportWidth) 
            double scaleBy = 1 / subImage.ViewportWidth * 1 / msi.ViewportWidth;

            // The two lines below convert our image size us from Logical to Element Coords
            // Notice that for Height, we must take into account Aspect ratio. 
            double width = scaleBy * this.msi.ActualWidth;
            double height = (scaleBy * this.msi.ActualWidth * (1 / subImage.AspectRatio));

            // Now we convert our viewportorigin  (logical coords) to Element Coords
            // Reminder, this is top-left ..  Notice that we multiply by -1 since 
            // we saw the negative math for Viewport Origin. 
            Point p = msi.LogicalToElementPoint(
                new Point(
                     -subImage.ViewportOrigin.X * 1 / subImage.ViewportWidth,
                    - subImage.ViewportOrigin.Y * 1 / subImage.ViewportWidth));
             
            // Now we create a Rectangle in Element Coords. 
            Rect subImageRect = new
                Rect(p.X, p.Y, width, height);

            // here we hitTest, using Contains.. 
            // and we keep track of the front-most element only..                    
            if (subImageRect.Contains(elementPoint))
            {
                if (subImage.ZIndex >= zIndex)
                {

                    zIndex = subImage.ZIndex;
                    resultRect = subImageRect;                            
                }
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(ex.Message); 
        } 
    }
    System.Diagnostics.Debug.WriteLine("Done");
    return resultRect;
}

I used Element Coords because that is what I was after. If you want logical coords, it should be easy from code above..
Just convert the point to Logical, do the scaling for zoom and hittest against a logical rect...

Fair enough??? The source is [you guessed it] at Skydrive.

You can see a few tiny issues I did not care much for:
1) My math is rounded so some times you see the 'Rectangle' I created be slightly off (adding some extra pixels should do fine) ...
2) I did the recalculation for rectangle only on mouse move.. and I did not do it on Pan... so if you Zoom using Wheel or you pan, it will take for you to move the mouse one more time in order for Rectangle overlay to update.

That is my part!! Now it is up to you to build some thing really cool using real images and hittesting..

Installing Silverlight no longer requires a browser re-start… woohoo!!!

jaimer — Sat, 03 May 2008 09:06:00 GMT

A few weeks ago I noticed changes in browser's behaviors…

1) My IE 7.0.6000 no longer prompts for Click To Activate :)

2) My firefox 2.0.0.13 no longer required a reboot after installing Silverlight … If you had not noticed, using silverlight.js on IE allowed you to instantiate silverlight plugin right after installing , but on other browsers it required a re-start…

I pinged Piotr, our deployment PM, asking if he was seeing the same and he upped it sharing that he had a way to instantiate silverlight on ANY PLATFORM and ANY browser WITH OUT requiring A RE-START… [call me a geek, but I was happy].. Today, he posted the blog with the magic call: navigator.plugins.refresh () … Check it out yourself…

I hear the next version of Silverlight.js (when we next release an SDK) will include these changes; in the mean time you can take his advise and use navigator.plugins.refresh () to get around the re-boot issue and instantiate SL right after installing…

[caveat: this does not work if silverlight is being updated, and the plugin was loaded, but that scenario is not common since silverlight auto-updates itself] …

Thanks Piotr, and welcome to blogging..

Viewbox for Silverlight2

jaimer — Tue, 29 Apr 2008 10:34:02 GMT

Viewbox is a pretty handy 'container' in WPF.. It is a decorator that scales its child content to the size available to the viewbox ( if child is smaller it scales it up >1, if child is bigger it scales it down such that it fits based on some stretch direction).

You can find source code for a sample viewbox here.

If you want to see a ugly (yet still useful for those knowing viewbox) harness, there is a sample here..

Sorry for no docs; the control itself is straight forward. Please check the docs for WPF viewbox to see how to use it; the SL2 version above mimics WPF.

Please do review the source if you are using it for a real project.

Cheers,

Some of the Silverlight blogs I read..

jaimer — Tue, 29 Apr 2008 10:11:00 GMT

This one got stuck on my drafts on 4/10… sorry … (FYI, I am back from my trip; more on that soon ) …

- –- -—-— -- -

I am out all next 1.5 weeks talking to ISVs in EMEA about WPF and Silverlight… Should be so much fun that I won’t have time to blog :(.. in the mean time, here is an OPML of the Silverlight blogs I read…

If your blog is missing or you want to recommend some one else’s blog, please email me or leave comments…

Again, OPML is here.

built-in Styling and generic.xaml

jaimer — Tue, 08 Apr 2008 23:58:00 GMT

Most people already know (from ScottGu’s blog post for example) that in Silverlight 2 you can override the ControlTemplate for a Control and ‘re-define’ the look of the control. However, I have received a few questions around the use of generic.xaml to accomplish this same task; I will try to share a few thoughts on this to tease you into digging deeper on your own. If you are short on time, skip to [FAQs on built-in styles below]

Some definitions on the recurrent “what is difference between style and template?”

Style is an object (in Markup or in Code) that sets properties of a control.
All that a style can do is set the value of existing properties on the control. Imagine our control was a Car, a Style could say some thing like “wheelsize=17”, bodycolor=”cherry red”, “windowtreatment=”tinted”, etc..

A template actually defines the pieces or parts of the car. For example, a template for a cheap convertible might not have a roof at all :) or a template for a Car can decide if it is two doors or four doors, if it has four wheels or eight, etc.
When I explain it I always tell people, the template defines the skeleton, the Style dresses the pirate ( I like the pirate analogy cause some of them have one eye, or one leg, or one arm, etc. making good use of Templates).

Where things get interesting is that a Style can set any property in the control, and Template is itself a property, so what you see the tools (like Blend) do most often is when you want to override the Template of a Control, they override the whole style and the Template property with it.

Stay with me… even if the above does not make sense, the rest of the article will help.

Where generic.xaml comes in is in the “magic” that defines the default look for a control. Let’s imagine we want to create a GelButton ..

public class GelButton : Button    
{

}

Simple enough, now we want to use it in our Page.xaml user control, we add the namespace and the control.

<UserControl x:Class="StylingSample.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" 
    xmlns:samples="clr-namespace:StylingSample">
    <StackPanel Width="50" >
        <Button Content="Top"  Height="50"/> 
        <samples:GelButton Content="Cream" Height="50"></samples:GelButton>
        <Button Content="Bottom" Height="50"> </Button>
    </StackPanel>    
</UserControl>

Would you be surprised if the outcome looked like this?

I can’t tell you if you should be surprised or not (I am undecided myself), but I can tell you what happened!

The control by default is lookless. You need to define the look for it. This is accomplished by assigning a valid ControlTemplate to the control [via the Template property in the Control class].

To assign the Template property, you could do some thing like:

public GelButton ()
{ 
this.Template = XamlReader.Load ("<ControlTemplate xmlns='http://schemas.microsoft.com/client/2007'
 ><Grid ..> </Grid></ControlTemplate>");

}

but a better way to do it is to store the control template in a generic.xaml Resource Dictionary and then magically the run-time, will pick it up from there. Your template would be associated to your control via the TargetType attribute when defining the resource. This template would now become what we call the “built-in style”.

Here are the details on creating a built-in style.

Generic.xaml is a ResourceDictionary –a property bag for resources – that you include in your assembly, at the root of the project. If you are a WPFer you might be thinking it should be in themes\generic.xaml, I hear that is where it might end up, but for now (Silverlight 2 beta1), it needs to be in the root of the project. The default (empty) resource generic.xaml could look like this:

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
> 
</ResourceDictionary>

For defining the look & feel for our GelButton we need to start with some default template. Long term, this will be a right click inside Blend (like in WPF); temporarily since Blend does not yet support styling, I would recommend is using David Anson’s handy Stylebrowser application to copy the default Style for button and paste it into the resource dictionary.

[unfortunately the default button template is too verbose, so for practical purposes here I am going to use a much simpler template].

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:samples="clr-namespace:StylingSample;assembly=StylingSample"
>
    <Style TargetType="samples:GelButton">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="samples:GelButton">
                    <Grid x:Name="RootElement" >
                        <Ellipse Width="{TemplateBinding Width}" 
                            Height="{TemplateBinding Height}" 
                            Fill="{TemplateBinding Background}"
                        /> 
                        <ContentPresenter 
                        Content="{TemplateBinding Content}" 
                        ContentTemplate="{TemplateBinding ContentTemplate}" 
                        Foreground="{TemplateBinding Foreground}" 
                        VerticalAlignment="Center" HorizontalAlignment="Center"
                        />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Let’s dissect the work needed to create this template:

Added a xmlns:samples to the resource dictionary.
Notice the slightly different syntax from the namespaces you add to say a UserControl; in generic.xaml I included the assembly (which is the name of my DLL).
If I had tried xmlns:samples="clr-namespace:StylingSample; with out the assembly=”StylingSample” it would not work. [trust me, I make that mistake often].
Next I defined the style and I told it the TargetType I wanted this Style to be applied to; you usually do this when defining a Style so your template can do discovery of the properties and validate these, but when doing this in generic.xaml, the magic that happens on built-in templates uses this information to create a relationship (or I would say bind) between this Style and the type; now when ever the type is instantiated, if no other style is applied, this style will be used as the default style.
The rest is simple styling stuff. TemplateBinding is probably the most interesting part, this creates a binding between the property we are setting and the actual controls’ property. For example: <ContentPresenter Foreground={TemplateBinding Foreground}" > creates a bind between the content presenter’s foreground and the Foreground in the actual control. This will our UI styleabe from within the tools. Inside Blend or in XAML you can declare a button <GelButton Foreground=”Red” > or a <GelButton Foreground=White> and get flexibility as the template will get the value carried through. F
For more info on all of this you should watch Karen Corby’s MIX presentation on “Rich,Dynamic UIs” ..

Now, I can run the same code, with changing nothing other than the Resource dictionary I added and I get:

Since I did create a Templatebinding for background/Foreground , I can even have some fun.. After all, I promised some “meat”.. Need food!! sorry about that it is 1:30 PM ..

<UserControl x:Class="StylingSample.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" 
    xmlns:samples="clr-namespace:StylingSample">
    <StackPanel Width="50" Margin="0,20,0,0">
        <samples:GelButton Content="" Height="20.4" 
                RenderTransformOrigin="0.5,0.5" Width="48.8" Canvas.ZIndex="2">
            <samples:GelButton.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FFF5DEB3"/>
                    <GradientStop Color="#FFE0B05C" Offset="0.826"/>
                </RadialGradientBrush>
            </samples:GelButton.Background>
            
        </samples:GelButton> 
        <samples:GelButton Content="Ham" Height="16" Canvas.ZIndex="1">
            <samples:GelButton.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFD64141"/>
                    <GradientStop Color="#FFE23939" Offset="1"/>
                    <GradientStop Color="#FEDAB6B6" Offset="0.43299999833106995"/>
                </LinearGradientBrush>
            </samples:GelButton.Background>
            </samples:GelButton>
        <samples:GelButton Content="" Height="16"  >
            <samples:GelButton.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FFF5DEB3"/>
                    <GradientStop Color="#FFECC06E" Offset="0.991"/>
                </RadialGradientBrush>
            </samples:GelButton.Background>
        </samples:GelButton>
    </StackPanel>    
</UserControl>

So, I just wasted 10 mins of your time and 40 of mine introducing you to generic.xaml and built-in styles. I had promised to answer a few questions, here they are:

[REF: FAQs on built-in styles]

What are the benefits of built-in styles, why use generic.xaml instead of hardcoding the template?

It is nice to store all your templates in a resource dictionary that you can easily swap – as opposed to having to do it in code-. Imagine you needed to create three themes for your app, doing it with hardcoded templates would be hard.
Also, If you put your Template in the ResourceDictionary the template can now reference other resources in the dictionary itself.

Why is it that all examples I have seen are not using built-in styles? we are always told to apply the style inline from App.xaml

Built-in styles are designed for control authors, when you write a control, you provide look & feel. If you look at example above, I had to inherited from Button class. Most samples are purely styling a button, so they take a different approach.

In the financials demonstrator, you inherited from Button and did nothing other than provide the built-in style, is this a best practice?

I liked that approach (but I come from an enterprise background where we create bloated frameworks that often inherit just to create an abstraction in case some thing changes later) ; the one benefit you get is you can use your button any where with out having to explicitly refer to a style.
The disadvantage of course is that inheriting takes a bit of extra performance and memory; but this is pretty negligible from what I have seen.

Again, I don’t call it a best practice, more of a personal preference for me. If you look at financials demonstrator now, I ended up adding a property later UseReflection, so now the button does have a reason to be its own class.

Built-in styles sounds like I can change it all in one place? I don’t want to crowd my code with <Button Style=”{StaticResource GelButtonStyle}” >.

That is right, if you can afford inheriting and the classes are not sealed. That said, after building a few solutions I realized I had a false sense of centralization [yes I made up the term].
The argument is

1) With built-in styles, I can change the style in one place. It is the same using App.xaml you change the style itself in one place for all. What you are replicating a lot is the name of the style, but the style itself is in one place.

When can I not use built-in styles?
if the class was sealed or they had protected the Template property then you would not be able to use this.

Can I just create a generic.xaml and override the System.Windows.Controls templates with out inheriting?
Not that I know of. It does not sound like a good idea; I tried it just to see if it worked and it did not work for me.

Is applying a built-in style going to break or affect my state and parts?
No. As long as your style uses the same names, the code will still pick all that as if it was an inline Style.

We would not need built-in styles if you allowed TargetType every where, including on regular dictionaries, like WPF does.
Fair point, these features are all being considered for later versions after 2.0 stay tuned, right now this way works, it is flexible and comprehensive.

Will this approach work with Blend? Will I still be able to style in Blend.

Yes! Blend works with this already; that is how it picks the look & feel for System.WIndows.Controls today.

Why do styles & Control templates always go together? Can I just do my Control template?
My personal opinion is that if you need a template and not the style your template might be too stringent or too hard coded; it would be the equivalent of writing a ControlTemplate that does not have any TemplateBinding on it; don’t get me wrong, I am not saying this is wrong, I am just saying 99% of the time, this does not happen. With regards to simply providing the ControlTemplate in generic.xaml, I don’t believe that would work.

In the financials demonstrator, you named your class Button, for some thing that inherited from Sysetm.Windows.Controls.Button.. Is using the same name required?

Absolutely not. I chose the name because I was going to override all controls, but I ended up changing my mind and that made it more confusing. Sorry about that; the name does not matter (as long as it does not conflict); from experience calling it Button will confuse you, don’t do that.

If I use the built-in style, does that mean a ‘consumer’ of my button will not be able to style the button later?

No! A consumer will still be able to style the button later and as well as override your template.

OK, I need to go eat. This at least answers the questions I had; will try to come back to this at a different time.

Silverlight instantiation on 2.0

jaimer — Fri, 04 Apr 2008 02:10:54 GMT

On my Deep zoom Post, I recommended that for Deep Zoom applications you instantiate the control using Silverlight.js to avoid the Click To Activate.

Some one picked on this and asked why the new default is using OBJECT. Here is what I know (and most of it comes from past emails with Piotr Puszkiewicz).

Using the OBJECT tag has a few advantages:

Customizing the experience is much easier .. All you do is put your install experience inside the object tag. For example, the defult puts an anchor with the GetSilverlight image:

<object data="data:application/x-silverlight," …> 
<!—This is the isntall experience –-> 
  <a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
    <img src=http://go.microsoft.com/fwlink/?LinkId=108181 
      alt="Get Microsoft Silverlight" style="border-style: none"/>
  </a>
<!—- end of  install -->
</object>

No javascript dependency. If your page is hosted some where, your might not be allowed to bring javascript but might not have the object tag blocked, so now you can instantiate with no Javascript.
One less file to download – which is a huge deal for high traffic portals and hosters.
Much easier to create the ‘embed’ or send to a friend feature if you are sending an object tag. This one (and #2) are coupled with the fact that XAPs can be loaded across domains.

So why did we default to <OBJECT /> ??
Well, because Click To Activate is going away. IE team announced it and given they said it was in april, we are within 28 days of this happening.. [Should we start a pool?].

For those of us creating samples today, we obviously have a choice for a few more weeks; I will remain partial to silverlight.js; if you want to come, here is how I get my instantiation:

I created a dummy Silverlight 1.0 solution using Blend 2.5 March CTP.
This creates a good default.html that I can reuse.
I then copied the silverlight.js from “\program files\microsoft sdks\silverlight\v2.0\tools\ directory to my new solution.
[I did it mostly because I noticed that was the one updated last and I know the install team put it there]
Now you edit the default.html to:
1. Comment out the <script> include for page.xaml.js
  <!-- <script type="text/javascript" src="Page.xaml.js"></script>—>
2. Comment out the var scene = new Page() declaration.
  //var scene = new SLOn.Page();
3. Change the source parameter in createSilverlight call to point to your XAP instead of the XAML file
  Silverlight.createObjectEx({
  source: "ClientBin/hello.xap",
4. Comment out the onLoad handler, which refers to the scene we removed in #1.
  // onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
An optional step that I usually do is change the control’s style so it takes 100%
#silverlightControlHost {
            height: 100%;
            width: 100%;
        }
Another optional step is adding the style for body and html so there is no padding:
html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
If you were doing this for production you would probably also want to tweak the onError handler in createSilverlight..
After that, I copy my default.html and silverlight.js to the web directory where my solution is at, and browse/navigate to it.

You can get my sample default.html and silverlight.js from here.

Disclaimer: this approach is good for developer samples, for a production app please follow the Silverlight Installation Experience Guide.

Open source charting library for Silverlight 2..

jaimer — Wed, 02 Apr 2008 22:31:38 GMT

Visifire has a free, open-source library for 2D and “3D looking” charts built using Silverlight 2.. Very cool!!

For me, this is obviously handy when creating demos and showing Silverlight capabilities; for commercial use they also have a commercial license..

Emailing them to see if they would be interesting on working with us for their charts to be styled in Blend; in the mean time enjoy the charts and play with them..

A deepzoom primer ( explained and coded)..

jaimer — Tue, 01 Apr 2008 08:56:00 GMT

I had to learn DeepZoom recently and along the way I put together some handy notes .. below are the notes organized in a near step-by-step explanation format. This is a very long post, but I hope it has useful insights for any one wanting to do deepzoom so I recommend you read it all. If you must skip, then the outline will help you. imo, part 3 and 5 are the good stuff.

Part 1 – The history and brief explanation on how DeepZoom works.

Part 2 – Constructing a DeepZoom image using Image Composer

Part 3 – Introduction to the DeepZoom object model – goes way beyond the docs I hope

Part 4 – Coding a deepZoom ‘host’ user control with Pan & Zoom

Part 4.1 – Adding a few extra features to our User Control

Part 5 – Lessons learned on the code, documenting the gotchas **must read even if you know Deep Zoom already

Part 6 – Give me the code, just a zip file w/ the goodies

Part 7 – Show me the outcome; what did we build?

Part 1 – The History & Math behind DeepZoom

A lot of people equate DeepZoom to SeaDragon – they assume SeaDragon was the code name and DeepZoom is the marketing name-. This assumption is not quite right (unless you equate your engine to your car model). Seadragon is an incubation project resulting from the acquisition of Seadragon Software; the Seadragon team is part of the Live organization and are working on several projects (like Photosynth). DeepZoom is an implementation that exposes some of the SeaDragon technology to Silverlight.

DeepZoom provides the ability to smoothly present and navigate large amounts of visual information (images) regardless of the size of the size of the data, and optimizing the bandwidth available to download it.

How does DeepZoom work?

DeepZoom accomplishes its goal by partitioning an image (or a composition of images) into tiles. While tiling the image, the composer also creates a pyramid of lower resolution tiles for the original composition.

The image to the right shows you what a pyramid; the original image is lowest in the pyramid, notice how it is tiled into smaller images, also notice the pyramid creates lower resolution images (also tiled). A few of the docs I read said the tiles are 256x256, but from peeking through the files generated by the composer I am not convinced; I do know from reading through the internal stuff that there is some heavy math involved here, so I trust they tile for right size :).

All of this tiling is performed at design-time and gets accomplished using the DeepZoom composer.

At run-time a MultiScaleImage downloads a lower resolution tile of the image first and downloads the other images on demand (as you pan or zoom); DeepZoom make sure the transitions from lower to higher res images are smooth and seamless.

Given all this, how is Deepzoom different than say a ScaleTransform (for zoom) on a high resolution image?

With a ScaleTransform, usually you would download the whole high res image at once; this delays how quickly the end user gets to see the image when the page or application loads. Some times people apply a trick where you use different resolutions images, since you are not tiled you will likely end up downloading several big images (consuming more network bandwidth) or the download time will continue to be high if the initial downloaded image is not small enough, also the transitions from low to higher res are going to be more noticeable unless your write the transitions yourself.

DeepZoom and its tiling make it possible to see bits quicker and can optimize for bandwidth. In the worst case scenario where some one looked at every single one of the tiles at the highest resolution, DeepZoom would have an extra overhead of 33% compared to downloading the single highest resolution image at once, but this ‘worst case’ scenario is almost never hit, most of the time DeepZoom can save you from downloading too much.

Another feature in DeepZoom is its ability to create ‘collections’ from the composite image. This provides you the ability to compose a scene ( group of images ), optimize them for speed & download, but still maintain the ‘autonomy’ and identity of the image, you can programmatically manipulate (or position) these images from within the DeepZoom collection (more on collections in part 4).

Part 2 – Constructing a DeepZoom Image using DeepZoom composer

We begin by downloading the "DeepZoom composer" from Microsoft Downloads.
If you want a great reference for the tool, try the DeepZoom Composer guide. In the steps below, I am going to keep it to the minimum steps needed and some of the gotchas when using the tool.
After installing the DeepZoom Composer, we launch it.
Trivia facts: Composer is a WPF application, like most of the other Expression products. Also, codename was Mermaid (you can see this from the export window).

Under the File Menu, select "New Project"

Select a location to store the project.
I recommend some thing with a short path like c:\users\jaimer\. The composer has some usability issues that make working with long paths a little hard; and the composer will append to your path later when you export.
I called it "EasterEggHunt" as that is what my project will be.

Now click "Add Image" to import a few images.
You can import multiple images at once. In my case, I am importing 3 images: bummysmall.jpg, eggs.jpg, and world2.jpg). These are in the inputimages directory if your are following along with the source.

This added all the images we are going to use in the composer. All images must be added at design-time.
Click "Compose" on the Center toolbar to compose the DeepZoom image.
Double click the world image to add it to the 'stage' or design surface.
Click Fit To Screen to maximize our space.
Click on the eggs image to add it to the stage.
Zoom many times into the image at a place where you want to drop some easter eggs.
1. Hint: the Usual short cuts of Ctrl+ and Ctrl- do work for zooming. Unfortunately Pan(h) and Select(v) don't work.
Shrink the easter eggs into a small size -- don't worry, with DeepZoom we will be able to Zoom a lot at run-time to find them and see them.
Drop the easter eggs where you want to. He is an example of mine, I dropped them in Mexico. Notice I am quite zoomed into the map and the eggs are small.
Repeat the steps in 11 for the bunny picture. In my case, I did it in Seattle area.
Note: unfortunately I could not figure how to drag same image twice into stage area. The work around I used is to make a copy of the image with different name, and add it to the image gallery ( Step 4).
Click Ctrl-0 to see our DeepZoom Image with out the zooms. You sized it right if you can't easily see the eggs and bunny in the map.
CLick "Export" in the main toolbar.
Here we enter the settings for output.
Leave the "generate collection" unchecked for now.
What Generate Collection does is exports the DeepZoom Image with metadata and at run-time the images can be accessed via the MultiScaleImage.SubImages property. If you can get to these images, you can move them around the composed image ( for layout ) you can also tweak their Opacity.
The reason I am leaving them unchecked is beause there seems to be a bug (at least on my machine) where if I click Generate Collections my images at run-time show at an offset of where they are supposed to be. I have reported it to the DZC team and they are investigating.
Enter a Name ( "Easter" on the export Dialog).
I leave the Output path untouched.
This is where having entered a short path in Step 2 above would pay up because their Path dialog does not Wrap and it is fairly small. [Kirupa already said this is improving for next version]. If you opt to change the path, be attentive when you export again, it seems to reset to its default value.
Now, assuming your output looks similar to mine above, (Create Collection unchecked) Click Export and we are done when it says Export Completed.

Part 3 - DeepZoom Object Model

Once you have a DeepZoom image, you will need an instance of the MultiScaleImage class in your silverlight application to load that image. Instantiating the MultiScaleImage class can be done from XAML

<MultiScaleImage x:Name="DeepZoom" Source="easter/info.bin" />

or from code:

MultiScaleImage DeepZoom = new MultiScaleImage () ;

DeepZoom.Source = new Uri ( “easter/info.bin”) ;

Before going through the DeepZoom API it makes sense to understand the terminology used:

Logical Coordinates – is a normalized value (0 to 1) representing a coordinate in the image itself (not the control)
Element Coordinates – is the actual control coordinates. For example in a MultiScaleImage of Width=800, Height =400, when the mouse is at the center, the element coordinates are 400,400. These coordinates are not normalized.

Now, we navigate through the interesting properties and methods in MultiScaleImage

Source – refers to the Image source; usually info.bin when not using collections or items.bin if using collections.
SubImages – when using collections, this is a reference to all the images in a composed DeepZoom Image.
ViewportWidth – Specifies the width of the parts of the image to be displayed. The value is in Logical coordinates.
For example:
Width=2 means image is zoomed out and only takes half the space available.
To zoom in, a viewport < 1 is required. ViewportWidth of 0.5 is a 200% zoom.
ViewportOrigin – the Top,Left corner for the parts of the image to be displayed. This is returned in Logical coordinates. For example, imagine I am panning by 10% each time and I pan twice to the right while zoomed in at 100% (so no zoom), my ViewportOrigin.X will be 0.2.
UseSprings – gets or set whether DeepZoom animates the transitions ( like ZoomAboutLogicalPoint, updates to ViewportOrigin, etc. ).

The interesting methods are:

ElementToLogicalPoint – takes a coordinate of the control, and gives you a logical ( normalized coordinate).
For example, mouse at Center (400,400) with ViewportWidth=1 and you call ElementToLogical ( ) will return (0.5, 0.5)
LogicalToElementPoint – takes a logical coordinate (normalized) and returns a point in the MultiScaleImage control where that logical point corresponds to.
ZoomAboutLogicalPoint – implements the Zoom. The two parameters are the new zoom multiplier - as an increment from current zoom factor in the image - and the Logical point at which to zoom around.
Example of the incremental zoom would be to ZoomAboutLogicalPoint ( 1.5, 0.5, 0.5) .. I will be zoomed in to 1.5 times; if I repeat this operation with same values I am zoomed in at 1.5 * 1.5 which is 2.25 times from size where I started.

In my opinion, surprisingly missing from the API were:

The original width and height of the DeepZoomImage (so that I can translate normalized logical coords to physical on the image).
Zoom – to tell you the current total Zoom level; this one you can get around by keeping track of any zooms you implement. Another possible workaround is that Zoom appears to be 1/ViewportWidth; I can’t think of the scenario where this does not hold, if there is please let me know and again just keep track of your zooms if that happens.

Part 4 – Coding a DeepZoom Host User Control

The goal here is to code a sample reusable control just to illustrate the points; along the way we will of course implement enough features for our Easter Egg Hunt. [Update: Sorry about belatedness, I started this on 3/22 but had a trip that prevented me from playing around, so I am late from easter]

Inside Visual Studio 2008, create a new Silverlight Application; I called it DeepZoomSample.
Build the application so the Clientbin directory is created.
Copy the output from the DeepZoom Composer to the Clientbin directory of our Silverlight application.
In my case, I called the output “Easter” so I can go into the output directory from composer and just copy that whole directory to my Silverlight Application’s ClientBin.
Now that we have our image, we can edit the XAML in Page.Xaml, to show the image.
```
<UserControl x:Class="DeepZoomSample.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    >
    <Grid x:Name="LayoutRoot" Background="White">
        <MultiScaleImage x:Name="DeepZoom" Source="easter/info.bin" /> 
    </Grid>
</UserControl>
```
If you run the application now, you will see the image loads but there is no functionality: zoom and pan have not been implemented.
For zoom, we need to use the mouse wheel, but Silverlight has no native support for it. A good work around is to use Peter Blois’ MouseWheelHelper. This class uses HTML Bridge to listen to the mouse wheel event in the browser and exposes the events to managed code.
Add a new code file to your project, I called it MouseWheelHelper.
Copy Peter’s code below into the MouseWheelHelper file.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;

namespace DeepZoomSample
{
    // this code came from Peter Blois, http://www.blois.us/blog
    // Code ported by Pete blois from Javascript version at http://adomas.org/javascript-mouse-wheel/
    public class MouseWheelEventArgs : EventArgs
    {
        private double delta;
        private bool handled = false;

        public MouseWheelEventArgs(double delta)
        {
            this.delta = delta;
        }

        public double Delta
        {
            get { return this.delta; }
        }

        // Use handled to prevent the default browser behavior!
        public bool Handled
        {
            get { return this.handled; }
            set { this.handled = value; }
        }
    }

    public class MouseWheelHelper
    {

        public event EventHandler<MouseWheelEventArgs> Moved;
        private static Worker worker;
        private bool isMouseOver = false;

        public MouseWheelHelper(FrameworkElement element)
        {

            if (MouseWheelHelper.worker == null)
                MouseWheelHelper.worker = new Worker();

            MouseWheelHelper.worker.Moved += this.HandleMouseWheel;

            element.MouseEnter += this.HandleMouseEnter;
            element.MouseLeave += this.HandleMouseLeave;
            element.MouseMove += this.HandleMouseMove;
        }

        private void HandleMouseWheel(object sender, MouseWheelEventArgs args)
        {
            if (this.isMouseOver)
                this.Moved(this, args);
        }

        private void HandleMouseEnter(object sender, EventArgs e)
        {
            this.isMouseOver = true;
        }

        private void HandleMouseLeave(object sender, EventArgs e)
        {
            this.isMouseOver = false;
        }

        private void HandleMouseMove(object sender, EventArgs e)
        {
            this.isMouseOver = true;
        }

        private class Worker
        {

            public event EventHandler<MouseWheelEventArgs> Moved;

            public Worker()
            {

                if (HtmlPage.IsEnabled)
                {
                    HtmlPage.Window.AttachEvent("DOMMouseScroll", this.HandleMouseWheel);
                    HtmlPage.Window.AttachEvent("onmousewheel", this.HandleMouseWheel);
                    HtmlPage.Document.AttachEvent("onmousewheel", this.HandleMouseWheel);
                }

            }

            private void HandleMouseWheel(object sender, HtmlEventArgs args)
            {
                double delta = 0;

                ScriptObject eventObj = args.EventObject;

                if (eventObj.GetProperty("wheelDelta") != null)
                {
                    delta = ((double)eventObj.GetProperty("wheelDelta")) / 120;

                    if (HtmlPage.Window.GetProperty("opera") != null)
                        delta = -delta;
                }
                else if (eventObj.GetProperty("detail") != null)
                {
                    delta = -((double)eventObj.GetProperty("detail")) / 3;

                    if (HtmlPage.BrowserInformation.UserAgent.IndexOf("Macintosh") != -1)
                        delta = delta * 3;
                }

                if (delta != 0 && this.Moved != null)
                {
                    MouseWheelEventArgs wheelArgs = new MouseWheelEventArgs(delta);
                    this.Moved(this, wheelArgs);

                    if (wheelArgs.Handled)
                        args.PreventDefault();
                }
            }
        }
    }
}

MouseWheelHelper fires a Moved Event whenever the Wheel moves. The EventArgs is a MouseWheelEventArgs, which has the delta property. Delta is a normalized property (0 to 1), for now all we look at is whether it is greater than 0 or not.
If Delta is greater than 0, then the wheel has rotated away from the user; if Delta is a negative number, then the wheel has rotated toward the user.
Before we handle the Moved event, let’s add a ZoomFactor property to our control, this will be the increment/decrement on a wheel operation. The default value is 1.3, which is a 30% increment. Nothing scientific behind this number, I am pretty much just ‘copying’ what I see every other sample do. I think the number works OK.
```
 protected double _defaultZoom = 1.3; 
       public double DefaultZoomFactor
       {
           get
           {
               return _defaultZoom; 
           }
           set
           {
               _defaultZoom = value; 
           } 
       }
```
We also add a CurrentTotalZoom property, this will be a cached version of overall zoom level (since we can’t query this from the MultiScaleImage API. I also added a MaxZoomIn and MaxZoomOut to prevent the image from going too far in (is there such a thing?) or too far out. Too Far out did matter as the image can disapper if you go too far. In my case I picked my Maximum values arbitrarily.

private double _currentTotalZoom = 1.0;

       public double CurrentTotalZoom
       {
           get { return _currentTotalZoom; }
           set { _currentTotalZoom = value; }
       }

       private double _maxZoomIn = 5000;
       protected double MaxZoomIn
       {
           get { return _maxZoomIn; }
           set { _maxZoomIn = value; }
       }
       private double _maxZoomOut = 0.001;

       protected double MaxZoomOut
       {
           get { return _maxZoomOut; }
           set { _maxZoomOut = value; }
       }

Now, we can add a DoZoom function to our class, this will be called when there is a Zoom operation. The parameters for it are: the new Zoom level RELATIVE to where the image is at, and a point in Element Coordinates since most likely we will be zooming around the mouse, and we get Element coordiantes out of that.

/// <summary>
      /// Performs a Zoom operation relative to where Image is at. 
      /// Example, call DoZoom twice with a Zoom of 1.25 will lead to an image that is zoomed at 
      /// 1.25 after first time and ( 1.25 * 1.25 for second time, which is a 1.56
      /// </summary>
      /// <param name="relativeZoom"> new zoom level; this is a RELATIVE value not absolute.</param>
      /// <param name="elementPoint"></param>
      void DoZoom(double relativeZoom , Point elementPoint)
      {
          if (  _currentTotalZoom * relativeZoom < MaxZoomOut ||
                _currentTotalZoom * relativeZoom > MaxZoomIn) 
              return; 
 
          Point p = DeepZoom.ElementToLogicalPoint(elementPoint);
          DeepZoom.ZoomAboutLogicalPoint(relativeZoom, p.X, p.Y);
          this.Zoom = relativeZoom;
          _currentTotalZoom *= relativeZoom; 
                }

Now we are ready to handle the MouseWheelHelper.Moved event. We will do it in three parts:
1. We will subscribe to MouseMove event in the MultiScaleImage, so we can keep track of where the mouse is; we need this because MouseWheelHelper.Moved does not give us a MousePosition, and there is no way to query MousePosition in Silverlight2 outside of a Mouse EventHandler.
  
  // inside the Loaded event for the user control
  //{
  DeepZoom.MouseMove += newMouseEventHandler(DeepZoom_MouseMove);
  _lastMousePosition = new Point ( DeepZoom.ActualWidth /2 , DeepZoom.ActualHeight /2);
  //}
  
  protected Point _lastMousePosition;
  
  void DeepZoom_MouseMove(objectsender, MouseEventArgs e)
  {
  _lastMousePosition = e.GetPosition(DeepZoom);
  }
2. Now we instantiate a MouseWheelHelper and subscribe to Moved event
  
  // inside the Loaded Event for UserControl
  MouseWheelHelper mousewheelhelper = new MouseWheelHelper(this);
  mousewheelhelper.Moved += newEventHandler<MouseWheelEventArgs>(OnMouseWheelMoved);
3. We add the OnMouseWheelMoved function to the UserControl class..
```
void OnMouseWheelMoved(object sender, MouseWheelEventArgs e)
{   
   // e.Delta > 0 == wheel moved away, zoom in 
   if (e.Delta > 0)
   {
      DoZoom( DefaultZoomFactor, _lastMousePosition);
   }
   else
   {
      // Zoom out 
      DoZoom( 1/ DefaultZoomFactor, _lastMousePosition);
   } 
}
 
```
4. NOTE: If you compare the source above with the code in the sample source, they are slightly different.
  In the sample source there is two approaches to handling Zoom, and there is a boolean flag called _useRelatives that controls this. if you set _useRelatives to true, it will zoom based in relation to a last zoom; I think this makes it more complicated but for some reason most samples I have seen of DeepZoom use this calculation. I think the behavior is the same than the approach I took, but the math is simpler with the approach in the steps above. I did add both in case I find later that there was a scenario addressed by the _useRelatives approach.
At this point we should be able to run the application and get Zoom to work (in and out) around the mouse location. Compile the app and run it to make sure we are making progress.
To Pan, we need to detect the MouseLeftButtonDown and MouseLeftButtonUp, the assumption is we will pan when the mouse is down, and pan in the direction of the Mouse movement and then stop panning when the mouse is up.
1. Let’s add a handler for MouseLeftButtonDown, we add the listener in the UserControl’s Loaded event. This handler will set a variable called _isDragging to flag that the mouse is down; we will use this flag on the MouseMove handler.
  
  // inside the Loaded function, we add code behind our MouseWheelHelper code added earlier..
  DeepZoom.MouseLeftButtonDown += newMouseButtonEventHandler(DeepZoom_MouseLeftButtonDown);
2. The handler looks like this:
```
protected bool _isDragging = false;
protected Point _lastDragViewportOrigin; 
void DeepZoom_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
            this._lastDragViewportOrigin = DeepZoom.ViewportOrigin;
            this._lastMousePosition = e.GetPosition(DeepZoom);
            this._isDragging = true; 
           
}
```
3. Now we subscribe to MouseLeftButtonUp, inside Loaded function and we add the handler function for it.
  
  // The one liner below goes in the Page_Loaded event handler
  DeepZoom.MouseLeftButtonUp += newMouseButtonEventHandler(DeepZoom_MouseLeftButtonUp);
  
  void DeepZoom_MouseLeftButtonUp(objectsender, MouseButtonEventArgs e)
  {
  this._isDragging = false;
  }
4. Now we tweak the code inside MouseMove to Change the ViewportOrigin to perform the Pan operation.
```
void DeepZoom_MouseMove(object sender, MouseEventArgs e)
{
  if (_isDragging)
  {
   Point newViewport = _lastDragViewportOrigin;
   Point currentMousePosition = e.GetPosition(DeepZoom);
   newViewport.X += (_lastMousePosition.X - currentMousePosition.X) 
/ this.DeepZoom.ActualWidth * this.DeepZoom.ViewportWidth;
   newViewport.Y += (_lastMousePosition.Y - currentMousePosition.Y) 
/ this.DeepZoom.ActualWidth * this.DeepZoom.ViewportWidth;
   this.DeepZoom.ViewportOrigin = newViewport;
   _lastDragViewportOrigin = newViewport; 
  }
  // NOTE: it is important this be after the isDragging check … 
  // since this updates last position, which is used to compare for dragging. 
 _lastMousePosition = e.GetPosition(DeepZoom);
}
```
5. We should also detect the MouseLeave event, and if we are in the middle of a Pan, we need to reset the _isDragging flag.
  
  // inside the UserControl Loaded handler DeepZoom.MouseLeave += newMouseEventHandler(DeepZoom_MouseLeave);
  void DeepZoom_MouseLeave(objectsender, MouseEventArgs e)
  {
  this._isDragging = false;
  this.DeepZoom.Cursor = Cursors.Arrow;
  }
That is it for the basics and the ‘hard stuff’ … with not too many lines of code, we have Zoom & Pan in our host. Along the way we added a few properties we can reuse to create UI around our DeepZoom image.

Part 4.1 Adding more UI to navigate in a DeepZoom Control.

In the last sections I took it slow and walked through the code to explain what we were working on. Going forward below will pick up the pace a bit, and the original code will be tweaked to get into a host control with a bit more navigation and troubleshooting advise.

We begin by adding a Navigation wheel to the UserControl.xaml. The wheel has four repeat buttons with arrows pointing east,west,north, south; these buttons will be used to pan in the respective direction.

At the center of the wheel, there is a regular button, which takes you home ( to where there is no Zoom, no panning, etc. )

Implementing Panning is done by changing the viewportOrigin. We have a choice of Panning relative to control size and relative to ImageSize. Let me explain:

If the controls ViewPortWidth is 1.0 – and we pan by a Logical increment of 0.1 we are panning 10 percent on a direction. This % seems reasonable.
If however we are zoomed in 500% ( viewportWidth = 0.2 ) and we do a Pan of 0.1 (logical) then we are going to pan by a lot ( 50% of what is visible). So we need to scale our original 0.1 increment by the ViewportWidth. Don’t you think?

Here is what I did:
1. Added a Property of type double called PanPercent. This property holds the increment. You can set it from XAML; default is 0.1 ( aka 10% )
2. Added a property of type bool called UseViewportScaleOnPan. If this is true, we will pan by PanPercent * ViewportWidth; if this is false we pan by PanPercent.

Now we are ready for Panning. We add event handlers for all our Pan RepeatButtons:

this.PanRight.Click += new RoutedEventHandler(PanRight_Click);
this.PanLeft.Click += new RoutedEventHandler(PanLeft_Click);
this.Home.Click += new RoutedEventHandler(Home_Click);
this.PanBottom.Click += new RoutedEventHandler(PanBottom_Click);
this.PanTop.Click += new RoutedEventHandler(PanTop_Click);

Each of the event handlers calls the Pan function with their respective direction:

void Pan(PanDirection direction)
{
double percent = PanPercent; 
            
if ( UseViewportScaleOnPan ) 
    percent *= this.DeepZoom.ViewportWidth; 
switch (direction)
{               
   case PanDirection.East:
      this.DeepZoom.ViewportOrigin =
         new Point(this.DeepZoom.ViewportOrigin.X - Math.Min(percent, this.DeepZoom.ViewportOrigin.X),
      this.DeepZoom.ViewportOrigin.Y);
         break; 
   case PanDirection.West:
       this.DeepZoom.ViewportOrigin =
           new Point(this.DeepZoom.ViewportOrigin.X + Math.Min(percent, (1.0 - this.DeepZoom.ViewportOrigin.X)),
            this.DeepZoom.ViewportOrigin.Y);
                    break; 
    case PanDirection.South :
         this.DeepZoom.ViewportOrigin =
          new Point(this.DeepZoom.ViewportOrigin.X ,
           this.DeepZoom.ViewportOrigin.Y + Math.Min( percent, 1.0 - this.DeepZoom.ViewportOrigin.Y));
        break; 
     case PanDirection.North :
          this.DeepZoom.ViewportOrigin =
             new Point(this.DeepZoom.ViewportOrigin.X,
             this.DeepZoom.ViewportOrigin.Y - Math.Min( percent, this.DeepZoom.ViewportOrigin.Y));
          break; 
     } 
}

Panning to Home is a combination of setting the ViewportOrigin to 0,0 and setting the ViewportWidth to 1

void Home_Click(object sender, RoutedEventArgs e) {
this.DeepZoom.ViewportOrigin = new Point(0, 0);
this.DeepZoom.ViewportWidth = 1; }
Next thing is to implement Zoom in and Zoom Out; these are also trivial, the only decision to make is where to Zoom, I needed two approaches:
When Zooming using keyboard, Ctrl+ Ctrl- (on Windows) I wanted to Zoom at the mousePosition.
When zooming using the magnifying glass icons I added to the UI, I can not use the mousePosition – as I knew the mouse was where the magnifying glass – so I zoomed around the center of the control.

Let’s begin with simple ZoomIn using Click from magnifying glass:

void btnZoomIn_Click(objectsender, RoutedEventArgs e)
{
ZoomIn( newPoint( DeepZoom.ActualWidth / 2 , DeepZoom.ActualHeight / 2));
}
```
/// <summary>
/// Zooms in around an ELEMENT Coordinate..  
/// I technically did not need this function to abstract and could have called DoZoom directly 
/// </summary>
/// <param name="p"></param>
void ZoomIn( Point p )
{
    if (_useRelatives)
        DoRelativeZoom(Zoom / DefaultZoomFactor, p, ZoomDirection.In);
    else
        DoZoom(DefaultZoomFactor, p );
} 
```
When zooming from Keyboard. The “gotcha” was that the DeepZoomImage is a FrameworkElement and it does not receive focus (in Silverlight Focus is at Control class), so what I did was listen for Keyboard event in the Grid that is the top container in my Host UserControl.
```
this.LayoutRoot.KeyUp += new KeyEventHandler(DeepZoom_KeyUp);
```
Another surprise was that + (by pressing Shift+9) on my machine turned out to be a keycode, not a standard key. I am not a keyboard expert in Silverlight (yet) but from what I read, keycodes can be different across platform so I added code to check in case I am running in the Mac. I checked using the Environment.OSVersion property. Please double check this code, as I was pretty lazy about what running on Windows or Mac means.
public bool RunningOnWindows
        {

            get
           {
                return(
                    Environment.OSVersion.Platform == PlatformID.Win32NT ||
                    Environment.OSVersion.Platform == PlatformID.Win32S);

            }
        }

Now we do the Zoom, note that I am not too confident on my Mac KeyCodes; I got this by sniffing on my Mini but I have a regular,ergonomic Microsoft keyboard on that mini so double check with your keyboard just in case.

void DeepZoom_KeyUp(object sender, KeyEventArgs e)
{
            
if (e.Handled == true)
   return;

if ( ( RunningOnWindows && ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control) &&
     (e.Key == Key.Add || (e.Key == Key.Unknown && e.PlatformKeyCode == 0xBB)))  ||
     ( RunningOnMac && ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control) &&
     (e.Key == Key.Add || (e.Key == Key.Unknown && e.PlatformKeyCode == 0x18 )))
                 
    )
    {
       ZoomIn( _lastMousePosition); 

    }
    else if ( 
      (RunningOnWindows && ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control) &&
      (e.Key == Key.Add || (e.Key == Key.Unknown && e.PlatformKeyCode == 0xBD)))||
      ( RunningOnMac && ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control) &&
      (e.Key == Key.Add || (e.Key == Key.Unknown && e.PlatformKeyCode == 0x1B )))
     )
   {
      ZoomOut( _lastMousePosition );
   }            
             
   e.Handled = true;
 }

At that point our app would be functionally complete but I want to share a few more findings from my learning so let me share the DebugSpew, it can be handy for you too.
1. When I wrote my first deepZoom app, I took the usual approach of databinding to it so I can reverse engineer it and found a few issues; since I am traveling I have not discussed them w/ DeepZoom folks in depth for now take these as “gotchas in beta1” and will try to get some one from DeepZoom team to confirm if these are ‘final’ behaviors (feel free to leave feedback here or at the expression blog) letting them know your preferences.
  - Databinding to MultiScaleImage was a bit flaky.   ViewportWidth and ViewportOrigin did not fire notifications for me. The explanation I have seen is that because DeepZoom animates with springs, binding to these properties was not recommended. These values will change every frame during a transition.   The recommended workaround was to subscribe to the MotionFinished event. This fires at the end of a transition, so gives me a nice way to pull the value. In my case (for debug/learning deepZoom), the workaround was very acceptable so I implemented it.
    
    // in my loaded event for the page
    DeepZoom.MotionFinished += newRoutedEventHandler(DeepZoom_MotionFinished);
    
    void DeepZoom_MotionFinished(objectsender, RoutedEventArgs e)
    {
       if(DebugSpew.DataContext != null)
       {
             MultiScaleImageDummyDataWrapper dw = DebugSpew.DataContext asMultiScaleImageDummyDataWrapper;
             if(dw != null)
             {
                      PullData(refdw, refDeepZoom);
                      MouseLogicalPosition = DeepZoom.ElementToLogicalPoint(_lastMousePosition);
               }
    
            }
    
    }
```
void PullData(ref MultiScaleImageDummyDataWrapper data, ref MultiScaleImage msi)
{
            data.ViewportWidth = msi.ViewportWidth;
            data.ViewportOrigin = msi.ViewportOrigin;
            data.AspectRatio = msi.AspectRatio;
            data.UseSprings = msi.UseSprings; 
             
} 
```
  - Databinding to the other properties (that are not animated per frame) in MultiScaleImage also gave me a bit of trouble [some times the control would not show up]. My advise is to not data bind for now.
  - Once I had the databinding worked out, I added a handler to pull data from the MouseMove so I could show coordinates when Mouse is moving, I wanted them in logical and element coordinates, so I did the translation and I added an extra call from MotionFinished to translate the point again as the logical Coordinate changes when the Viewport changes.

Part 5 – Lessons learned

Overall I was quite impressed with DeepZoom. it is pretty cool stuff; I wish I had some cool pictures for a better application, but I did not try since I knew I could not top memorabilia.

My personal advise: do not databind to DeepZoom for now. Pull to it on Motion Finished.
No keyboard input goes into DeepZoom (since it is a FrameworkElement). In order to have keyboard input you must have a Control that has focus; since keyboard events bubble you can handle Keyboard input at a higher level (e.gl LayoutRoot, just check to see if it has not been handled previously).
On my real app –which can’t be shared as it was a customer’s app –. I ran into an issue when using Collections. My images were showing up in the wrong place. I reported it already and they are investigating –during the shower, where I do my best thinking- I came with the theory that is the resolution independence in WPF ( 96 to 72 DPI conversion). I have not confirmed.
I did not discuss collections in the post, so will try it here. Collections are cool because it gives you access to your Subimages so you can manipulate them. Move them around, scale them, animate position and Opacity. For now, beta1 has only one Collection; I think it would be cool to have multiple collections so you can aggregate. This can kind of be simulated via logic, but would be nice if it was in the control. If you simulate it, the advise I was given is do not simulate it by overlaying two MultiScaleImage controls one on top of the other, there are a few known issues with interactions on overlays (though to be honest I tried it and did not run into issues).
UseSprings= true is pretty cool, but pending how quick you want to do your panning/zooming, turning it off can make your app appear more responsive. I would not turn UseSprings off for a consumer facing app, but I would consider doing it for an internal app.. For example, I am doing a Heatmap with lots of data in it, for analytical purposes. Since it is drill through I am considering it.
When panning, make sure you handle MouseLeave on your control.
Handling mouse wheel is not available out of the box is trivial but Peter Blois has a great solution. Do not write the code to handle wheel. Peter’s code works great so far. Check his blog for updates too, he has a nice abstraction now to the same API.
If you skipped section 3, check it out. Understanding the object model is critical and takes 5 mins.
If you are writing a DeepZoom application, I recommend you use the old instantiation via silverlight.js … Click To Activate will eventually go away in IE, but in the mean time it is pretty annoying for an app that is so visual and so focused on mouse navigation.
If subscribing to MultiScaleImage.OpenImageSucceded make sure you do it from your constructor right after initializeComponent. I tried to do it of UserControl.Loaded and when doing a load on a page with image cached that is too late.
If possible try to ‘hold’ any operations until OpenImageSucceded has fired ( no pans, zooms before that). I saw weird results if I try to access properties on MultiScaleImage before this event; in particular if you access the SubImages collection before ImageOpenSucceded, then I would get an empty collection and when ImageOpenSucceeded was fired, the collection would not be overridden; so advise for collections is don’t touch SubImages before the OpenImageSucceeded fires.

Part 6 – Source

Is at Skydrive

Part 7 – Show me the app.

You can see it here; it is not visually impressive but I think it shows a bit of what you can do with DeepZoom and most important it is functional code you can quickly refactor and reuse. If I missed a common deepZoom task let me know.

I added two extra “easter eggs” beyond the bunny and the eggs above in the walk through.

One is for the NCAA basketball team for my college, which won yesterday and made it to the Final Four tournament . (Hint, the four finalists are: Kansas, Memphis, UCLA and North Carolina.
The other one is a bitmap with dates & locations for my upcoming Europe trip (Germany, Austria).. If you are in the area and available the nights I am in the area, ping me and we can get together to discuss any thing .NET client related (e.g. WPF, Silverlight, and ASPX).

Part 8 -- Thanks

Thanks to Tim Aidlin who chose the colors and gave me cooler icons for the map; I butchered them a bit when I turned them into controls so don’t hold it against him, he is a gifted designer –you can see his real work on the MIX website and any thing else MIX08 branded.

Microsoft's "client" strategy for next few years became real at MIX08 ( and is incredibly exciting if you ask me) ..

jaimer — Mon, 17 Mar 2008 11:46:00 GMT

Below are my scribbles during my flight back from MIX.
I considered not publishing this because it feels 'too positive' (or too marketing-like).. if you don't like those, please skip (no harm).
I am sharing to see if any one has feedback. I also want to share for people to understand my current thinking - it will explain future blog posts-. that said, don't unsubscribe to the RSS, I won't have many posts like this one.

If you only have 3 mins, skip to the "Why I am excited section"..

-------------------------

As I fly back from MIX I am thinking of my daughter's upcoming second birthday ( she was born a few weeks after the very first MIX).
Every day I am amazed at how fast she has developed in just two years. This week, I realized another amazing transformation that has happened in same timeframe: Microsoft's client technologies have evolved significantly. At MIX08, Microsoft communicated a very coherent vision for a comprehensive all-inclusive application platform. Microsoft backed up the vision with some pretty impressive customer applications.

The message after Day 1 keynote was:

From Ray Ozzie: Microsoft is looking strongly at a 'Connected' world ( Enterprise, Consumer, Devices, Entertainment). We are position quite well to address such broad challenge.
From Scott Guthrie: Microsoft has quickly become a very strong competitor in the RIA space; we are tackling it from all angles:
- Continued innovation to maintain leadership on video quality and to to maintain lowest cost of ownership to video content providers.
- Innovation around other consumer technologies (e.g. DeepZoom) that are included in the Silverlight platform.
- Tooling for developers and designers.
- A comprehensive, extensible, performant platform to address the needs of most RIA scenarios and a client continuum for existing Windows desktop customers; if you need a desktop application you can leverage the same skills (.NET, XAML) and same tools ( Blend, Visual Studio), etc. You can even share the codebase with a few tweaks..
- Strong commitment to cross platform and cross browser, now emphasized by adding Windows mobile and Symbian OS into the equation (via the Nokia announcement).

You could be thinking this is "blue koolaid", but we backed it up with strong partner scenarios. Among the evidence:

NBC Olympics is trusting Microsoft Silverlight with a once every four years. This is their most aggressive online broadcast project ever.
- The app looked great too. I don't think this was transparent, but the app was coded using Silverlight 2. I am a virtual part of that team and can tell you the bits were real; it was working code and you should expect to see some of it
Hard Rock Cafe showed Memorabilia, an amazing showcase for Microsoft's DeepZoom technology. I am a big fan of DeepZoom, I think is going to revolutionize how we navigate content and how we interact with displays ( screens, surface, phones).
AOL showed their new email client written in Silverlight 2. They showed impressive styling capabilities for personalization; they also showed seamless advertisement integration and kept raging on the performance improvements they are seeing. I could be wrong because I am not intimate with this project but it sounded like some of the improvements are via caching on the isolated storage provided by Silverlight (so it goes beyond standards-based) web.
- The client looked pretty good and I kept thinking if they have a Silverlight 2 client, why not make a WPF client and get out of the browser?
Aston Martin showed several amazing applications: a Silverlight application and a WPF application (interacting with XNA). Beyond their cars being amazingly cool, the demos stood by themselves on the technical aspects clearly demonstrating the on-going need (in some scenarios) for desktop applications ( 3D, hardware acceleration, access to devices, etc.)
Cirque Du Soleil had a casual and entertaining demonstration of the very complex recruiting and staffing process they go through. I think the biggest highlight of their application is the reuse of the XAML across channels; they used the same XAML and same business objects on their off-line desktop application and their web based application.
- I was a virtual contributor on the Cirque application so I am hoping to get to do another post with some of the details; it was a very interesting show case of "why smartclient".
There were some WPF demonstrations of their performance improvements around effects. I was standing next to one of our marketing folks when they showcased it; she was not that impressed, looked at me with a "this is geeky stuff, is not it?" and all I could say was "extensibility at this level is very complex and incredibly powerful, this is big for some ISVs and Enterprises".

That was the executive message.. Why does this excite me so much?

This new convergence on the client stack with XAML + .NET is incredibly powerful; this is one of those 1 + 1 = 3 catalysts.

Here are just a few of my reasons ( in random order):

I spend my time in the Enterprise, where there is still a countless number of requirements that I think is ONLY addressed by smart client applications (which is different from off-line RIA), I think .NET and Visual Studio have a strong positioning in that space; with all the new improvements to WPF ( you should see Rob Relyea's MIX talk) I think WPF adoption will continue to grow, and now we can extend or complement those smart clients with web applications with out compromising on performance, experience, or security.
This possible reuse for cross platform is going to excite those ISVs that have been holding back in migrating from MFC or Windows Forms to WPF; I think it is now confirmed that the future (for .net developers) is in XAML. This is going to lead to faster adoption of .NET 3.x, it will lead to a larger partner ecosystem ( aka component vendors), more trained developers, more books, more content, etc. It is a good cycle that feeds itself.
I think the Silverlight platform has enough 'advantages' to continue bringing new customers/scenarios, we are making great progress on the media (video) space, with DeepZoom we are getting a niche on a 'large data navigation space', etc. As Scott mentioned we are above > 1.5 million of Silverlight installs per day; that number will continue to go up with Silverlight 2.
A case in point is the Move networks announcement from MIX, which I forgot to include on the highlights above.
Silverlight is also going to allow a lot of existing web developers to greatly improve their apps. I know plenty of people who do asp .net development and have tried web technologies like Java, Flash, Flex, etc. and have not embraced these other technologies because they did not like the development environment, languages, performance, did not have the skills, etc.; with Silverlight we are giving .NET (server-side) web developers the option to embrace a richer (client-side) web experience with out having to learn new skills, we are also giving them a flexible sandbox ( e.g. isolated storage, x-domain calls, File Access, etc.) that helps them extend their reach to the desktop with out compromising on security.
I like the Microsoft offering because it has a solid foundation in .NET; you get best of breed tools, incredible flexibility around languages ( C#, VB, JScript, Ruby, IronPython, etc.), comprehensive libraries ( e.g. Web services stack, or LINQ for data access,); as I look at other platforms out there, I am not sure they have the raw power, developer flexibility, architecture, same performance, same language capabilities, etc.
I have to wonder, will competitors be able to keep up as a comprehensive platform? will they need a major re-design that is going to slow them down?
I like XAML and the WPF concepts as a declarative UI platform but I think there is more to these than it being mark-up; the platform was designed with markup in mind and the platform supports it well. I go back to my point above where I look at competing platforms and have to wonder about their foundations and ability to 'evolve' to a 100% declarative model. I think WPF has foundations (for example the property system) that you need to have in order to get to a pure and clean declarative model.

I know there are challenges to overcome, but I see no major blockers and I do think time is on our side.

Ubiquity is likely the current 'concern' people will raise; you will hear Flash has ~90% ubiquity and Silverlight is just getting started; I respect that, but I am optimistic because Flash and Silverlight co-exist quite well (they are not mutually exclusive like Windows and Mac OS were); all it takes is for a user to go to a site that needs Silverlight for it to be installed. These are tiny/free plug-ins we are installing so I expect the installs to continue moving fast..

That sums up my excitement post MIX. In a few words, I think Silverlight's cross-platform opportunity is going to be the catalyst or accelerator for both RIA and Desktop applications written using .NET and XAML; I am excited about what will come in the next 12 to 18 months.