redchilliworx's Blog

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 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

Silverlight XAML

Overview
Extensible Application Markup Language (XAML) is an XML based declarative language that is used in the Windows Presentation Foundation (WPF) and Silverlight to define the user interface and animations. Silverlight implements a subset of features that are available in the .NET Framework 3.0. Thus, certain features used with WPF, such as markup extensions using the curly braces ({ and }), are not available in Silverlight.
The goal of this document is to highlight the main differences from other XML formats you may be familiar with and the syntax you will need to understand to read and create XAML files.
Syntax
Namespaces
The following table lists the namespaces used by Silverlight XAML.
Namespace
Description
http://schemas.microsoft.com/winfx/2006/xaml
The general XAML namespace, usually prefixed with "x".
http://schemas.microsoft.com/client/2007
The Silverlight specific namespace. Note that this is different from WPF even though they share some of the same elements.
Silverlight 1.0 requires that the root node of the document be a <canvas> element. The following example shows a minimal XAML document.
<canvas <br=""/> xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

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

</canvas>

Property Element Syntax
Standard XML lets you set values of elements using attributes or by using the content of an element. Property element syntax is a way to let you specify complex values for object properties. For example, setting a gradient with multiple color stops as a plain string would require specialized formatting that would not easily map to the underlying gradient object. It would also be extremely difficult to extend this format in the future while maintaining backwards compatibility. Property element syntax gives us an easy way to read values and an extensible mechanism that also maps to the actual objects used when manipulating the object in code.
The basic syntax is demonstrated below.
<objectname>
<objectname.propertyname>
<propertyvalue>...</propertyvalue>
</objectname.propertyname>
</objectname> <objectname>
<objectname.propertyname>
<propertyvalue>...</propertyvalue>
</objectname.propertyname>
</objectname>

Thus our gradient example would look similar to the following. Note the use of property element syntax for both Rectangle.Fill and LinearGradientBrush.GradientStops. Rectangle.Fill contains a LinearGradientBrush object and its GradientStops property contains a collection of GradientStop objects.
<rectangle>
<rectangle.fill>
<lineargradientbrush>
<lineargradientbrush.gradientstops>
<gradientstop offset="0.0" color="Red">
<gradientstop offset="0.5" color="Green">
<gradientstop offset="1.0" color="Blue">
</lineargradientbrush.gradientstops>
</lineargradientbrush>
</rectangle.fill>
</rectangle> <rectangle>
<rectangle.fill>
<lineargradientbrush>
<lineargradientbrush.gradientstops>
<gradientstop offset="0.0" color="Red">
<gradientstop offset="0.5" color="Green">
<gradientstop offset="1.0" color="Blue">
</lineargradientbrush.gradientstops>
</lineargradientbrush>
</rectangle.fill>
</rectangle>
While the resulting code required tends to be verbose, it is much more readable for humans than attempting to shrink all of the information above into a simple string. It also leaves the content of the <rectangle> element free to hold the actual visual children that it may contain.
Attached Properties
Attached properties are a way to specify properties on any element, even if element does not natively have that property. Most often you'll see this used to set properties that are related to the parent of the element.
<objectname propertyname="...">

<objectname>
<ownertype.propertyname>
<propertyvalue>...</propertyvalue>
</ownertype.propertyname>
</objectname> <objectname propertyname="...">

<objectname>
<ownertype.propertyname>
<propertyvalue>...</propertyvalue>
</ownertype.propertyname>
</objectname>

For example, setting Top and Left properties are actually dependent on the container in which the element is placed. In the following example, Top and Left are a feature of the parent <canvas> where the resides.
If the was placed within a different type of layout container, such as a <grid> (not supported in Silverlight 1.0), the Top and Left properties would have no meaning as the placement of the object would be based on the Column and Row of the parent grid.
<canvas>
Height="50" Width="50" Fill="Maroon" />
</canvas> <canvas>
Height="50" Width="50" Fill="Maroon" />
</canvas>

Another example is often seen with animations. A <storyboard> needs to know the target object and property of an <animation>. Note the use of parentheses to target an attached property.
<storyboard>
<doubleanimation storyboard.targetname="MyEllipse" storyboard.targetproperty="(Canvas.Left)" <br=""/> To="300" Duration="0:0:1"/>
</storyboard> <storyboard>
<doubleanimation storyboard.targetname="MyEllipse" storyboard.targetproperty="(Canvas.Left)" <br=""/>To="300" Duration="0:0:1"/>
</storyboard>

Events
Events are defined in XAML using attributes in a similar fashion to HTML. The following example attaches the MyCanvas_Loaded() event handler function to the Loaded event of the <canvas> element.
<canvas xmlns="http://schemas.microsoft.com/client/2007" <br=""/> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">
</canvas> <canvas xmlns="http://schemas.microsoft.com/client/2007" <br=""/>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">
</canvas>
It is important to note that in Silverlight 1.0 the event handler functions must be in the JavaScript global scope. As this will make it impossible to create object oriented applications, it is usually better to hook up event handlers in code to achieve better encapsulation.
Triggers are also a way to start an animation purely in XAML without the need for event handler code. See Animation Basics for details including limitations.