XAML Code for the Silverlight game(Part 2)

As I always like seeing the final product first...here is the whole XAML code needed for the game:

   1:  <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="parentCanvas" Loaded="Page_Loaded" x:Class="PathFinder.Page;assembly=ClientBin/PathFinder.dll" Width="709" Height="558" Background="White">

   2:    <Canvas.Resources>

   3:      <Storyboard x:Name="timer">

   4:        <DoubleAnimation Duration="00:00:0.01" />

   5:      </Storyboard>

   6:    </Canvas.Resources>

   7:    <!--The restart rectangle with a gradient fill-->

   8:    <Rectangle Stroke="#FF000000" x:Name="Restart" Width="149" Height="40" Canvas.Left="550" Canvas.Top="13" RadiusX="15" RadiusY="15" Cursor="Hand">

   9:      <Rectangle.Fill>

  10:        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

  11:          <GradientStop Color="#FF3E9E35" Offset="0"/>

  12:          <GradientStop Color="#FF51FF40" Offset="1"/>

  13:        </LinearGradientBrush>

  14:      </Rectangle.Fill>

  15:    </Rectangle>

  16:    <!--The restart text-->

  17:    <TextBlock Cursor="Hand" Width="97" Height="20" Canvas.Left="581" Canvas.Top="23" TextWrapping="Wrap" x:Name="RestartText" Text="Restart Level"/>

  18:    <!--The congratulations text - Collapsed at first as it should only be visible when the user completes a level-->

  19:    <TextBlock x:Name="Congratulations" Width="303" Visibility="Collapsed" Height="26" Canvas.Left="189" Canvas.Top="529" Foreground="#FFC43E3E" Text="Congratulations you reached your target!" TextWrapping="Wrap"/>

  20:    <!--Static text-->

  21:    <TextBlock x:Name="NumberOfStepsText" RenderTransformOrigin="0.492,-1.333" Width="124" Height="21" Canvas.Left="8" Canvas.Top="529" Text="Number of steps" TextWrapping="Wrap"/>

  22:    <!--The number of moves that the user made-->

  23:    <TextBlock x:Name="NumberOfSteps" Width="49" Height="21" Canvas.Left="136" Canvas.Top="529" Text="0" TextWrapping="Wrap"/>

  24:    <!--The next level rectangle with a gradient fill-->

  25:    <Rectangle x:Name="NextLevel" Visibility="Visible" Stroke="#FF000000" RadiusX="15" RadiusY="15" Width="149" Height="40" Canvas.Left="550" Canvas.Top="77" Cursor="Hand">

  26:      <Rectangle.Fill>

  27:        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

  28:          <GradientStop Color="#FFF48F40" Offset="0"/>

  29:          <GradientStop Color="#FFDBF65C" Offset="1"/>

  30:        </LinearGradientBrush>

  31:      </Rectangle.Fill>

  32:    </Rectangle>

  33:    <!--The next level text-->

  34:    <TextBlock x:Name="NextLevelText" Visibility="Collapsed" Width="94" Height="21" Canvas.Left="584" Canvas.Top="87" Text="Next Level" TextWrapping="Wrap" Cursor="Hand"/>

  35:    <!--Static text-->

  36:    <TextBlock x:Name="UnpassableText" Width="89" Height="21" Canvas.Left="564" Canvas.Top="129" Text="Unpassable:" TextWrapping="Wrap"/>

  37:    <!--The number of unpaassable blocks-->

  38:    <TextBlock x:Name="Unpassable" Width="39" Height="21" Canvas.Left="650" Canvas.Top="130" Text="12" TextWrapping="Wrap"/>

  39:    <!--Static text-->

  40:    <TextBlock x:Name="CurrentLevelText" Width="103" Height="19" Canvas.Left="550" Canvas.Top="154" Text="Current Level:" TextWrapping="Wrap"/>

  41:    <!--The current level-->

  42:    <TextBlock x:Name="CurrentLevel" Width="28" Height="18" Canvas.Left="650" Canvas.Top="155" Text="12" TextWrapping="Wrap"/>

  43:  </Canvas>

The code by itself does absolutly nothing but display some button-like controls. The actual magic occurs behind the scene using C# but that`s another post.
This xaml was generated using Expression Blend May Preview. The file in this form looks like this:



(See Part 3 to see the C# code)