Silverlight, SOHCAHTOA, and Me

My newest Wicked Code column in MSDN Magazine is now online. The title is “Silverlight Tips, Tricks, and Best Practices,” and it contains useful information for building better Silverlight apps. I previewed one of the topics discussed in the column in an earlier blog post. Now you can read all about it and download the sample code, too.

Meanwhile, if you want a sneak peek at what I’m working on next, check out this demo. You’ll see the cover of the November 1988 issue of Microsoft Systems Journal, which was then the name of MSDN Magazine. You can flip through the magazine by dragging the mouse over the pages with the left button held down.

Of course, page turns are nothing new in Silverlight. What’s different about this is that I built a general-purpose page-turning framework that makes page turns simple as pie. Basically the entire app boils down to a few simple function calls:

// Instantiate the page-turn framework

_ptf = new PageTurnFramework(_control, _control.content.findName(‘PageTurnCanvas’));

// Add pages to the framework

_ptf.addPage(_control.content.findName(‘EvenPage0’), _control.content.findName(‘OddPage0’));

_ptf.addPage(_control.content.findName(‘EvenPage1’), _control.content.findName(‘OddPage1’));

_ptf.addPage(_control.content.findName(‘EvenPage2’), _control.content.findName(‘OddPage2’));

  .

  .

  .

// Initialize the framework

_ptf.initializeFramework();

The XAML is dirt-simple. You just declare canvases for your pages and register them with the framework:

<Canvas x:Name=“PageTurnCanvas“ Canvas.Left=“0“ Canvas.Top=“100“>

  <!—First page –>

  <Canvas x:Name=“EvenPage0“ Canvas.Left=“0“ Canvas.Top=“0“ Width=“400“ Height=“618“>

    <Rectangle Width=“400“ Height=“618“ Fill=“Black“ />

  </Canvas>

  <Canvas x:Name=“OddPage0“ Canvas.Left=“400“ Canvas.Top=“0“ Width=“400“ Height=“618“>

    <Image x:Name=“FrontCover“ Width=“400“ />

  </Canvas>

    .

    .

    .

</Canvas>

The canvases carry no special requirements, because all the transforms, clipping regions, event handlers, storyboards, etc. needed to support page-turning are added dynamically. Better yet, the canvases can contain virtually anything; they’re not limited to just images. And the page-turning canvas can be the whole app or just part of the app; it stands alone.

How does SOHCAHTOA figure into the equation? Well, I spent many long hours working out the math for the clipping regions and transforms required to do page turns. The math was mostly geometry and trig, and it involved lots of SOHCAHTOA. Remember SOHCAHTOA? For some reason, it’s stuck with me since ninth grade. It’s an acronym for Sine = Opposite / Hypotenuse, Cosine = Adjacent / Hypotenuse, and Tangent = Opposite / Adjacent. For example, if you know the lengths of the two perpendicular legs of a right triangle and want to compute the angle between either of those legs and the hypotenuse, you simply divide the length of the side opposite the angle you’re after by the length of the side adjacent to it and compute the arctangent. Sounds simple, but it’s the key to doing fancy things with transforms in Silverlight.

<

p class=”MsoNormal”>I vote for SOHCAHTOA as the greatest mathematical formula of all time. Everybody knows E=mc2, but how often do you use it? I can’t count the number of times SOHCAHTOA has come to my rescue.