Does XNA have a built in method for drawing a scrollable list?

There would be a scroll bar on the right that can be selected and moved up and down to scroll the list inside the inventory screen. The list would not be all visible at once so as you scroll down the top items disappear and the bottom ones appear next in the list.

Visually it's like scrolling a webpage but within a smaller window.

Can this be done without using Windows Forms?


There isn't a built-in way in the XNA API to provide this kind of UI (or really, any UI at all). There are a handful of third-party projects that provide UI frameworks. Two that come to mind are XUI and Ruminate, which may provide what you want.

Alternatively, you can roll your own. Fundamentally this not much different from implementing scrolling behavior in any other kind of domain (such as scrolling your map):

  • You have a list of items in the inventory list, and functionality to render them however you like.
  • You have the rectangular region on the screen where the inventory is located.
  • You have a value that represents the user's scroll position within the inventory, which you update when the user drags or interacts with some other UI widget such as a scroll bar you've drawn next to the inventory.

That is the basic information you need to assemble to then understand which of the items should be rendered into the inventory window.


Scrolling isn't too hard - but it's not trivial either. I'll give you some starting points, but the actual implementation will depend on the structure of your game.

To begin with, you need your scroll region (probably a Rectangle), the scroll offset of the content within that region (probably int), and the length of the scrollable content (probably int).

Then you need a way to clip your scrolling content to display only within the scroll region. This means Viewport, ScissorRectangle, or a stencil buffer if you want a non-rectangular region. Viewport will change the origin of the display, whereas ScissorRectangle just clips.

To make your content move up and down within this region, use a translation matrix (Matrix.CreateTranslation). If you use SpriteBatch, the Begin method has an overload that takes a transformation matrix (MSDN).

To determine whether clicking is happening within the scroll region, use Rectangle.Contains. You can also use this to determine whether the user is clicking on your scroll bar.

If you want scroll-wheel support, use Mouse.ScrollWheelValue (note that this is a cummulative value, see MSDN).

You'll have to do all the maths for the scrolling yourself, but it should be fairly simple. Math.Min and Math.Max should help to keep your scroll offset in the desired bounds. You can calculate the height for your scrollbar with something like:

(int)Math.Max(1, (float)region.Height / (float)content.Height)
  • \$\begingroup\$ I didn't know about the ScissoRectangle. This will help a lot. \$\endgroup\$ – Devin Rawlek Jan 5 '14 at 0:38
  • \$\begingroup\$ Are there any limitations of ScissorRectangle? This is the first time I've heard of it. If I was doing this I would have probably drawn the entire contents to a diferent render target then used the Rectangle? sourceRectangle overload of SpriteBatch.Draw() to achieve the same thing. \$\endgroup\$ – Joe Shanahan Jan 5 '14 at 1:31
  • \$\begingroup\$ ScissorRectangle and Viewport must be pixel-aligned rectangles within the bounds of the backbuffer. Use a stencil buffer or render target if you want to do fancy 3D-effect menus. \$\endgroup\$ – Andrew Russell Jan 5 '14 at 4:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.