how can I get rid of the unnecessary black squares in portrait orientation in xna?

Question

I have an image and I got it set so that the only orientation supported is portrait by using:

graphics.SupportedOrientations = DisplayOrientation.Portrait; on the game1() method

How can I get rid of the black boxes on the upper and lower edges of the screen?

This is what it looks like:

Ignore that 29, it's my fps monitor.

Before orientation was changed:

After it was changed:

This is my code. You'll notice a lot of arrays and adding and stuff, I be using it for something else. Right now, I'm not really using it:

    Texture2D mineField;

    Vector2 mineFieldLocation,
        numFontLocation;

    int[] fieldPos = new int[9];

    float[]
        minePosX = new float[9],
        minePosY = new float[9];

    SpriteFont numFont;

    int posAdder = 45,
        index = 0;

    Random randMinePos = new Random();

    public Game1()
    {
        graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";

        graphics.SupportedOrientations = DisplayOrientation.Portrait;

       graphics.IsFullScreen = true;

        // Frame rate is 30 fps by default for Windows Phone.
        TargetElapsedTime = TimeSpan.FromTicks(333333);

        // Extend battery life under lock.
        InactiveSleepTime = TimeSpan.FromSeconds(1);
    }

    /// <summary>
    /// Allows the game to perform any initialization it needs to before starting to run.
    /// This is where it can query for any required services and load any non-graphic
    /// related content.  Calling base.Initialize will enumerate through any components
    /// and initialize them as well.
    /// </summary>
    protected override void Initialize()
    {
        // TODO: Add your initialization logic here


        // le sumo o resto a la x o y 45 para que caiga en el mismo medio del cuadrado
        mineFieldLocation = new Vector2(30, 70);

        numFontLocation = new Vector2(33, 65);

        for (int i = 0; i < fieldPos.Length; i++)
        {
            fieldPos[i] = posAdder;

            posAdder += 45;                
        }

        for (int i = 0; i < fieldPos.Length; i++)
        {
            minePosX[i] = fieldPos[randMinePos.Next(0, 9)];
            minePosY[i] = fieldPos[randMinePos.Next(0, 9)];
        }

        base.Initialize();
    }

    /// <summary>
    /// LoadContent will be called once per game and is the place to load
    /// all of your content.
    /// </summary>
    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);

        mineField = Content.Load<Texture2D>("Minesweeper");

        numFont = Content.Load<SpriteFont>("NumberFont");

        // TODO: use this.Content to load your game content here
    }

    /// <summary>
    /// UnloadContent will be called once per game and is the place to unload
    /// all content.
    /// </summary>
    protected override void UnloadContent()
    {
        // TODO: Unload any non ContentManager content here
    }

    /// <summary>
    /// Allows the game to run logic such as updating the world,
    /// checking for collisions, gathering input, and playing audio.
    /// </summary>
    /// <param name="gameTime">Provides a snapshot of timing values.</param>
    protected override void Update(GameTime gameTime)
    {
        // Allows the game to exit
        if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
            this.Exit();

        // TODO: Add your update logic here

        base.Update(gameTime);
    }

    /// <summary>
    /// This is called when the game should draw itself.
    /// </summary>
    /// <param name="gameTime">Provides a snapshot of timing values.</param>
    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        spriteBatch.Begin();

        spriteBatch.Draw(mineField, mineFieldLocation, Color.White);

        spriteBatch.DrawString(numFont, "1", numFontLocation, Color.Green);

       // spriteBatch.DrawString(numFont, "0", new Vector2(minePosX[index],minePosY[index]), Color.Black);

        if (index < 8)
        {
            index++;
        }

        spriteBatch.End();

        // TODO: Add your drawing code here

        base.Draw(gameTime);
    }
}

Answer 1

As I said in my comment, you'll need to set the preferred width and height but I'll explain why..

First off, the documentation for SupportedOrientations states

Gets or sets the display orientations that are available if automatic rotation and scaling is enabled.

Which I didn't believe you did have enabled (not sure if it is by default). Following on from this there is a see also link on this page for Automatic Rotation and Scaling which drops lots of hints about setting the width and height...

If you then looked at your third image it kind of makes sense that that is needed as your current height looks to be what your width was, which leads me to believe that your current width is now what your previous height was. So to be sure I'd set both

Answer 2

when in portrait-only mode, you need to swap the values for width and height of your back-buffer:

//For 480x800 (90* rotated wp7 device)
Graphics.PreferredBackBufferWidth = 480;
Graphics.PreferredBackBufferHeight = 800;

You were rendering a 800x480 backbuffer on a 480x800 screen. This causes it to letterbox.

Might also interest you:
XNA - Get Current Screen Resolution
XNA: get screen's width and height