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)
No comments:
Post a Comment