A bit of code for creating thumbstick controls like the ones in our first game: Battle Arena.

It features these two thumbprint-style controls where the left one controls player movement and the right one controls the players shooting direction. These are two instances of the same class, the return values are just used for different purposes.

We start by creating a new class and adding a couple using statements:

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input.Touch;

Then we add some variables for the control to use:

        public Vector2 baseposition; //position of the base image a.k.a. the thumbprint
        public Vector2 currentposition; // position of the black dot in the picture above
        public Vector2 direction; //direction vector that we actually use for controlling the player
        Texture2D _baseimage; //image for the 'base' of the control (the thumbprint)
        Texture2D _topimage; //image for the 'top' (the black dot)
        bool topvisible = false; //is the black dot visible?

The class has a pretty standard structure so that it is easy to implement in your XNA game. Just like the default Game1.cs, this class has Initialize, Update and Draw methods. Heres what my Initialize function looks like:

 public void Initialize(Vector2 Baseposition, Texture2D baseimage, Texture2D topimage)
        {

            _baseimage = baseimage;
            _topimage = topimage;
            this.baseposition = Baseposition;
            this.currentposition = Vector2.Zero;
            direction = Vector2.Zero;
        }

It just sets default values and the correct textures in place. These textures are loaded in the games LoadContent method and passed for use here. The Update method is where all the magic happens. It looks like this:

public void Update(GameTime gametime)
        {
            currentposition = new Vector2(baseposition.X + _baseimage.Width / 2 - _topimage.Width / 2, baseposition.Y + _baseimage.Height / 2 - _topimage.Width / 2);                  //set default position
            direction = Vector2.Zero; //reset direction
            topvisible = false;      //reset visibility
            TouchCollection touch = TouchPanel.GetState(); //We use TouchPanel.GetState instead of touchPanel.isGestureAvailable because we want to check
            foreach (TouchLocation tl in touch)            // for continous press
            {
                if ((tl.State == TouchLocationState.Pressed) || (tl.State == TouchLocationState.Moved))
                {

                    Rectangle rect1;  //we create 2 rectangles for testing touch over our fingerprint image
                    Rectangle rect2; //rect1 = fingerprint image, rect2 = touch position
                    rect1 = new Rectangle((int)this.baseposition.X, (int)this.baseposition.Y, this._baseimage.Width, this._baseimage.Height);
                    rect2 = new Rectangle((int)tl.Position.X, (int)tl.Position.Y, 6, 6);
                    if (rect2.Intersects(rect1))  //because we have 2 rectangles we can use the intersects function to test that the press is in our desired area
                    {
                        Vector2 dirvect = Vector2.Zero;
                        dirvect = tl.Position - new Vector2(baseposition.X + (_baseimage.Width / 2), baseposition.Y + (_baseimage.Height / 2));
                        //the line above calculates a vector that we normalize below to get the direction compared to the center of the base image
                            if (dirvect != Vector2.Zero) { dirvect.Normalize(); } //if statement here to prevent division by zero.
                            // Normalize to get a unit direction vector we can multiply by players move speed if desired.
                           // System.Diagnostics.Debug.WriteLine(dirvect); //uncomment to see the direction vector printed in the debug log
                            topvisible = true;

                        direction = dirvect; //set our direction variable to dirvect
                        currentposition = tl.Position - new Vector2(_topimage.Width / 2, _topimage.Height / 2); //set the little black dots position
                    }
                }
            }

        }

The Update method above checks the position of the touch with TouchPanel.GetState() and compares it to the center of our controllers area (represented by the fingerprint texture) and makes a vector of it that we can use for our players movement, direction or for shooting bullets in a certain direction like Battle Arenas second instance of this class does.

The last part of this class is the Draw() method. Its about as simple as it gets:

 public void Draw(SpriteBatch spriteBatch)
        {
            spriteBatch.Draw(_baseimage, baseposition, Color.White);
            if (topvisible) { spriteBatch.Draw(_topimage, currentposition, Color.White); }
        }

This one just draws the base and if needed it draws the little dot on top of it.

Using the touchcontroller is easy:

Declare a TouchControls variable (or whatever you decided to call your class). Then in your Initialize() method:

lefttouchctl = new Touchcontrols();

In your Loadcontent method, after loading the relevant textures call the Initialize method of the controller:

            touchcontrolbaseimage = Content.Load<Texture2D>("touchcontrolbase");
            touchcontroltopimage = Content.Load<Texture2D>("touchcontroltop");
            lefttouchctl.Initialize(new Vector2(0, 288), touchcontrolbaseimage, touchcontroltopimage);

In your games update method call lefttouchctl.Update(gameTime);
(remember to also reflect the result to your player, for example:

 myPlayer.Position = lefttouchctl.Direction * myPlayerMoveSpeed;)

And finally in you games Draw() method call

lefttouchctl.Draw(spriteBatch);

There you have it. a basic working thumbstick controller for your WP7 xna game.