Dropdown Menu in Monogame/XNA

I'm working on a game and developing the Main Menu, in there I have a settings scene. This scene contains a few tabs and for the video tab, I would like a dropdown menu that allows the switching of resolutions. Now, the latter part I understand the logic for, but using the XNA framework I am failing to understand the logic of a drop down menu. Thanks for any help :)

Solution

I actually made a DropDown for my game, it really isn't that hard when you think about it. First you'll need a DropDownContainer class and a DropDownElement. The DropDownContainer is the top part of the DropDown where you see the currently selected option. The DropDownElements are the selectable options you show when the user clicks on DropDownContainer.

Here is how the code works:

Create an array of DropDownElements in your DropDownContainer class.
In the constructor of DropDownContainer, pass the number of DropDownElements and an array of strings where each string is the text of specific DropDownElement.
Make the DropDownElement's constructor take a string and in it's Draw(spriteBatch) method, draw that string over the texture of the DropDownElement.

Pass in a Vector2 as position for the container, it will be used as a base to position the elements too. Example loop in DropDownContainer's constructor:

for (int i = 0; i < elements.Count; i++)
{
    elements[i] = new DropDownElement(spriteFont, textArray[i], new Vector2(containerPosition.X, (containerPosition.Y + (34 * (i + 1))) + 2), this.textColor, content); // 34 = DropDownElement's Texture height
}

Make sure you pass in a ContentManager content in both classes's constructors so you can load your assets.
Have a bounding Rectangle for both of these classes, where it's X and Y are (int)containerPosition.X, (int)containerPosition.Y and Width and Height are the dimensions of the Texture2D.
In DropDownContainer's Update(gameTime) method, have a check if the cursor is within the bounds and if the user clicks change a flag like this: clicked = !clicked;
In DropDownContainer's Draw(spriteBatch) method, check if (clicked) and draw the elements array by looping through it.
Instantiate the DropDown like this: private DropDownContainer dropDown = new DropDownContainer(...); and call it's corresponding methods.
To check which option was selected, just expose the Text property of the DropDownElements.
When you are done with that you can add things like mouse hover effects and text color fading in/out using linear interpolation.

I also made a TextBox for my XNA game but that deals with some heavy P/Invokes and since you don't know how to make a basic Drop Down it would be too complicated to explain.

Edit to address the comment below:

There are a few problems with your logic, I'll highlight them:

Without a string property that gets/sets the text of the elements, how would you check which element was selected? E.g. if (container.Text == "text of first element") { /* user chose the lowest resolution */ }
Unless you pass the text to the constructor there is no way to set the Element's text, if there is no Text property.
How would you add the value 1600x900 directly to an enum? Unless I misunderstand you, there's no way you could put a string (1600x900 is a string) in an enum...

Even if you were to do something like this:

enum resOptions
{
    _800x600 = 0,
    _1280x1024 = 1,
    _1920x1080 = 2,
    // etc.
}

And maybe have them ordered the same way in the DropDownElement array, but still, you'll have to implement your own way to see which option the user clicked on... Which eventually will lead you to checking the Text property of the DropDownContainer.

So I would advice strongly against using an enum here because it would only over-complicate the already complex enough DropDown algorithm. It would take you much more time to write a way to check what option was selected.

I would just set the Container's Text to the clicked Element's Text on user click and that's how I would check the selected option. If you are still willing to do this with an enum, I'm afraid I won't be of much help because I already gave you a hint on how to do it the simple way. If you want to do it another way, you'll have to write the code for it yourself. After all the idea of this site is not "Write my code for me" but rather "Give me a good idea how to properly write it myself".

Over-complicating things when you can just do it with both less effort and less code is bad programming practice. Only if you plan to extend the DropDown's functionality, making it complex is good. But in your case I honestly don't see a point to set Text like this. Why would you discard the simple yet effective solution and pursue something you are not sure about?

If you have further questions, feel free to comment.