Positioning fonts on the Windows Phone 7 Screen

Article
10/31/2011

Lecture for tonights class, which I would like to share with you dear reader, the first part is about how to position fonts on the screen using the least number lines of code. Unfortunately, it requires a lot of variables, but there you go, complexity comes in many forms. Variables are easy to understand, but the code is more messy than I like. But to make neat code requires that the code readers understand what I am trying to do, and that can be difficult.

Here is the goal:

The code looks like the following, you can simply cut and past the following into your game1.cs, change the namespace to match, add the default SpriteFont1 to content. That’s it.

 using System;

 using Microsoft.Xna.Framework;

 using Microsoft.Xna.Framework.Graphics;

 using Microsoft.Xna.Framework.Input;

 namespace Orient

     public class Game1 : Microsoft.Xna.Framework.Game

         GraphicsDeviceManager graphics;

         SpriteBatch spriteBatch;

         string displaytext_bottom_right = "bottom right";

         string displaytext_bottom_left = "bottom left";

         string displaytext_top_right = "top right";

         string displaytext_top_left = "top left";

         SpriteFont SpriteFont1, SpriteFont2;

         private Vector2 textSize_bottom_right;

         private Vector2 textSize_top_left;

         private Vector2 textSize_top_right;

         private Vector2 textSize_bottom_left;

         private Vector2 Position_Text_bottom_right;

         private Vector2 Position_Text_bottom_left;

         private Vector2 Position_Text_top_right;

         private Vector2 Position_Text_top_left;

         public Game1()

             graphics = new GraphicsDeviceManager(this);

             Content.RootDirectory = "Content";

             /**********************************************************************

  * Place the following DisplayOrientation enum in the class

  * constructor

  * *******************************************************************/

             graphics.SupportedOrientations =

                 DisplayOrientation.LandscapeLeft | DisplayOrientation.LandscapeRight |

                 DisplayOrientation.Portrait;

             /*********************************************************************/

             // Frame rate is 30 fps by default for Windows Phone.

             TargetElapsedTime = TimeSpan.FromTicks(333333);

         protected override void Initialize()

             base.Initialize();

         protected override void LoadContent()

             spriteBatch = new SpriteBatch(GraphicsDevice);

             /*********************************************************************

  * Load the SpriteFont1

  * ******************************************************************/

             SpriteFont1 = this.Content.Load<SpriteFont>("SpriteFont1");

             SpriteFont2 = this.Content.Load<SpriteFont>("SpriteFont2");

             /********************************************************************

  * This is a "cheat" where the display text is added to the variable

  * upon declaration. Because the SpriteFont1 is declared as a

  * Spritefont variable, you get a bunch of properties and methods

  * that help with determining things about the font

  * For instance what is the number of characters in a string

  * *****************************************************************/

             textSize_bottom_right = SpriteFont1.MeasureString(displaytext_bottom_right);

             textSize_bottom_left = SpriteFont1.MeasureString(displaytext_bottom_left);

             textSize_top_right = SpriteFont1.MeasureString(displaytext_top_right);

             textSize_top_left = SpriteFont1.MeasureString(displaytext_top_left);

         protected override void Update(GameTime gameTime)

             Viewport viewport = this.GraphicsDevice.Viewport;

             Position_Text_bottom_left = new Vector2((0f),

                            (viewport.Height - textSize_bottom_left.Y));

             Position_Text_bottom_right = new Vector2((viewport.Width - textSize_bottom_right.X),

                                        (viewport.Height - textSize_bottom_right.Y));

             Position_Text_top_left = new Vector2((0F),

                                        (0F));

             Position_Text_top_right = new Vector2((viewport.Width - textSize_top_right.X),

                                         (0F));

             base.Update(gameTime);

         protected override void Draw(GameTime gameTime)

             GraphicsDevice.Clear(Color.Red);

             spriteBatch.Begin();

                 spriteBatch.DrawString(SpriteFont1, displaytext_bottom_right, Position_Text_bottom_right, Color.White);

                 spriteBatch.DrawString(SpriteFont1, displaytext_bottom_left, Position_Text_bottom_left, Color.White);

                 spriteBatch.DrawString(SpriteFont1, displaytext_top_left, Position_Text_top_left, Color.White);

                 spriteBatch.DrawString(SpriteFont1, displaytext_top_right, Position_Text_top_right, Color.White);

             spriteBatch.End();

             base.Draw(gameTime);

Your solution explorer should look like the following, I deleted the program.cs since phone programs don’t use it.

Orient.zip

Positioning fonts on the Windows Phone 7 Screen

Additional resources