Const TILE_WIDTH As Integer = 90
Private _mapCanvas As Canvas
Private _groundLayer(,) As TerrainTile

public sub New(mapCanvas as Canvas)
  me._mapCanvas = mapCanvas
end sub

public sub CreateGroundLayer(width as integer, height as integer)
  ...
end sub

• Redimension the _groundLayer private variable to be the size of the height and width
  

  ReDim me._groundLayer(height, width)
  
  

  
  
• create the height For loop
  

  For y as integer = 0 to height-1
  ..
  Next
  
  

  
  
• Inside the height Loop, declare the width For loop
  

  For x as integer = 0 to width -1
  ..
  Next
  
  

  
  
• Inside the width Loop, comes the meat and potatoes of this method
  • Assign the current iteration values of width (x) and height(y) to the appropriate point in the _groundLayer array and define that location in the array as a new TerrainTile object with the specified width and height modified by the constant TILE_WIDTH
    

    me._groundLayer(y,x) = new TerrainTile(x*TILE_WIDTH, y*TILE_WIDTH, TILE_WIDTH, TILE_WIDTH)
    
    

    
    
  • Assign an image to that location in the array so the background has a visible layer to the user. This image path is relative to the Application project and not the Web Project. When all is said and done, the image will be compiled into the XAP file that is loaded into the Web Project for use in the Web project.
    

    me._groundLayer(y,x).SetImage("images/sl_composite.png")
    
    

    
    
  • Add the _groundLayer(,) array location to the _mapCanvas object that was passed to the class.
    

    me._mapCanvas.Children.Add(me._groundLayer(y,x))
    
    

• Remove the Grid Tag, that is already pre-loaded, and replace it with a Canvas tag. Again remember not to play with the UserControl tag and its attributes.
  

  <Grid> --> <Canvas>
  ..
  </Grid> --> </Canvas>
  
  

  
  
• Inside the Canvas tag, add 2 Polygon tags with these attributes
  Remeber to always name your objects, even in XAML as descriptive as possible since you will most likely be massaging them in the codebehind. Very similar to naming a TextBox object starting with a "txt" or "box". Try to be as descriptive as possible without going overboard.
  

  <Polygon x:Name="UpperLeftPoly">
  ...
  </Polygon>
  <Polygon x:Name="LowerRightPoly">
  ...
  </Polygon>
  
  

  
  
• Inside each of the Polygon tags you will need to add a ImageBrush tag. These 2 tags you will be adding will define the area in which you will be drawing the image you defined earlier.
  

  <Polygon x:Name="UpperLeftPoly">
    <Polygon.Fill>
      <ImageBrush x:Name="UpperImage" /> 
    </Polygon.Fill>
  </Polygon>
  <Polygon x:Name="LowerRightPoly">
    <Polygon.Fill>
      <ImageBrush x:Name="LowerImage" />
    </Polygon.Fill>
  </Polygon>
  
  

• Create the Constructor of the new XAML class.
  The first line of all XAML constructors must be the Initialize Component. As this will basically Load the document before you operate on it.
  

  Public Sub New(xPos as integer, yPos as integer, width as integer, height as integer)
  InitializeComponent()
  ..
  End Sub
  
  

  • Define the UpperLeftPoly Polygon points
    

    UpperLeftPoly.Points = new PointCollection
    UpperLeftPoly.Points.Add(New Point(xPos, yPos))
    UpperLeftPoly.Points.Add(New Point(xPos + width, yPos))
    UpperLeftPoly.Points.Add(New Point(xPos, yPos + height))
    
    

    
    
  • Define the LowerRightPoly Polygon points
    

    LowerRightPoly.Points = new PointCollection
    LowerRightPoly.Points.Add(New Point(xPos + width, yPos))
    LowerRightPoly.Points.Add(New Point(xPos + width, yPos + height))
    LowerRightPoly.Points.Add(New Point(xPos, yPos + height))
    
    

  
  
• Define the SetImage method
  

  Public Sub SetImage(imgResource as String)
  ...
  End Sub
  
  

  • Define and declare the method variables
    

    Dim imgUri as Uri = new Uri(imgResource, UriKind.Relative)
    Dim imgSrc as ImageSource
    
    

    
    
  • Set the UpperImage ImageBrush object to an image
    

    imgSrc = new Imaging.BitmapImage(imgUri)
    UpperImage.ImageSource = imgSrc
    
    

    
    
  • Set the LowerImage ImageBrush object to an image
    

    imgSrc = new Imaging.BitmapImage(imgUri)
    LowerImage.ImageSource = imgSrc
    
    

• Change the Grid tag to Canvas
  For now, dont worry about the UserControl tag and its attributes. I will be excluding the UserControl tag from the tutorial, since we are not going to be bothered with it for now. So just imply that if i reference the Canvas tag that it is surrounded by the UserControl tag.
  

  <Grid> -> <Canvas>
  </Grid> -> </Canvas>
  
  

  
  
• Inside the Canvas tag, add a Content Control and a child control Canvas
  This Tag will setup the basis of all the programming we will be doing. So remember what you name it in the x:Name attribute
  

  <Canvas>
    <ContentControl x:Name="MapContent">
      <Canvas x:Name="Map"></Canvas>
    </ContentControl>
  <Canvas>
  
  

  
  
• (Optional) Underneath the ContentControl, add a Grid tag
  This is more to have an overlay, is not necessary but will allow you to layer static or dynamic information over the ContentControl
  
  This will setup a table type grid over the background. If you clicked on the example above you noticed the area at the top-middle and left-center that had some instructions on how to move, this allows you to in theory layer a interface ontop of the background content.
  
  For ease of use, i am including all of it, instead of going into details about the Grid tag.
  

  <Canvas>
    <ContentControl ...>...</ContentControl>
    <Grid>
      <Grid.ColumnDefinition>
        <ColumnDefinition x:Name="colLeft" width="200" />
        <ColumnDefinition x:Name="colCenter" width="400" />
        <ColumnDefinition x:Name="colRight" width="200" />
      </Grid.ColumnDefinition>
      <Grid.RowDefinition>
        <RowDefinition x:Name="rowHeader" MinHeight="100" />
        <RowDefinition x:Name="rowBody" MinHeight="400" />
        <RowDefinition x:Name="rowFooter" MinHeight="100" />
      </Grid.RowDefinition>
      <StackPanel Background="AliceBlue" Grid.Column="1" Grid.Row="0" x:Name="pnlHeader">
        <TextBlock Text="Silverlight 3D Demo" />
      </StackPanel>
      <StackPanel Background="Yellow" Grid.Column="0" Grid.Row="1" x:Name="pnlMenu">
        <TextBlock Text="To move Left:" />
        <TextBlock Text="- Numpad 4, left arrow, A" />
        <TextBlock Text="To move Up:" />
        <TextBlock Text="- Numpad 8, up arrow, W" />
        <TextBlock Text="To move Right:" />
        <TextBlock Text="- Numpad 6, right arrow, D" />
        <TextBlock Text="To move Down:" />
        <TextBlock Text="- Numpad 2, down arrow, S" />
      </StackPanel>
    </Grid>
  </Canvas>
  
  

• Declare class variables
  

  Private _terrainMgr as TerrainManager
  Private _mapOffsetX as Double = 0
  Private _mapOffsetY as Double = 0
  Private _scrollSpeed as Integer = 20
  
  

  
  
• Declare the KeyDown event
  

  Private Sub MainPage_KeyDown(sender as Object, e as KeyEventArgs) Handles Me.KeyDown
  ..
  End Sub
  
  

  • Define the key strokes to catch
    

    Select Case e.Key
      Case Is = Numpad8, Key.W, Key.Up
        me._mapOffsetY += me._scrollSpeed
        Exit Select
      Case Is = Numpad2, Key.S, Key.Down
        me._mapOffsetY -= me._scrollSpeed
        Exit Select
      Case Is = Numpad6, Key.D, Key.Right
        me._mapOffsetX -= me._scrollSpeed
        Exit Select
      Case Is = Numpad4, Key.A, Key.Left
        me._mapOffsetX += me._scrollSpeed
        Exit Select
    End Select
    
    

    
    
  • Assign the Offset value to the appropriate attribute for the CanvasContent
    

    MapContent.SetValue(Canvas.LeftProperty, me._mapOffsetX)
    MapContent.SetValue(Canvas.TopProperty, me._mapOffsetY)
    
    

  
  
• Define the Loaded event
  

  Private Sub MainPage_Loaded(sender as Object, e as RoutedEventArgs) Handles me.Loaded
  ..
  End Sub
  
  

  • Initialize the TerrainManager and assign the object a size through the CreateGroundLayer method
    

    me._terrainMgr = New TerrainManager(Map)
    me._terrainMgr.CreateGroundLayer(100,100)