Data Science & Big Data Analytics : May 2012

The first step in creating a Windows Phone Silverlight application is to create a new project.

To create a new project

Make sure you have downloaded and installed the Windows Phone SDK. For more information, see Installing the Windows Phone SDK.
Start Visual Studio 2010 Express for Windows Phone from the Windows Start menu. If the Registration window appears, you can either register or temporarily dismiss the window.
Create a new project by selecting the File | New Project menu command.
The New Project window is displayed. Expand the Visual C# templates, and then select the Silverlight for Windows Phone templates.
Select the Windows Phone Silverlight and XNA Application template. Fill in the project Name with a name of your choice.

Click OK. Visual Studio creates a new project and opens MainPage.xaml in the Visual Studio designer window.
After creating the project, you may see an item in the Warning window that says something similar to: “The project 'SilverlightXNAAppLib' cannot be referenced. The referenced project is targeted to a different framework family (.NETFramework).” You can safely ignore this error. It is simply referring to naming differences between the Silverlight and XNA Framework assemblies.
Make sure Windows Phone Emulator is selected in the target drop-down at the top of Visual Studio.
Press F5 to run the project under Windows Phone Emulator.
In the emulator, press the Change to game page button.

The default project uses the XNA Framework to clear the Windows Phone screen to the CornflowerBlue color. We will:

Add code to animate a rectangle on the screen
Add Silverlight button controls, creating a color panel, to change the color of the rectangle
Add a button to toggle the visibility of the color panel

The XNA Framework will render these controls and the animated rectangle.

Creating and Adding Graphics Content to the Project

Create and add different colored rectangles to the library content for the project.

To create new graphics library content

Right-click on the following graphic and choose Save picture as….
In the Save Picture dialog, navigate to the directory where you created your project.
Save the picture as redRect.jpg in the XxxxLibContent directory, where Xxxx is the name of the project you entered in step 5 of the Creating a New Project section earlier in this topic.
Do the same with the following two graphics, saving them as greenRect.jpg and blueRect.jpg, respectively.
In Solution Explorer, right-click XxxxLibContent (Content), where Xxxx is the name of the project you entered in step 5 of the Creating a New Project section earlier in this topic.
In the context menu, choose Add > Existing Item….
In the Add Existing Item dialog, select all 3 files by holding down the CTRL key while clicking blueRect.jpg, greenRect.jpg, and redRect.jpg.
Click the Add button to add the graphics files to the project.

Loading and Animating Graphics Content

In this section, we will load the rectangles as graphics content and animate the currently selected rectangle.

To load and animate the graphics

In Solution Explorer, expand GamePage.xaml by clicking the triangle to its left.
In the code editor, open GamePage.xaml.cs by double-clicking it.

Declare four Texture2D variables at class scope in the GamePage class.

Copy

// The current rectangle
Texture2D texture;

// A variety of rectangle colors
Texture2D redTexture;
Texture2D greenTexture;
Texture2D blueTexture;

Scroll down to the OnNavigatedTo method.

After the TODO: comment, add the following code:

Copy

// If texture is null, we've never loaded our content.
if (null == texture)
{
    redTexture = contentManager.Load<Texture2D>("redRect");
    greenTexture = contentManager.Load<Texture2D>("greenRect");
    blueTexture = contentManager.Load<Texture2D>("blueRect");

    // Start with the red rectangle.
    texture = redTexture;
}

Declare two Vector2 variables at class scope in the GamePage class.

Copy

// Used to move the rectangle around the screen
Vector2 spritePosition;
Vector2 spriteSpeed = new Vector2(100.0f, 100.0f);

Replace the contents of the OnUpdate method with the following code.

Copy

// Move the sprite by speed, scaled by elapsed time.
spritePosition += spriteSpeed * (float)e.ElapsedTime.TotalSeconds;

int MinX = 0;
int MinY = 0;
int MaxX = SharedGraphicsDeviceManager.Current.GraphicsDevice.Viewport.Width - texture.Width;
int MaxY = SharedGraphicsDeviceManager.Current.GraphicsDevice.Viewport.Height - texture.Height;

// Check for bounce.
if (spritePosition.X > MaxX)
{
    spriteSpeed.X *= -1;
    spritePosition.X = MaxX;
}

else if (spritePosition.X < MinX)
{
    spriteSpeed.X *= -1;
    spritePosition.X = MinX;
}

if (spritePosition.Y > MaxY)
{
    spriteSpeed.Y *= -1;
    spritePosition.Y = MaxY;
}
else if (spritePosition.Y < MinY)
{
    spriteSpeed.Y *= -1;
    spritePosition.Y = MinY;
}

Replace the contents of the OnDraw method with the following code.

Copy

SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.Black);

// Draw the sprite
spriteBatch.Begin();

// Draw the rectangle in its new position
spriteBatch.Draw(texture, spritePosition, Color.White);

spriteBatch.End();

Select Windows Phone Emulator as the target and press F5 to run your application. Click the Change to game page button and you should see something very similar to the following image.

Adding Silverlight Controls

In this section, we use XAML to create a panel of Silverlight Button controls. The buttons enable the user to change the color of the rectangle. We’ll also add a button to toggle the visibility of the color panel. Using the UIElementRenderer class, these controls are rendered to a Texture2D, which is then painted on the screen in a SpriteBatch operation in the OnDraw method.

To add Silverlight controls

In Solution Explorer, double-click GamePage.xaml to open it in the designer.

Since we will be using XAML, replace the following comment:

Copy

<!--No XAML content as the page is rendered entirely with XNA-->

With the following XAML code.

Copy

<!-- LayoutRoot is the root grid where all page content is placed. -->
<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- Toggle the visibility of the ColorPanel. -->
    <Button Grid.Row="0" x:Name="ColorPanelToggleButton" Click="ColorPanelToggleButton_Click" Margin="1,0,-1,0">Toggle Color Panel</Button>

    <!-- Arrange buttons in a horizontal line by using StackPanel. -->
    <StackPanel x:Name="ColorPanel" Grid.Row="2"  Height="100" Orientation="Horizontal" HorizontalAlignment="Center" Visibility="Visible">
        <!-- Buttons to set the rectangle to specific colors -->
        <Button Click="redButton_Click" HorizontalAlignment="Center" Height="75" VerticalAlignment="Center" BorderThickness="3" Background="Red" Width="75" />
        <Button Click="greenButton_Click" HorizontalAlignment="Center" Height="75" VerticalAlignment="Center" BorderThickness="3" Background="Lime" Width="75" />
        <Button Click="blueButton_Click" HorizontalAlignment="Center" Height="75" VerticalAlignment="Center" BorderThickness="3" Background="Blue" Width="75" />
    </StackPanel>
</Grid>

This XAML code creates a Grid element to contain all the other elements. It first defines the Grid to have three rows. By using the Auto keyword, the top row and the bottom row Height properties are defined by their content. Using the asterisk (*) for the middle row Height property makes that row take up all the remaining space between the other two rows.
Next, the XAML defines a Button with the Click event handler set to a method called ColorPanelToggleButton_Click.
The XAML then defines a StackPanel to hold the Button elements that make up our color panel. The StackPanel has the x:Name property set to ColorPanel. This name is used in the C# code to toggle the visibility of this panel.
The Button elements each have their Background color set and a Click event handler assigned.
The following figure shows what our application in the designer should look like.
GetStartedSilverlightXNALayout

Adding Event Handlers

Now that we’ve added our controls and assigned names to the Click event handlers, we need to implement the handler methods.

To add event handlers

In the Visual Studio code editor, open or switch to GamePage.xaml.cs.
Scroll down to the end of the file, past the OnDraw method.

Copy and paste the following code immediately after the OnDraw method.

Copy

// Toggle the visibility of the StackPanel named "ColorPanel".
private void ColorPanelToggleButton_Click(object sender, RoutedEventArgs e)
{
    if (System.Windows.Visibility.Visible == ColorPanel.Visibility)
    {
        ColorPanel.Visibility = System.Windows.Visibility.Collapsed;
    }
    else
    {
        ColorPanel.Visibility = System.Windows.Visibility.Visible;
    }
}

This code simply toggles the Visibility property on the StackPanel that we named “ColorPanel” in the XAML code.

After the ControlPanelToggleButton_Click handler, copy and paste the following three Click handlers for the color Button elements that we declared in the XAML.

Copy

// Switch to the red rectangle.
private void redButton_Click(object sender, RoutedEventArgs e)
{
    texture = redTexture;
}

// Switch to the green rectangle.
private void greenButton_Click(object sender, RoutedEventArgs e)
{
    texture = greenTexture;
}

// Switch to the blue rectangle.
private void blueButton_Click(object sender, RoutedEventArgs e)
{
    texture = blueTexture;
}

These event handlers just set the Texture2D object that we use to render the rectangle on the screen, called “texture”, to point to the appropriately colored rectangle, which we already loaded in the OnNavigatedTo method.

Rendering the Silverlight Controls

Now that we have created the controls and coded the event handlers, all we need to do is render them on the screen.

To render Silverlight controls

In the GamePage.xaml.cs file, declare a UIElementRenderer at class scope level in the GamePage class.
Copy
// For rendering the XAML onto a texture UIElementRenderer elementRenderer;

In the GamePage class constructor, declare a handler for the LayoutUpdated event.

Copy

// Use the LayoutUpdate event to know when the page layout 
// has completed so that we can create the UIElementRenderer.
LayoutUpdated += new EventHandler(GamePage_LayoutUpdated);

Implement the GamePage_LayoutUpdated event handler. The this parameter in the call to the UIElementRenderer constructor is referring to the GamePage class, which is partially defined by the XAML code in the GamePage.xaml file. The UIElementRenderer class takes the XAML elements that are derived from UIElement and renders them to a Texture2D object.

Copy

void GamePage_LayoutUpdated(object sender, EventArgs e)
{
  // Create the UIElementRenderer to draw the XAML page to a texture.

  // Check for 0 because when we navigate away the LayoutUpdate event
  // is raised but ActualWidth and ActualHeight will be 0 in that case.
  if ((ActualWidth > 0) && (ActualHeight > 0))
  {
    SharedGraphicsDeviceManager.Current.PreferredBackBufferWidth = (int)ActualWidth;
    SharedGraphicsDeviceManager.Current.PreferredBackBufferHeight = (int)ActualHeight;
  }

  if (null == elementRenderer)
  {
    elementRenderer = new UIElementRenderer(this, (int)ActualWidth, (int)ActualHeight);
  }
}

Note:
You cannot remove the Silverlight UIElement specified in the UIElementRenderer constructor from the visual tree.

Next, use the UIElementRenderer instance to draw the Silverlight controls on the screen. Find the OnDraw method in the GamePage.xaml.cs file. Add the following line of code before the call to spriteBatch.Begin. This is the code that actually renders the XAML into a buffer that can be accessed with the Texture property of the UIElementRenderer.
Copy
// Render the Silverlight controls using the UIElementRenderer. elementRenderer.Render();

Also in the OnDraw method, add the following line of code between the calls to spriteBatch.Begin and spriteBatch.End.

Copy

// Using the texture from the UIElementRenderer, 
// draw the Silverlight controls to the screen.
spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White);

Select Windows Phone Emulator as the target and press F5 to run your application. You should see something very similar to the following image.
Click the buttons in the color panel at the bottom of the application to switch the color of the animated rectangle.
Click the Toggle Color Panel button at the top of the application to hide and show the color panel.

Data Science & Big Data Analytics

About Me

Tuesday 15 May 2012

Open source projects in the cloud – 22nd June 2012

Wednesday 9 May 2012

Combine Silverlight and the XNA Framework in a Windows Phone Application

To create a new project

To create new graphics library content

To load and animate the graphics

To add Silverlight controls

To add event handlers

To render Silverlight controls