Monogame C#: How can I go about creating a fixed grid of images that fit uniformly in each cell?

Question

I want to create a grid that is divided up into cells, those cells will contain images that don't change their dimensions, but will fit uniformly inside each cell of the grid. My past attempts did not implement this concept, as the last attempt only used a list of vectors that was applied to an object's position; I was wondering how you would go about implementing these cells on the grid and then placing an image inside each cell, making sure the images don't adapt the dimensions of the cells.

//Previous vector attempt

public int _screenHeight;
public int _screenWidth;

_screenWidth = GraphicsDevice.PresentationParameters.BackBufferWidth;
_screenHeight = GraphicsDevice.PresentationParameters.BackBufferHeight;

public List<Vector2> generateGrid(int _rows, int _cols)
    {
        // Example list
        List<Vector2> gridPoints = new List<Vector2>();

        int rows = _rows;
        int cols = _cols;

        int units_x = _screenWidth / rows;
        int units_y = _screenHeight / cols;

        for (int i = 0; i < _cols; i++) 
            for (int j = 0; j < _rows; j++)
                gridPoints.Add(new Vector2(0 + units_x * j, 0 + units_y * i));

        // returns the vector points
        return gridPoints;
    }

My theory at the moment

• Create a cell class, which nests two rectangles(cell and image) together at defined points by basic division in the draw event.

THEORY EXAMPLE

Answer 1

Your intuition in your previous attempt (the one in your post) was very close to what you were wanting to achieve. Your logic for finding the Vector2 positions was correct.

Since you already have the coordinates for your gridpoints, you can just put the Texture2Ds on each gridpoint position.

By doing this, each Texture2D will have its upper-left corner be on the upper-left corner of the grid cell you assigned it to.

You also do not have to worry about the Texture2Ds resizing to fit the grid cells. Whenever you draw them, they will be drawn using the dimensions of the image file you provided them.

I.e. if you assigned a 153x45px image to a Texture2D, then it will still be 153x45 pixels in size when it is drawn. (That is, unless you changed its scale, but I'm assuming that you did not.)

If you want to have the Texture2D be not on the upper-left corner of the grid cell, then you must offset the (X,Y) coordinates by the amount of pixels you want it to be shifted.

E.g. shifting a Texture2D by 15 pixels down and 30 pixels to the right would require you to update its original position by (X + 15, Y + 30).