RedChilliWorX Top NEWS

07.Apr.2008
RedChilliWorx is one of the silverlight starter, Microsoft added the Redchilliworx.com for using and implementing his new technology Silverlight on their site and rated as 4.5 out of 5. India's Top Web Designer and professional person is engaged into Creating Silverlight Websites and Applications. >> View more
18.Jan.2008
OasisGraphic.com is owned by redchilliworx.com Microsoft added the Oasisgraphic.com for using and implementing Silverlight on their site and rated as 4.5 out of 5. >> View more

Thanks for such a good effort guys.
Regard's
Ritesh Niranjan

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.
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" targetname="ToAnimate" 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" targetname="ToAnimate" 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" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" to="0,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[0].(LineSegment.Point)" to="200,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[1].(LineSegment.Point)" to="200,270")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[2].(LineSegment.Point)" to="0,270")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[0].(LineSegment.Point)" to="400,0")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[1].(LineSegment.Point)" to="400,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" 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" targetname="ToAnimate" 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" targetname="ToAnimate" 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" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[2].(LineSegment.Point)" to="200,270")
(/storyboard)

Illustrated By Ritesh Niranjan

Silverlight 2.0 Deep Zoom using MultiScaleImage Control

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 ContentThis 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.ZoomingYou 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 ContentThis 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