Windows 8 Metro Getting Started

The current release was created using the Windows 8 Developer Preview Bits and Visual Studio 11 Express. Currently the easiest way to get these tools is to download the ISO and create a bootable VHD.

While you do not need tablet hardware for development (you can use a PC and a mouse), you may wish to obtain a tablet because multitouch is more fun than a mouse :) Here are a couple of posts to help you with get started with tablet hardware:

Sample Projects

Once you have a development environment and hardware setup, you can download the source code and check out the sample projects inside the VS11 solution.

Demo.Simple

Set Demo.Simple as your startup project and run the solution. This shows a no-code scenario with a ragdoll and stack of blocks. Here are the main parts of the simple demo:
  • ucBlock.xaml defines the Block sprite.
  • ucRagDoll.xaml defines a rag doll with appendages and joints bringing them together.
  • MainPage.xaml creates instances of ucBlock and ucRagDoll. There is one line of code in MainPage.xaml.cs which calls ScaleToObject. This allows the game canvas to scale to full screen.

Demo.Advanced

Set Demo.Advanced as your startup project and run the solution. This shows how to dynamically add and delete user controls, track performance, and use nested Storyboard animations inside physics objects. Here are the main highlights of the advanced demo:
  • the code-beind file MainPage.xaml.cs shows how to handle the TimerLoop and Collision events raised by the PhysicsCanvas.
  • The AddAnItem method shows how to dynamically add a complex UserControl containing multiple sprites and joints.

Using Expression Blend

Please note that at the time of this writing, Blend 5 for Metro App Development has not been released - there is only a preliminary version supporting HTML development. When Blend 5 is released with XAML support, this section will be updated with a design-time walkthrough inside Blend.

Using Visual Studio

Let's walk through creating a simple physics simulation using XAML inside Visual Studio.

Creating the Solution

  • Create a new "Windows Metro Style" project in VS11
  • Right-click the solution and select "Add Existing Project".
    • Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
  • Right-click the solution and select "Add Existing Project".
    • Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
  • From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Adding a Simple Physics Object

  • Lets create a simple rectangle object for the "ground" of our simulation. Open MainPage.xaml and add the following namespace imports to the XAML at the top, replacing My.Project.Here with your project name:
    xmlns:ph="using:Spritehand.FarseerHelper"
    xmlns:local="using:*My.Project.Here*"
  • Now let's add in a canvas named cnvGameOuter to handle the outside of our simulation. By doing this, we can overlay text like score and lives on top of our game.
<Canvas x:Name="cnvGameOuter"  >

</Canvas>
  • Within cnvGameOuter, we add in our PhysicsCanvas which you can think of as the Window into our Game or Simulation. We can set MousePickEnabled="true" so that the user can move things around with gestures or the mouse.
<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

    </ph:PhysicsCanvas>

</Canvas>
  • Now we can add our sprites (physics objects) into the Physics Canvas using the PhysicsSprite object. We'll add in a large block for the ground and a small block to fall. To keep the "ground" sprite in place, we can set the IsStatic property to True.
<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

        <ph:PhysicsSprite x:Name="block" Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" >
            <Rectangle Width="100" Height="100" Fill="LightBlue" />
        </ph:PhysicsSprite>

        <ph:PhysicsSprite x:Name="ground" Background="DarkGreen"  Canvas.Left="0" Canvas.Top="648"  Width="1366" Height="120" IsStatic="True" />

    </ph:PhysicsCanvas>

</Canvas>
  • Run the project and try moving the "block" sprite around with your finger (or mouse).

Shape Types

For the two simple PhysicsSprite objects we added above named "ground" and "block" we ended up with Rectangular shapes - because this is the default ShapeType for a PhysicsSprite. But what if we needed a circular or polygon shape? We can control this with ShapeType.
  • Add the following PhysicsSprite definition inside the PhysicsCanvas. This defines a "ball" which has a ShapeType of Ellipse, and adds some "bounce" to the ball using RestitutionCoefficient.
<ph:PhysicsSprite x:Name="ball" Canvas.Left="350" Width="100" Height="100" ShapeType="Ellipse" RestitutionCoefficient="0.8">
    <Ellipse Width="100" Height="100" Fill="LightYellow"/>
</ph:PhysicsSprite>
  • Run the project and try moving the "ball" sprite with the mouse. Note that it is round.
  • What if we need a more exact (polygon) shape? We can accomplish complex shapes by defining a Path element as the first element in our PhysicsSprite, and setting the ShapeType to Polygon. Note that you could set the Visibility of this boundary sprite to Collapsed if you have a complex design inside the PhysicsSprite that you are defining the basic boundary for.
<ph:PhysicsSprite Height="78.667" x:Name="cnvBody" Width="197" Canvas.Left="10" Canvas.Top="0" ShapeType="Polygon">
    <Path x:Name="bodyBoundary"  Fill="Red" Data="M2,72 L196,76 L190,43 L136,28 L123,2 L84,2 L83,28 L2,32 z" Height="75" 
             Canvas.Left="1.5" Stretch="Fill" Stroke="#FF000000" Canvas.Top="1.5" UseLayoutRounding="False" Width="195">
    </Path>
</ph:PhysicsSprite>
  • To debug shape types that the simulation is using visually, we can set DebugMode="true" on the PhysicsCanvas. This draws a handy outline on top of each physics element and is handy when you are seeing collision problems.

Accessing Farseer Objects

Under every PhysicsSprite is a Farseer Body and Fixture elements (to learn more about Farseer and see docs please visit farseerphysics.codeplex.com).
  • All PhysicsSprites defined inside the PhysicsCanvas are accessible through the PhysicsCanvas.PhysicsObjects dictionary. We can get to the Farseer BodyObject to change things such as Mass, Restitution, and even the shape (Fixtures) of the object.
PhysicsSprite spr = cnvGame.PhysicsObjects["ball"];
spr.BodyObject.Restitution = 0;

Last edited Nov 6, 2011 at 8:04 PM by AndyBeaulieu, version 20

Comments

lachlank Jun 10, 2013 at 2:02 AM 
Awesome work, going to try using this with my next Metro project. Just a note that the included Metro demos don't work out of the box, the XAML references need to change from clr-namespace: to using:, I think this was something MS changed from CTP to RTM...

Cheers

dingxiaohu2009 Apr 17, 2013 at 2:14 PM 
I want use this with my monogame aplication.
I would be grateful If you could publish a monogame-compatible version.

coton61 Mar 30, 2012 at 6:23 PM 
This is great! I wonder, how can you add a camera controller to this?

GrobotoX Dec 10, 2011 at 12:14 PM 
Can be used with visual studio 2010?
I want use this with my touch wpf aplication.
Hoppe can be possible.
If possible please can publish a guide?
Best regards.