MSDN Magazine - April 2008 - (Page 76)

Laying objects around a circle involves stepping the angle up in equal increments of 2*PI/NumSamples and then specifying the center of each sample using a coordinate of x= Radius*Cos(Angle), y=Radius*Sin(Angle). Also, because the canvas positioning objects use Left and Top properties, I needed to offset the center by half the width and half the height, respectively. As you can see, it’s possible to achieve quite a rich UI with XAML and almost no additional code. Even for a large file like Page.xaml, initialization is surprisingly quick. But before I move on, here are a few tips based on my experiences with the current imWhen you get down to it, 3D plementation (March 2008 on a computer screen is an Beta) of Silverlight 2.0. illusion. Regardless of what As I’ve already mentioned, currently triggers manipulations take place, in can only start a storyboard the end a set of ordinary 2D automatically (via the Bepolygons is being displayed gin method) for the Loaded on the monitor surface. event. For other events, a small amount of plumbing code is required in the form of an event handler like this: public void MouseEnterHandler( object o, EventArgs e) { this.MouseEnterStoryBoard.Begin(); } } InitializeComponent(); this.animationTimer.Completed += new EventHandler(animationTimer_Completed); void animationTimer_Completed(object sender, EventArgs e) { [ Do a frame of animation ] this.animationTimer.Begin(); } Tips for Working with XAML The September Refresh of the Silverlight 2.0 Alpha changed the requirements for storyboards so that an animation must now have a target even if it’s not used: If you adopt a naming convention for your storyboards, such as the object name followed by the event name, you can cut down greatly on the number of separate event handlers that you need to code. For example, this method is used in Polyhedra as a shared event handler for all the samples in the circle: public void MouseEnterHandler( object o, EventArgs e) { this.triggerStoryboard(o,”MouseEnter”); } private bool triggerStoryboard( object o, string eventType) { Canvas el = o as Canvas; string name= el.GetValue(NameProperty) as String; Storyboard sb = el.FindName(name + eventType) as Storyboard; if (sb != null) sb.Begin(); return (sb != null); Don’t try to have lots of separate Silverlight controls on the same HTML page. My first implementation of Polyhedra used a separate control for each sample in the circle, and it was a real memory hog. This may, in some cases, mean moving content from HTML to XAML to cut down on the number of controls you are using. One of the advantages of XAML is that it offloads a lot of the routine stuff in the UI, allowing you to concentrate on the creative problem domain code. In this example, the problem domain involves the folding of templates to form the 3D shapes, which leads us to the next section. How to Fold a Polyhedron } With the Silverlight 2.0 Beta, the main initialization (calling InitComponents) has moved from a Loaded event handler to the constructor for the codebehind object. This is more elegant, but beware that not everything is possible in the constructor. For example, it’s not possible to call Begin or Pause on a storyboard here, so this will still need to be done in an event handler. As I discovered from Andy Beaulieu’s asteroid-blasting Silverlight Rocks! sample (www.andybeaulieu.com/Home/tabid/67/EntryID/73/ default.aspx), a good way to achieve a code-based animation is to use a storyboard set to a short time period and have a Completed event handler that does a frame of animation and then restarts the storyboard: public Page() { // Constructor for “code-behind” // Required to initialize variables I suspect that Charles Petzold’s book, mentioned earlier, is an adaptation of a far older, pre-object-oriented book by Niklaus Wirth called Algorithms+Data Structures=Programs. Even after all these years, it remains one of the most influential books that I have ever read, and, despite all the changes in languages and paradigms that have taken place since then, it is still highly relevant. The basic tenet of the book is an approach to development that consists of identifying what data structures can best model your problem, then identifying what algorithms can process or modify these data structures. When tackling a non-standard program, this is an approach that I often adopt. I played around with various approaches before settling on the one finally used in Polyhedra. I wanted to see how little information I could practically start with to achieve the folding animation. It turns out that, since all the sides are the same length, it’s almost possible to do everything just from the knowledge of which faces are connected to which in a given polyhedron. This suggests a graph data structure. Before reaching the final XAML output, a set of algorithms are used to process the graph through two separate tree data structures. All of this will be explained later. Although Windows® Presentation Foundation (WPF) can support 3D in XAML, Silverlight only supports 2D by default because cross-browser compatibility is far easier to achieve when you don’t have to worry about what Graphics Processing Unit (GPU) hardware is in the machine. Of course, when you get down to it, 3D on a computer screen is an illusion. Regardless of what manipula- 76 msdnmagazine Silverlight Animations http://www.andybeaulieu.com/Home/tabid/67/EntryID/73/default.aspx http://www.andybeaulieu.com/Home/tabid/67/EntryID/73/default.aspx

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

MSDN Magazine - April 2008 Contents Toolbox CLR Inside Out Basic Instincts Cutting Edge Foundations Test Run Service Station Windows with C++ Going Places { End Bracket }

MSDN Magazine - April 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.