MSDN Magazine - November 2008 - (Page 99)

Jeff PRoSiSe Wicked code Silverlight 2 Transforms And Clipping Regions Silverlight is the revolutionary platform from Microsoft for creating highly functional, immersive, interactive browser-based applications. Silverlight 2, which was in beta at the time of this writing but will be nearing release by the time you read this, supports multithreading, networking, browser integration, isolated storage, strong typing, reflection, and much more. But Silverlight is best known for stunning graphics. Silverlight 2 combines a vector-based XAML rendering engine with browser-based versions of the CLR and the Microsoft .NET Framework Base Class Library. Armed with a working knowledge of XAML, developers and designers can make amazing things happen. Key to many of the eye-popping visual effects featured in Silverlight applications are transforms and clipping regions. The page-turn framework presented in the May 2008 installment of Wicked Code (msdn.microsoft.com/magazine/cc507644), for example, relies heavily on transforms and clipping regions to create the illusion of pages turning in a browser the same way they turn in a book or magazine. There are more cool tricks you can pull off with a little help from your friends Mr. Transform and Ms. Clipping, which you’ll see in a minute. But first, be aware that the samples I’ll present were built and tested with Silverlight 2 Beta 2 and thus may require modification to work with Silverlight 2 RC and RTM releases. Figure 1 Silverlight Magnifier in Action Under the Magnifying Glass Windows Presentation Foundation (WPF) programmers sometimes use VisualBrushes to create virtual magnifying glasses like the one pictured in Figure 1. Silverlight doesn’t support VisualBrush, which has led some developers to believe—even to pronounce—that it’s impossible to create similar effects in a Silverlight application. Fortunately, you can simulate magnifying glasses in Silverlight; doing so just requires a bit of ingenuity with transforms and clipping regions. The Magnifier application presented here demonstrates how. Figure 2 shows an abridged version of Magnifier’s Page.xaml file. It declares two almost identical Canvases, each containing a copy of the content pictured in Figure 1. The first Canvas—MainCanvas—is the one that the user normally sees. The second Canvas—ZoomCanvas—contains the same content as the first but also includes a ScaleTransform that magnifies everything by a factor of 4. ZoomCanvas is normally hidden from the user, but when the left mouse button goes down, OnMouseLeftButtonDown (see Figure 3) makes ZoomCanvas visible by toggling its Visibility property. ZoomCanvas is never seen in its entirety. However, its Clip property is initialized with an EllipseGeometry that exposes content in a perfect circle that appears, for all intents and purposes, to be a magnifying glass. You can change the size of the magnifying glass— actually the clipping region—by modifying the EllipseGeometry’s RadiusX and RadiusY properties. If you do, you’ll also want to modify the same properties of the EllipseGeometry named LensBorder to match (that EllipseGeometry draws the border around the magnifying glass). You can see the magnifying glass in action by running the application and clicking and holding the left mouse button anywhere in the scene (even over the text at the bottom of the page). Also observe that moving the mouse with the button held down moves the magnifying glass, too. This is accomplished by modifying the This column is based on a prerelease version of Silverlight 2. All information is subject to change. Send your questions and comments for Jeff to wicked@microsoft.com. Code download available at msdn.microsoft.com/magazine/cc135911. November 2008 99 http://msdn.microsoft.com/magazine/cc507644 http://msdn.microsoft.com/magazine/cc135911

Table of Contents Feed for the Digital Edition of MSDN Magazine - November 2008

Contents MSDN Magazine - November 2008 Toolbox CLR Inside Out Data Points Cutting Edge Security Briefs Test Your Security IQ Agile SDL Access Control Utility Spotlight RIA Test Run Wicked Code Foundations Team System End Bracket

MSDN Magazine - November 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.