Silverlight 2 conversion and clipping regions

Directory

Under the magnifying glass

Rotate in 3D space

A simple method for field video coverage

Silverlight 2 is still in beta at the time of this writing, but when you read this article you should be close to its release date, which supports multithreading, networking, browser integration, isolated storage, strong typing, reflection, and more. But the most wonderful thing about Silverlight is its excellent graphics processing capabilities.

Silverlight 2 combines a vector-based XAML rendering engine with a browser-based version of the CLR and a Microsoft. NET Framework base Class library. Developers and designers can achieve some amazing results after they have mastered the XAML. The key to many of the visual visuals in Silverlight applications is the transformation and clipping regions. For example, in the May 2008 version of the Cool Code, the page-flipping framework provided ("Silverlight paging") is largely dependent on the transformation and clipping area features to create the same page-flipping effect in the browser as the actual book or magazine.

With the help of transformations and clips, you'll get more cool tips that you'll soon learn. But first you should know that the examples provided here are built and tested using Silverlight 2 Beta 2, so you might need to make some modifications when using the Silverlight 2 RC and RTM version implementations.

Under the magnifying glass

Windows presentation Foundation (WPF) programmers sometimes use VisualBrushes to create virtual Magnifier effects similar to Figure 1. Silverlight does not support VisualBrush, which makes developers think (and even claim) that similar effects cannot be achieved in Silverlight applications.

Figure 1 Silverlight Magnifier in operation

Fortunately, you can simulate a magnifying glass in Silverlight, which requires only a little flexibility in the transformation and clipping area features. The Magnifier application described here demonstrates the specific process. Figure 2 shows the Page.xaml file for a simplified version of the Magnifier application. It declares two almost identical Canvas, each containing a copy of the content described in Figure 1. The first Canvas (Maincanvas) is what the user usually sees. The second Canvas (Zoomcanvas) is the same as the first one contained, but it also contains a scaletransform that enlarges the display to 4 times times the content.

Figure 2 Page.xaml

<usercontrol x:class= "Magnifier.page"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" >
<grid x:name= "LayoutRoot" background= "BLACK"
Mouseleftbuttondown= "Onmouseleftbuttondown" mousemove= "OnMouseMove"
mouseleftbuttonup= "Onmouseleftbuttonup" >
<canvas x:name= "Rootcanvas" width= "height=" >
<!--Main Canvas-->
<canvas x:name= "Maincanvas" canvas.left= "0" canvas.top= "0"
Width= "height=" "900" background= "BLACK" >
<canvas canvas.left= "canvas.top=" width= "620" height= "470" >
<rectangle canvas.left= "0" canvas.top= "0" width= "620"
height= "470" fill= "white"/>
<image canvas.left= "Ten" canvas.top= "Width=" height= "450"
Source= "Images/bobcat.jpg"/>
</Canvas>
<canvas canvas.left= "canvas.top=" "540" >
<line canvas.left= "0" canvas.top= "0" x1= "0" y1= "0" x2= "620"
y2= "0" stroke= "#808080" strokethickness= "3"
strokedasharray= "1,1"/>
<textblock canvas.left= "0" canvas.top= "ten" foreground= "white"
Fontsize= "text=" "BVM BobCat"/>
<textblock canvas.left= "0" canvas.top= "foreground=" "white"
Fontsize= "textwrapping=" Wrap "width=" 620 "text=" ... "/>
<line canvas.left= "0" canvas.top= "180" x1= "0" y1= "0" x2= "620"
y2= "0" stroke= "#808080" strokethickness= "3"
strokedasharray= "1,1"/>
</Canvas>
</Canvas>
<!--Zoom Canvas-->
<canvas x:name= "Zoomcanvas" canvas.left= "0" canvas.top= "0"
Width= "height=" "900" background= "Black" visibility= "collapsed" >
<Canvas.RenderTransform>
<scaletransform centerx= "0" centery= "0" scalex= "4" scaley= "4"/>
</Canvas.RenderTransform>
<Canvas.Clip>
<ellipsegeometry x:name= "Lens" center= "0,0"
radiusx= "radiusy="/>
</Canvas.Clip>
...
<path canvas.left= "0" canvas.top= "0" stroke= "#808080"
strokethickness= "1" >
<Path.Data>
<ellipsegeometry x:name= "Lensborder" center= "0,0"
radiusx= "radiusy="/>
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Grid>
</UserControl>