The position of the last mouse position recorded. If the mouse is pressed down for use with the main panel. To make this all work, we need a few variables within our custom UI, all of which are private: Variable The yellow area is the ScrollPanel, the blue area is the ScrollContainter, and the green area is the ScrollAt. The picture above outlines how I laid my design out.

Although we could use Microsoft's built-in scroll bar ( VScrollBar) or create our own as a separate UI element, I'm choosing to build it all into the same component as it gives us a greater degree of freedom with regards to how it looks and how it interacts with the scroll bar. The way I've designed the UI to look is to have a main panel on the left hand side, which is what we will scroll, and our own custom scroll bar on the right hand side. The reason I've opted to make this a custom UI control is that it can then be used in other projects and re-used within the same form without having to program the whole backend system over again. This article is aimed at C# users looking to learn about custom UIs some knowledge is expected such as setting up a project and creating an interface using the form designer. This type of control is similar to the type of controls seen in many 3D and 2D art applications such as Autodesk's 3Ds Max and Autodesk's Maya, and is a great way to trim down a large GUI with user friendly and intuitive controls. In this article, we will look at how to design and implement a custom UI control allowing us to fill a panel with controls, and then reduce the screen space used by allowing the user to scroll through the controls either by clicking and dragging the panel or through the scroll bar.

How to make the scroll bars wider