XAML: Reading the XAML Code

To build games using Silverlight, knowing XAML and how it works is important.  Let’s read some existing code, I have gone over code here very carefully, with a bunch of links to references. 

>>Tutorial on XML<<

Let’s get the XAML definition out of the way:

• XAML is a declarative language with flow control support that uses the standard XML syntax
• This means that XAML does nothing by itself unlike an executable or interpretative language, XAML and XML must have a code behind language.  With Silverlight 1.0, the code behind was javascript, later versions included C#, VB and so forth, javascript is still one of the languages that works with Silverlight.

Now let’s read the code line by line

   1: <UserControl x:Class="RotateThingie.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   4:     Width="400" Height="300">

   5:     <Canvas Height="200" Width="200">

   6:  

   7:         <!-- Rotates the Polyline 45 degrees about the point (0,0). -->

   8:         <Polyline x:Name="thingie" Points="25,25 0,50 25,75 50,50 25,25 25,0" 

   9:     Stroke="Blue" StrokeThickness="10"

  10:     Canvas.Left="75" Canvas.Top="50">

  11:             <Polyline.RenderTransform>

  12:                 <RotateTransform CenterX="0" CenterY="0" Angle="270" />

  13:             </Polyline.RenderTransform>

  14:         </Polyline>

  15:     </Canvas>

  16:  

  17: </UserControl>

Line 1: <UserControl: x:Class=”RotateThingie.MainPage”

• Usercontrol: In Silverlight controls that inherits from UserControl are to:
  • Separate functionality into smaller, manageable pieces of logic that can be created independently from an application and other controls
  • Group related controls that can be used more than once in an application
• x:Class=
  • Configures XAML compilation to join partial classes between XAML and code-behind (JavaScript, VB, C#, etc.)
• “RotateThingie.MainPage”:
  • RotateThingie = namespace, optional, specifies a CLR namespace that contains the partial class identified by classname
  • MainPage = classname, required, specifies the CLR name of the partial class that connects the loaded XAML and your code-behind for that XAML

Line 2: xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

• xmlns attribute specifically indicates the default XML namespace
• Only needed on application and root elements, applies to all child elements

Line 3: xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

• xmlns:x attribute indicates an additional XML namespace, which maps the XAML language namespace http://schemas.microsoft.com/winfx/2006/xaml
• Only needed on application and root elements, applies to all child elements

Line 4: Width="400" Height="300">

• Size of the usercontrol

Line 5: <Canvas Height="200" Width="200">

• Defines an area within which you can explicitly position child elements by using coordinates that are relative to the area.
• Size of the Canvas
• Canvas is not visible if one or more of the following conditions are true:
  • The Height property is equal to 0.
  • The Width property is equal to 0.
  • The Background property is equal to null.
  • The Opacity property is equal to 0.
  • The Visibility property is equal to Collapsed.
  • One of the ancestor objects of the Canvas is not visible.

Line 6: <!-- Rotates the Polyline 45 degrees about the point (0,0). –>

• Comments

Line 7: <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0"
Line 8: Stroke="Blue" StrokeThickness="10"
Line 9: Canvas.Left="75" Canvas.Top="50">

• These three lines define the little image that we are playing with
• Line 7 creates the lines in a plane geometry sense, defining a UI Element that we are working with: Polyline.  Where Points set the lines of the Polyline using space delimited 2-D coordinates
• Line 8 creates a sets the stroke of the lines to Blue and the StrokeThickness to 10 pixels
• Line 9 sets the location of the polyline on the canvas defined on line 5

Line 10: <Polyline.RenderTransform>
Line 11: <RotateTransform CenterX="0" CenterY="0" Angle="270" />

• The two lines 10 and 11 create a Polyline, which is like a Polygon, except the shape doesn’t have to close, although this one does appear to close, it doesn’t the little limb hanging out is one of the polylines.  The Polyline has it’s own coordinates, RenderTransform uses the Polyline’s coordinates
• A UIElement is a base class for most of the objects that have visual appearance and can process basic input in Silverlight

Line 12: </Polyline.RenderTransform>

• Closes the UIElement Polyline.RenderTransform collection

Line 13: </Polyline>

• Closes the Polyline collection

Line 14: </Canvas>

• Closes the Canvas object

Line 15: </UserControl>

• Closes the UserControl

That’s it for today.