MSDN Magazine - April 2008 - (Page 73)

picturespice.com/ps/Polyhedra/default.html. Basically, the application al- lows you to select a shape (a polyhedron) by moving the mouse over it. You are then presented with some information about your selection in the top-right corner of the window and also an animation of a flat template folding to form your chosen polyhedron. Finally, if you click the Cycle button, the program automatically cycles through each of the shapes in turn. Like many Silverlight applications, Polyhedra makes heavy use of XAML, which is a content definition language—a sort of HTML equivalent, but more flexible. Continuing the analogy, while it is possible to create an HTML page using only the HTML document object model (DOM), this is rarely a sensible way to produce content—it’s often time-consuming to code, and it produces pages that are slow to initialize. It’s nearly always best to keep as much of the page as possible as HTML markup and then augment this using JavaScript and the DOM where flexibility is needed. A very similar approach applies to XAML. The fastest way to get content together is to use XAML markup as much as possible and augment this where necessary using a .NET-compliant language such as C# and the Silverlight Media API. The XAML may be hand coded, produced by a design package such as Expression Blend™, generated from a program that is run during the development process, or even dynamically generated on the server. This can require a change of mind-set. It’s all too easy as a C# programmer to end up coding functionality in your natural environment that is best left to XAML. Anything but a very brief taste of XAML would be beyond the scope of this article. However, Charles Petzold covers XAML in great detail in his book Applications= Code+Markup. Here’s the XAML equivalent of the “Hello World” example that we’ve all come to expect when learning new languages: Hello World Using XAML Figure 1 Silverlight Demonstration of Polyhedra The root element is a UserControl. This contains a Grid, which, in turn, contains a TextBlock element with the “Hello World” text. Have a quick look at the UserControl attributes. Without going into too much detail, this defines the equivalent of a codebehind class for the XAML. This class is instantiated at the same time that the XAML is parsed and loaded. You can perform various bits of initialization in the constructor, but to get more elaborate behavior it is often necessary to employ event handlers. This is a key feature of Silverlight. Event handlers can be attached to various XAML objects and implemented in the .NET-compliant language of your choice—a language that, unlike JavaScript, is compiled and therefore opens up all sorts of possibilities that would be otherwise impractical. Returning to the HTML analogy, elements are often grouped inside various DIVs to arrange their location on the page. Simi- larly, in XAML, the shapes are grouped inside Canvases (or other elements such as Grids that are types of Canvas). Just as DIVs are often nested in HTML, so Canvases can be nested in XAML. Most elements in HTML are rectangular. However, XAML supports a whole range of shapes including TextBlock, Rectangle, Polygon, Ellipse, and the very flexible Path, which allows for user-defined shapes. Elements in HTML are identified with an ID attribute, and the equivalent attribute to identify an element in XAML is x:Name, where x is the alias for the XAML namespace. XAML does a lot more than just produce static pages. One of its most powerful features is the use of storyboards as a way to animate changes to the initial UI specified by the XAML. (Something similar, called HTML+Time, was added to HTML in Internet Explorer® 5.0) An example might be to animate a change to the One nice feature of color, visibility, or transstoryboards in Silverlight parency of an object. If used in conjunction with is that they are time-based transforms, storyboards rather than frame-based. can also rotate, scale, or move objects. Storyboards can generate all sorts of animation effects with little or no conventional code. When used in conjunction with triggers, it is, in theory, possible to start various animations automatically when an event such as MouseEnter occurs on an object. Alas, as of the March 2008 Silverlight 2.0 Beta,, the only event handled by a trigger is Loaded. For other events, a small amount of plumbing code is required in the form of an event handler. I expect this situation will change soon, if it hasn’t already done so. One nice feature of storyboards in Silverlight is that they are time-based rather than frame-based. Using multiple independent storyboards tied to different times and events can make a complex behavior simple to implement. After all, the real world doesn’t operate in frames—it’s a hangover from the way that moving pictures were achieved on celluloid. If independent objects are implemented with independent behaviors, it makes for a far simpler life. Some XAML Examples The folding animation in the middle of the Polyhedra application is generated using C# code. However, the bulk of the remainder is april2008 73 http://www.picturespice.com/ps/Polyhedra/ClientBin/TestPage.html

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.