Silverlight 2.0 Deep Zoom using MultiScaleImage Control

This is my first Silverlight 2.0 tutorial. I have seen MIX keynote yesterday and was really impressed with Hard Rock's Memorabilia sample http://memorabilia.hardrock.com/. I tried to reproduce the sample but could not find any documentation about Deep Zoom. After some search, I found a tool released by Microsoft called "Deep Zoom Composer". You can download the tool from here . And you can get the user's guide from here. The composer is very simple, you will import your images, arrange your photos, then export. These steps went smoothly, but I didn't know what I am supposed to do with the exported output, but after some hacking I could display the image, zoom in and out, and move the canvas. So I decided to share how I accomplished these tasks.


Displaying Deep Zoom Content

This is the simplest task, all you need to do is inserting a MultiScaleImage control and set its Source property. But there are a couple of tricks here, first you need to copy the folder that "Deep Zoom Composer" generated to your clientbin folder. The second is that the Source property should refer to your items.bin file if you exported your content with "Create Collection" option selected, or info.bin file otherwise.

Zooming
You can zoom either by using ViewPortWidth property, or better using ZoomAboutLogicalPoint method, the method takes zooming factor, and logical x, y co-ordinates to zoom around. The following code sample shows how to use this method

if (!isCtrlDown)
                    this.DeepZoom.ZoomAboutLogicalPoint(1.5, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y);
                else
                    this.DeepZoom.ZoomAboutLogicalPoint(0.75, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y);

The isCtrlDown field is set in the KeyDown, KeyUp events of the root canvas. I have tried setting the events on the MultiScaleImage control, but it did not fire, not sure why, here is the code
        private void DeepZoom_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Ctrl)
                isCtrlDown = true;
        }

        private void DeepZoom_KeyUp(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Ctrl)
                isCtrlDown = false;
        }   

Moving Content
This is the most tricky part because of the logic needed to handle dragging. But when it comes to the MuliScaleImage control, it is relatively easy and require only one line of code to modify the ViewportOrigin property, here is some sample code
            if (isDragging)
            {
                Point newOrigin = new Point();
                newOrigin.X = this.DeepZoom.ViewportOrigin.X - ((e.GetPosition(this.DeepZoom).X - lastMousePosition.X)/this.DeepZoom.ActualWidth);
                newOrigin.Y = this.DeepZoom.ViewportOrigin.Y - ((e.GetPosition(this.DeepZoom).Y - lastMousePosition.Y) / this.DeepZoom.ActualHeight);
                this.DeepZoom.ViewportOrigin = newOrigin;
            }
You can download the complete sample project with source code from here

Silverlight 1.0 Animation: Checkerboard, blinds, and comb

This post describes how to create a Silverlight 1.0 based checkerboard, blinds, and comb animation. The effect is added to my animation library so you can reuse the effect using a single line of code. You can download the complete source from here. Below is a working sample.

Recipe:

To create your own checkerboard animation using my animation library download the source code and include Animator.jas and XamlObjectFactory.js in your project and reference them in your Silverlight host page. To create an across checkerboard effect, use the following line:

SilverlightRecipes.Animator.checkerAcross('CheckerAcross', sender.findName('ToAnimate'), '1', 10, 10);

The first parameter is a unique ID for the animation storyboard. The ID is required because storyboards added to a UIElment resources must be named. The second parameter is the animation target. The target can be any UIElement. The third parameter is the animation duration in seconds. The third parameter is the number of horizontal checkers, and the fourth parameter is the number of vertical checkers.

To create a top down checkerboard animation use the following line of code:

SilverlightRecipes.Animator.checkerDown('CheckerDown', sender.findName('ToAnimate'), '1', 10, 10);

To create a vertical blinds animation use the following line of code:

SilverlightRecipes.Animator.blindsV('BlindsV', sender.findName('ToAnimate'), '1', 10);

To create a horizontal blinds animation use the following line of code:

SilverlightRecipes.Animator.blindsH('BlindsH', sender.findName('ToAnimate'), '1', 10);

To create a vertical comb animation use the following line of code:

SilverlightRecipes.Animator.combV('CombV', sender.findName('ToAnimate'), '1', 20);

To create a horizontal comb animation use the following line of code:

SilverlightRecipes.Animator.combH('CombH', sender.findName('ToAnimate'), '1', 20);

The idea behind these animations is to use multiple wipe animations with different clippings, start times, and durations to generate the desired effect. For example the clipping for 2*2 checkerboard is a PathGeometry with four PathFigure instances to represent each rectangle of the checkerboard:

<PathGeometry>

<PathGeometry.Figures>

<PathFigure IsClosed="True" StartPoint="0,0" >

<PathFigure.Segments>

<LineSegment Point="0,0" />

<LineSegment Point="0,135" />

<LineSegment Point="0,135" />

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="0,135" >

<PathFigure.Segments>

<LineSegment Point="0,135" />

<LineSegment Point="0,270" />

<LineSegment Point="0,270" />

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="200,0" >

<PathFigure.Segments>

<LineSegment Point="200,0" />

<LineSegment Point="200,135" />

<LineSegment Point="200,135" />

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="200,135" >

<PathFigure.Segments>

<LineSegment Point="200,135" />

<LineSegment Point="200,270" />

<LineSegment Point="200,270" />

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

And the animation is done by a single storyboard with three PointAnimation instances to generate the wipe effect. The following is an example for a 2*2 checkerboard animation:

<Storyboard Duration="00:00:01" Name="CheckerAcross" >

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" To="200,0" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" To="200,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" To="0,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[0].(LineSegment.Point)" To="200,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[1].(LineSegment.Point)" To="200,270" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[2].(LineSegment.Point)" To="0,270" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[0].(LineSegment.Point)" To="400,0" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[1].(LineSegment.Point)" To="400,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[2].(LineSegment.Point)" To="200,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[0].(LineSegment.Point)" To="400,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[1].(LineSegment.Point)" To="400,270" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[2].(LineSegment.Point)" To="200,270" />

</Storyboard>

Easy Silverlight 1.0 Animations: Wheel

This post describes how to create a PowerPoint like wheel animation using Silverlight 1.0. The effect is added to my animation library so you can reuse the effect using a single line of code. You can download the complete source from here. Below is a working sample.

Recipe:

To create your own wheel animation using my animation library download the source code and include Animator.jas and XamlObjectFactory.js in your project and reference them in your Silverlight host page. To create a wheel with a single spin, use the following line:

SilverlightRecipes.Animator.wheel('WheelSingle', sender.findName('ToWheel'), '1');

The first parameter is a unique ID for the animation storyboard, the second parameter is the object to animate. It can be any UIElement like Canvas, Image, TextBlock, or MediaElement. The last parameter is the animation duration in seconds[.fractionalSeconds].

To create 2 spin wheel animation use the following line:

SilverlightRecipes.Animator.wheel2('Wheel2', sender.findName('ToWheel'), '1');

To create 4 spin wheel use the following line:

SilverlightRecipes.Animator.wheel4('Wheel4', sender.findName('ToWheel'), '1');

To create 8 spin wheel use the following line:

SilverlightRecipes.Animator.wheel8('Wheel8', sender.findName('ToWheel'), '1');

This animation is done by creating a PathGeometry with multiple Figures. Each figure is a triangle drawn with two line segments and IsClosed property set to true. The two lines are initialized with the same coordinates. The following example shows the initial clip for a single spin wheel animation for a 400*270 Rectangle

<Rectangle.Clip>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure IsClosed="True" StartPoint="200, 135">

<PathFigure.Segments>

<LineSegment Point="200, 0"/>

<LineSegment Point="200, 0"/>

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="200, 135">

<PathFigure.Segments>

<LineSegment Point="400, 0"/>

<LineSegment Point="400, 0"/>

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="200, 135">

<PathFigure.Segments>

<LineSegment Point="400, 270"/>

<LineSegment Point="400, 270"/>

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="200, 135">

<PathFigure.Segments>

<LineSegment Point="0, 270"/>

<LineSegment Point="0, 270"/>

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="200, 135">

<PathFigure.Segments>

<LineSegment Point="0, 0"/>

<LineSegment Point="0, 0"/>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

Then using a PointAnimation the end point of the second line is moved to make the clipping rectangle grow. Once the PointAnimation is done, another animation is started to simulate the wheel effect. The following snippet is the Storyboard of one second single spin wheel:

<Storyboard Name="WheelSingle" Duration="00:00:01">

<PointAnimation BeginTime="00:00:00" Duration="00:00:0.125" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="ToWheel" To="400,0"/>

<PointAnimation BeginTime="00:00:0.125" Duration="00:00:0.25" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="ToWheel" To="400,270"/>

<PointAnimation BeginTime="00:00:0.375" Duration="00:00:0.25" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="ToWheel" To="0,270"/>

<PointAnimation BeginTime="00:00:0.625" Duration="00:00:0.25" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="ToWheel" To="0,0"/>

<PointAnimation BeginTime="00:00:0.875" Duration="00:00:0.125" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[4].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="ToWheel" To="200,0"/>

</Storyboard>

Easy Silverlight 1.0 Animations: Wipe

Another effect facilitated by the rich animation features of Silverlight. In this post we will explore the addition of PowerPoint like wipe effect. I have added this effect to my animation library so you can do this animation using a single line of code. You can download the complete source from here. Below is a working sample.

Recipe:

To create your own wipe animation, download the source code and include Animator.jas and

XamlObjectFactory.js in your project and reference them in your Silverlight host page. To wipe an object from top use the following line:

SilverlightRecipes.Animator.wipeDown('WipeDown', sender.findName('ToWipe'), '00:00:01');

The first argument is a unique ID for your animation, This has to be unique across the whole XAML structure, otherwise the runtime will complain. The second argument is the object to wipe, it can be an UIElement like Canvas, Image, or MediaElement. The last argument is the duration of the animation. The duration format is the same as the format of the Duration property of Silverlight Animation object. In the example I am using hours:minutes:seconds[.fractionalSeconds] format.

To wipe an object from bottom, use the following line:

SilverlightRecipes.Animator.wipeUp('WipeUp', sender.findName('ToWipe'), '00:0:01');

To wipe an object from left, use the following line:

SilverlightRecipes.Animator.wipeRight('WipeRight', sender.findName('ToWipe'), '00:00:01');

To wipe an object from right, use the following line:

SilverlightRecipes.Animator.wipeLeft('WipeLeft', sender.findName('ToWipe'), '00:01:01');

To create this animation, I created a clip rectangle that grows according to a timeline. The clip property of a Silverlight object. Normally the clip can be set to RectangleGeometry to achieve a rectangular clip, but unfortunately there is no RectAnimation in Silverlight. So as a work around I used a PathGemoetry to draw a clipping rectangle then animates the path segments using PointAnimation. Example clip for top down wipe:

<Rectangle x:Name="ToWipe" Width="400" Height="270" Fill="Black" Visibility="Collapsed" >

<Rectangle.Clip>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure IsClosed="True" StartPoint="0,0" >

<PathFigure.Segments>

<LineSegment Point="400,0" />

<LineSegment Point="400,0" />

<LineSegment Point="0,0" />

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

Example animation StoryBoard for top down wipe:

<Rectangle.Resources>

<Storyboard Duration="00:00:01" Name="WipeDown" >

<PointAnimation Duration="00:00:01" Storyboard.TargetName="ToWipe" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" To="400,0" />

<PointAnimation Duration="00:00:01" Storyboard.TargetName="ToWipe" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" To="400,270" />

<PointAnimation Duration="00:00:01" Storyboard.TargetName="ToWipe" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" To="0,270" />

</Storyboard>

</Rectangle.Resources>

Note: The idea of using PathGeometry instead of RectangleGeometry is based on swirlingmass post on Silverlight forum. The original post can be found here http://silverlight.net/forums/p/1537/3938.aspx#3938

Easy Silverlight 1.0 Animations: Fade
Welcome to the first of a series about creating Silverlight aimations. This post is about dynamically fading objects using a single line of code. Download the complete source. Below is a working sample.



Recipe:
To create your own fade animation, download the source code and include Animator.js and XamlObjectFactory.js in your project and reference them in your Silverlight host page. Add this line to fade in:
SilverlightRecipes.Animator.fadeIn('FadeIn', sender.findName('ToFade'), '100');
Replace 'FadeIn' with a unique ID for the animation. The second argument should be the Object to fade, and the last argument is the duration of the animation in milliseconds. The object to fade can be any UIElement like Canvas, Image, MediaElement, Path, Rectangle, Ellipse, or TextBlock.
To fade out you can use the following line of code:
SilverlightRecipes.Animator.fadeOut('FadeOut', sender.findName('ToFade'), '100');
In a future post I will explain how I implemented the animator library, but currently I am ading more animation and transitions to the library, and I will post them as soon as they are done.