Lab: Move an object using Silverlight and XNA in Windows Phone Part 2

In the previous blog:Lab: Move an object using Silverlight and XNA in Windows Phone Part 1

We generated all of the XNA code, less a few important lines of code.  In this blog let’s take a look at the XAML and related code behind.

Working with XAML, just in case you are thinking you will never have to use XAML, well that might happen, but it is unlikely.  XAML in Silverlight, XAML in WPF, XAML, XAML, XAML, it just more powerful then HTML5.  Being able to use the HTML 5 specified code with Javascript is pretty important and you need to learn that as well, but seriously think about it, when was the last time you developed in javascript or ecmascript?  You should also know how to develop in C, C++, C#, VB, ADA, TLA+ (just kidding), and so forth.

Ok let’s take a look at the XAML code:

Code Snippet

1. <!--*****************XAML Code Added Begins Here****************-->
2.     <Grid x:Name="LayoutRoot">
3.         <Grid.RowDefinitions>
4.             <RowDefinition Height="Auto"/>
5.             <RowDefinition Height="*"/>
6.             <RowDefinition Height="Auto"/>
7.         </Grid.RowDefinitions>
8.       
9.         <!-- Arrange buttons in a horizontal line by using StackPanel. -->
10.           <StackPanel x:Name="ColorPanel" Grid.Row="2"
11.                     Height="100" Orientation="Horizontal"
12.                     HorizontalAlignment="Center" Visibility="Visible">
13.             <Image Height="80" Name="image1" Stretch="Fill" Width="71" Source="/CSUDH_Feb_23;component/Images/enemy.png" OpacityMask="#FF3BDB3B" Tap="image1_Tap" />
14.         </StackPanel>
15.     </Grid>
16.     <!--*****************XAML Code Added Ends Here****************-->

First off you add a Grid, which is like a spreadsheet, then you define the Row Heights for 3 rows.  Then you place a stack panel in Grid Row 2, which is the third row since the row count starts with zero.  Then you add an Image from the toolbox, using the Properties you set up a “source” for the image and then you use the Events tab to generate a tap event for the image, this way you will simply tap the screen to change to the image.  The Tap event will be in the code behind.

The properties box for any control can be brought up  by clicking the control one time and then pressing F4.  At the top of the Properties there are two “tabs” that say Properties (Hand holding a deed, representing a property, get it?) and then on the right hand side says Events (lightning bolt).  Generally speaking the Properties tab looks busy and the Events tab has only one or two things filled in.  To automatically create an event in the code behind, simply double click the event and that will create the correct event in the code behind.

Now we need to add the components to implement the UIElementRenderer in the code behind:

In the class scope add the UIElementRenderer variable

Code Snippet

1. //This is the class scope area, it is where you place
2.         //or declare variables that will be used in the entire
3.         //class
4.         ContentManager contentManager;
5.         GameTimer timer;
6.         SpriteBatch spriteBatch;
7.         /************Code Added Begin*******************/
8.         /************Add Textures***********************/
9.         //Add three textures, one to hold a changing texture and one to hold a specific texture or picture
10.         /// <summary>
11.         /// The texture with texture is to be used has a holder
12.         /// </summary>
13.         Texture2D holderTexture;
14.         /// <summary>
15.         /// Use this for the enenmy image
16.         /// </summary>
17.         Texture2D enemyTexture;
18.         /// <summary>
19.         /// Use this for the friendly image
20.         /// </summary>
21.         Texture2D friendlyTexture;
22.         /*************End Adding Textures****************/
23.         /************Add Vector**************************/
24.         /// <summary>
25.         /// A vector to show the position of the texture
26.         /// </summary>
27.         Vector2 spritePosition;
28.         /// <summary>
29.         /// A vector to use for the speed of the texture
30.         /// </summary>
31.         Vector2 spriteSpeed = new Vector2(100.0f, 100.0f);
32.         /*************End Adding Vectors*****************/
33.         
34.         /************Add UIElementRenderer***************/
35.         // For rendering the XAML onto a texture
36.         UIElementRenderer elementRenderer;
37.         /*************End Adding Vectors*****************/
38.         /*************Code Adding End********************/

In the Class constructor add an eventHandler:

Code Snippet

1. public GamePage()
2.         {
3.             InitializeComponent();
4.  
5.             // Get the content manager from the application
6.             contentManager = (Application.Current as App).Content;
7.             /************Add LayoutUpdated***************/
8.             // Use the LayoutUpdate event to know when the page layout
9.             // has completed so that we can create the UIElementRenderer.
10.             LayoutUpdated += new EventHandler(GamePage_LayoutUpdated);
11.             /************Add LayoutUpdated***************/
12.  
13.             // Create a timer for this page
14.             timer = new GameTimer();
15.             timer.UpdateInterval = TimeSpan.FromTicks(333333);
16.             timer.Update += OnUpdate;
17.             timer.Draw += OnDraw;
18.         }

Now add a method that you use for the eventhandler, do this after any of the methods in the class:

Code Snippet

1. /**************************LayoutUpdated Add Start**********************************/
2.       void GamePage_LayoutUpdated(object sender, EventArgs e)
3.       {
4.           // Create the UIElementRenderer to draw the XAML page to a texture.
5.  
6.  
7.           if (null == elementRenderer)
8.           {
9.               elementRenderer = new UIElementRenderer(this, (int)ActualWidth, (int)ActualHeight);
10.           }
11.       }
12.       /**************************LayoutUpdated Add End**********************************/

In the OnDraw event add the UIRenderer code, this is part of the spriteBatch process and must be placed between the spriteBatch.Begin and the spriteBatch.End.  In this case order is not important, often it is, but not this time.

Code Snippet

1. private void OnDraw(object sender, GameTimerEventArgs e)
2.         {
3.             SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.CornflowerBlue);
4.  
5.             // TODO: Add your drawing code here
6.  
7.             // Render the Silverlight controls using the UIElementRenderer.
8.             /***************elementRenderer Added Begin************************/
9.             elementRenderer.Render();
10.             /***************elementRenderer Added End**************************/
11.  
12.             /***************Code Added Begin***********************************/
13.             SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.GhostWhite);
14.  
15.             // Draw the sprite
16.             spriteBatch.Begin();
17.             /***************elementRenderer Added Begin************************/
18.             // Using the texture from the UIElementRenderer,
19.             // draw the Silverlight controls to the screen.
20.             spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White);
21.             /***************elementRenderer Added End**************************/
22.  
23.             // Draw the rectangle in its new position
24.             spriteBatch.Draw(holderTexture, spritePosition, Color.White);
25.  
26.             spriteBatch.End();
27.  
28.             /***************Code Added End*************************************/
29.  
30.         }

And that should do it!