Page 1 of 1

Silverlight Moveable Background Silverlight 3 - Pt 1: Creating a moveable background/terrain

#1 woodjom   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 566
  • Joined: 08-May 08

Posted 22 September 2009 - 09:43 PM

Full Disclosure
This is a feeder tutorial from the original post by Mike Snow (

Development Environments
  • Visual Studio (2005, 2008, Express)
  • Silverlight 3 development addons
  • XAML Editor (if using 2005 & Express)
  • Alot of patience
Terms to Remember
  • Application = Refers to the Silverlight Application Project
  • Webpage = Refers to the Sibling Web Application Project, if you elected to add it.
Create Project
  • Goto File -> New -> Project
  • Select "Silverlight Light Application
    Posted Image
  • Create a sibling Web Application to test your development
    Posted Image
  • Finished, verify that your Solution Explorer looks like this
    Posted Image
Creating and Developing the TerrainManager class
  • Add a new class to the Application project, and name it TerrainManager
  • Once created, declare the class specific variables
    Const TILE_WIDTH As Integer = 90
    Private _mapCanvas As Canvas
    Private _groundLayer(,) As TerrainTile

  • Pass a Canvas object to this class when it is instantiated
    public sub New(mapCanvas as Canvas)
      me._mapCanvas = mapCanvas
    end sub

  • Define a Method called CreateGroundLayer
    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

    • Inside the height Loop, declare the width For loop
      For x as integer = 0 to width -1

    • 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.

      • Add the _groundLayer(,) array location to the _mapCanvas object that was passed to the class.
Creating the TerrainTile.xaml & codebehind
  • Add a Silverlight User Control file to the Application project, naming it TerrainTile.xaml
  • Open TerrainTile.xaml document
    • 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 x:Name="LowerRightPoly">

    • 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">
        <ImageBrush x:Name="UpperImage" /> 
      <Polygon x:Name="LowerRightPoly">
        <ImageBrush x:Name="LowerImage" />

  • Open the TerrainTile.xaml.vb document
    • 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)
      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
Developing MainPage.xaml & codebehind
  • Locate the "MainPage.xaml" File
    • 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
        <ContentControl x:Name="MapContent">
          <Canvas x:Name="Map"></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.
        <ContentControl ...>...</ContentControl>
            <ColumnDefinition x:Name="colLeft" width="200" />
            <ColumnDefinition x:Name="colCenter" width="400" />
            <ColumnDefinition x:Name="colRight" width="200" />
            <RowDefinition x:Name="rowHeader" MinHeight="100" />
            <RowDefinition x:Name="rowBody" MinHeight="400" />
            <RowDefinition x:Name="rowFooter" MinHeight="100" />
          <StackPanel Background="AliceBlue" Grid.Column="1" Grid.Row="0" x:Name="pnlHeader">
            <TextBlock Text="Silverlight 3D Demo" />
          <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" />

  • Open the MainPage.xaml.vb code page
    • Declare class variables
      Dim _terrainMgr as TerrainManager
      Dim _mapOffsetX as Double = 0
      Dim _mapOffsetY as Double = 0
      Dim _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)

Is This A Good Question/Topic? 0
  • +

Replies To: Silverlight Moveable Background

#2 woodjom   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 566
  • Joined: 08-May 08

Posted 26 September 2009 - 01:21 PM

Do to not being able to edit the source of the post.

Go Here to view the corrections to the Polygon XAML section: My DIC Blog
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1